AWS EC2와 Github Actions로 프론트엔드 배포해보기 (3)

윤상준·2022년 11월 24일
2

AWS

목록 보기
3/3
post-thumbnail

9. EC2 인스턴스 프로젝트 환경 세팅

EC2에서 우리 프로젝트를 돌리기 위해 필요한 Node.js, NPM, yarn, pm2 등등을 설치해야한다.

9-1. Node.js 설치

먼저 최신 버전의 Node.js 를 설치해야한다.
Node.js 홈페이지에 들어가서 버전을 확인하자.

지금 (22년 11월) 기준으로 18 버전이 안정적인 최신 버전이니 18.x 버전을 설치할 것이다.

sudo apt update
curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -E -
sudo apt-get install -y nodejs

잘 설치되었는지 버전 확인을 해보자.

node -v
npm -v

다음과 같이 뜨면 성공적으로 설치된 것이다.

9-2. yarn 설치 (선택사항)

만약 패키지 매니저를 yarn으로 사용한다면 yarn을 추가로 설치해주어야 한다.
다만 무작정 npm install yarn을 할 경우, yarn이 다음과 같은 오류를 뱉을 수 있다.

yarn start 
ERROR: [Errno 2] No such file or directory: 'start'

이 경우 yarn과 자동으로 같이 깔렸던 패키지들을 제거해줘야 하기 때문에 애초에 설치할 때 다른 방식으로 해야한다.

다음의 명령어를 하나 씩 입력해서 설치하자.

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn -y

참고자료 1 : 우분투 cmdtest 말고 yarn 똑바로 설치하는 법
참고자료 2 : Yarn install command error No such file or directory: 'install'

버전 확인을 했을 때 버전이 뜨면 잘 설치된 것이다.

yarn -version

9-3. PM2 설치

PM2란?

EC2 인스턴스에서 우리 프로젝트를 실행시키고나서 인스턴스를 떠났을 때 (인스턴스 종료가 아니라 SSH 터미널을 종료했을 때) 에도 프로젝트가 계속 실행 중이어야 한다.

인스턴스를 떠났을 때마다 프로젝트가 종료된다면 계속해서 인스턴스를 켜두어야하고, 이 말은 컴퓨터를 계속 켜두고 있어야 한다는 뜻이다.

이처럼 터미널 세션을 종료하거나 프로세스를 종료하면 같이 종료되는 경우를 포어그라운드 방식 (Foreground) 이라고 한다.

반대로 터미널 세션 종료, 프로세스 종료 여부와 상관 없이 뒷단에서 계속 돌아가는 경우를 백그라운드 방식 (Background) 이라고 한다.

Node.js는 기본적으로 포어그라운드에서 실행이 되므로 이를 백그라운드에서 실행해야 한다.
이때 사용할 수 있는 것이 PM2이다.

PM2 공식 문서

PM2 is a daemon process manager that will help you manage and keep your application online 24/7
PM2는 여러분의 어플리케이션을 24/7 동안 켜놓고 또 유지보수 할 수 있도록 도와줄 데몬 프로세스 매니저입니다.

PM2 설치

npm은 sudo 즉, 루트 권한으로 실행해야 Permission Denied 없이 사용할 수 있다.

sudo npm install pm2 -g

만약 다음과 같이 npm 업데이트하라고 나오면 해주자.

npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 184 packages, and audited 185 packages in 9s

12 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 8.19.2 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
----------------- 여기를 잘 보자 ---------------------
npm notice Run npm install -g npm@9.1.2 to update!
----------------------------------------------------
npm notice
sudo npm install -g npm@9.1.2

다 했으면 버전을 확인해보자.

pm2 -version

이렇게 뜨면 성공적으로 설치된 것이다.

이제 PM2를 실행시키자.
사실 아직 우리는 EC2 인스턴스에 프로젝트를 넣지 않았으므로 아무 일도 일어나지 않을 것이지만, 나는 미리 실행시켜놓았다.

npm을 사용한다면 다음과 같이 입력한다.

루트 권한으로 npx에서 pm2를 start 할 것이고, pm2를 통해 npm의 start 명령어를 실행할 것이라는 의미.

sudo npx pm2 start npm -- start

yarn을 사용한다면 다음과 같이 입력한다.
yarn을 사용할 때 주의할 점은 --interpreter bash를 꼭 붙여야 한다는 것.
왜냐하면 yarn은 bash shell 명령어이기 때문에 interpreter bash를 꼭 설정해줘야한다고 한다.
나는 이걸 몰라서 한참을 고생했었다.

참고자료

sudo npx pm2 start yarn --interpreter bash -- start

그렇게 실행시키면 다음과 같이 뜰 것이다.

이제 PM2까지 잘 돌아가고 있다. EC2 인스턴스에 프로젝트를 넣고나서 PM2를 새로고침하면 npm 또는 yarn으로 생성된 우리 패키지의 start 명령어가 실행될 것이고, 백그라운드 모드에서 돌아가게 될 것이다.

10. Github Actions 설정

Github Actions를 세팅하기 위해 우리 프로젝트에 명령어 파일을 생성해야 한다.

10-1. deploy.yml 생성

다음과 같이 최상위 디렉토리에 .github > workflows > deploy.yml 순서로 만들자.

그리고나서 deploy.yml 파일을 다음과 같이 작성한다.
master 브랜치에 push가 발생하면 Github Actions가 이를 감지하고 동작을 시작한다.
1. 의존성 파일 설치.
2. 빌드.
3. S3에 올릴 zip 파일 생성. (빌드한 프로젝트를 압축)
4. S3에 zip 파일 업로드.
5. Code Deploy가 S3에서 파일을 가져온다.

까지 진행된다.

name: Deploy # Workflow 이름.
on: # CICD 이벤트 감지.
  push:
    branches:
      - master # CI/CD를 동작하게 할 브랜치 이름. 즉 master 브랜치에 push가 일어나면 감지하여 다음과 같은 Jobs를 실행한다.
jobs: # CI/CD 세부 동작 (Job) 설정.
  build:
    runs-on: ubuntu-20.04 # Ubuntu 니까 ubuntu 20.04로 설정.
    steps:
      - name: Checkout source code. # 깃허브 레포지토리 체크.
        uses: actions/checkout@v2
      - name: Check Node v # 노드 버전 확인.
        run: node -v
      - name: Install Dependencies # 설치된 의존성 파일 설치.
        run: yarn install --frozen-lockfile
      - name: Build # 빌드.
        run: yarn build
      - name: zip create # S3에 올릴 zip 파일 생성. (빌드한 프로젝트를 압축)
        run: zip -qq -r ./test-build.zip . # 파일명은 자유, 대신 아래 workflow에 적을 파일명과 동일하게 맞춰줄 것.
        shell: bash
      - name: Configure AWS credentials # aws 인증 확인.
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }} # 깃허브 레포지토리 Secrets에 등록한 AWS_ACCESS_KEY.
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # 깃허브 레포지토리 Secrets에 등록한 AWS_SECRET_ACCESS_KEY.
          aws-region: ${{ secrets.AWS_REGION }} # 깃허브 레포지토리 Secrets에 등록한 AWS_REGION.
      - name: Upload to S3 # zip 파일을 S3에 업로드.
        run: | # S3 버킷 이름.
          aws s3 cp --region ap-northeast-2 ./test-build.zip s3://test-s3-highjoon/test-build.zip
      - name: Deploy # S3에 올라간 zip 파일을 CodeDeploy를 통해 가져온다..
        run: aws deploy create-deployment
          --application-name test-codeDeploy # AWS의 Code Deploy 애플리케이션 이름.
          --deployment-config-name CodeDeployDefault.AllAtOnce # Code Deploy에서 설정했던 Deploy 방식.
          --deployment-group-name test-deploy-group # AWS의 Code Deploy 애플리케이션의 배포 그룹 이름.
          --s3-location bucket=test-s3-highjoon,bundleType=zip # Code Deploy가 S3에서 프로젝트를 찾을 수 있도록 경로 지정. (bucket=버킷 이름/test-build.zip)

다 작성했으면 주석은 지워주는 것이 좋을 것 같다.
주석에서 뭔가 잘못 인식되었는지 오류가 생겼던 경험이 몇 번 있었다.

10-2. appspec.yml 생성

Code Deploy가 S3에서 파일을 가져온 다음에 어떻게 할 것인지를 명시해줘야 한다.

다음과 같이 최상위 디렉토리에 appspec.yml 파일을 생성하자. (이름은 꼭 appspec.yml 로 해야한다.)

그리고 다음과 같이 작성하자.

version: 0.0
os: linux # Ubuntu니까 linux로 설정.
files:
  - source: /
    destination: /home/ubuntu/deploy # EC2 인스턴스 안에 프로젝트를 저장할 경로.
    overwrite: yes
permissions: # EC2 인스턴스에 프로젝트를 저장하기 위한 권한 설정.
  - object: /home/ubuntu/deploy # EC2 인스턴스 안에 프로젝트를 저장할 경로.
    owner: root
    group: root
    mode: 755
hooks:
  AfterInstall: # AfterInstall 즉, 배포 완료 후 실행할 동작 설정.
    - location: deploy.sh # deploy.sh를 실행.
      timeout: 1000 # 제한 시간 1000초 으로 설정. 1000초가 넘어가면 실패함.
      runas: root # run as root 즉, root 권한으로 실행.
  1. EC2 인스턴스 내부의 /home/ubuntu/deploy 경로에다 프로젝트를 저장한다.
  2. 저장한 후 deploy.sh 스크립트 파일을 실행한다.

마찬가지로 주석은 어지간하면 지워주자.

10-3. deploy.sh 생성

이제 EC2 인스턴스에 저장한 프로젝트를 실행해야 한다.
마찬가지로 최상위 디렉토리에 deploy.sh 파일을 생성하고 다음과 같이 작성한다.

#!/bin/bash
REPOSITORY=/home/ubuntu/deploy # 배포된 프로젝트 경로.

cd $REPOSITORY # 이 경로로 이동해서 밑에 명령어들을 차례로 실행.

sudo yarn install # 의존성 파일 설치.

sudo npx pm2 reload all # 프로젝트에서 변경된 내용을 반영하기 위해 pm2를 reload.

마찬가지로 주석은 전부 제거하자.

11. 배포

이제 모든 세팅이 끝났고 master 브랜치에 올려보자.
그리고 액션 섹션에 가보면 다음과 같이 우리가 설정했던 작업들이 이뤄질 것이다.

그리고 Code Deploy로 이동해서 보면 마찬가지로 작업이 이뤄질 것이다.

그리고 배포 사이트를 들어가보면 다음과 같이 실행되고 있을 것이다.

만약 PM2가 제대로 안돌아가고 있는 것 같다면
EC2 인스턴스에 SSH 터미널로 접속해서 껐다가 켜보자.

이렇게 reload를 할 수도 있다.

sudo npx pm2 reload all

아니면 아예 꺼버리고 다시 시작할 수도 있다.

sudo npx pm2 kill

sudo npx pm2 start npm -- start
또는
sudo npx pm2 start yarn --interpreter bash -- start

파일을 좀 수정해보고 잘 반영되는지 확인해보자.

이렇게 제목을 수정하고 master 브랜치에 push 했다.

Github Actions가 잘 돌아간다.

Code Deploy도 잘 돌아간다.

잘 수정되었다.

고생하셨습니다 ~

profile
하고싶은건 많은데 시간이 없다!

0개의 댓글