[React] aws EC2 + github action

Gyuhan Park·2023년 2월 28일

react

목록 보기

9/11

github action 왜 씀?

react 프로젝트를 aws에 올려보기도 하고, 도커로도 올려보았다.
근데 수정할 때마다 일일이 배포명령어 치는 거 힘드니까 배포 자동화를 만들자.
github action을 쓰면 원하는 브랜치에 커밋하면 바로 배포할 수 있음.

EC2에 배포하고 싶지만 바로는 안되고 S3 bucket과 codeDeploy를 이용해야 한다.

github action 용어

on : action을 trigger 할 조건
main 브랜치에 push하면 action이 발생한다.

on:
  push:
    branches:
      - main

runs-on: 해당 job을 어떤 OS에서 실행할 것인지 명시한다.

runs-on: ubuntu-latest

steps : job이 가질 수 있는 동작의 나열. 각각의 step은 독립적인 프로세스를 가진다.
name : step의 이름
uses : 해당 step에서 사용할 액션. Github 마켓플레이스에 올라온 action들을 라이브러리처럼 사용할 수 있다.
run : job에 할당된 컴퓨팅 자원의 shell을 이용하여 커맨드 라인을 실행한다.

jobs:
  build:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Set up  node 18
        uses: actions/setup-node@v3
        with:
          node-version: 18
          
      - name: Make zip file
        run: zip -r ./$GITHUB_SHA.zip .

AWS

IAM 역할 생성

aws s3 bucket 생성

S3는 AWS(Amazon Web Service)에서 제공하는 인터넷 스토리지 서비스입니다.
S3(Simple Storage Service) 를 뜻합니다.
Github Action으로 빌드된 결과물을 S3에 올려놓을 것이다.

그러면 EC2 인스턴스에 있는 CodeDeploy가

S3에 저장된 빌드 결과물을 가져와 인스턴스에 배포를 한다.

그러므로 우리는 빌드된 결과물을 저장하는 공간으로 S3 서비스를 사용할 예정이다.

IAM user 생성

권한 : AmazonS3FullAccess, AWSCodeDeployFullAccess

code deploy 설정

IAM > 역할 > CodeDeploy > 역할 생성

생성 확인

codeDeploy > 애플리케이션 생성

애플리케이션 > 배포그룹 생성
서비스 역할에 방금 생성한 codeDeploy 역할을 선택한다.
환경구성에서 EC2 인스턴스에 태그를 설정하고 codeDeploy와 연결한다.

# .github/workflows/deploy.yaml
name: CI-CD

on:
  push:
    branches:
      - main

env:
  S3_BUCKET_NAME: toyou-bucket
  CODE_DEPLOY_APPLICATION_NAME: toyou-code-deploy
  CODE_DEPLOY_DEPLOYMENT_GROUP_NAME: toyou-front

jobs:
  build:
    runs-on: ubuntu-latest

    permissions:
      id-token: write
      contents: read

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Set up  node 18
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Make zip file
        run: zip -r ./$GITHUB_SHA.zip .
        shell: bash

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: Upload to S3
        run: aws s3 cp --region ap-northeast-2 ./$GITHUB_SHA.zip s3://$S3_BUCKET_NAME/$GITHUB_SHA.zip

      - name: Code Deploy
        run: |
          aws deploy create-deployment \
          --deployment-config-name CodeDeployDefault.AllAtOnce \
          --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
          --deployment-group-name ${{ env.CODE_DEPLOY_DEPLOYMENT_GROUP_NAME }} \
          --s3-location bucket=$S3_BUCKET_NAME,bundleType=zip,key=$GITHUB_SHA.zip

appspec.yml

S3에 저장된 빌드 결과물을 CodeDeploy가 인스턴스에 배포하기 위해 사용
루트 디렉토리에 위치

# appspec.yml
version: 0.0
os: linux
files:
  - source: /
    destination: /home/ubuntu/react
    overwrite: yes
file_exists_behavior: OVERWRITE

permissions:
  - object: /
    pattern: "**"
    owner: ubuntu
    group: ubuntu

인스턴스 용량 키우기

인스턴스 스토리지 > 볼륨 수정

$ lsblk # 용량 확인
$ sudo growpart /dev/xvda 1 # 파티션을 전체 용량으로 확장
$ sudo resize2fs /dev/xvda1 # 파일시스템 재할당
$ df -h # 확인

codeDeploy agent 설치

$ sudo apt update
$ sudo apt install ruby-full
$ sudo apt install wget
$ cd ~ 
$ wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install
$ chmod +x ./install
$ sudo ./install auto
$ sudo service codedeploy-agent status

오류

난 이 에러 때문에 맥북을 부실 뻔 했지만 에러메세지를 잘 읽어보면 은근 친절하다(?)

터미널에서 아래 명령어를 치면 에러메세지가 나온다.
배포가 안되는 경우 codedeploy agent 로그에서 다 찾을 수 있다.

$ cat /var/log/aws/codedeploy-agent/codedeploy-agent.log

unhandleRejection: Error

docker build를 하면 sass 모듈을 찾을 수 없다고 뜨는데 nextjs 버전을 바꿔봤지만 안됐고 node 버전을 14.17 -> 18 로 업그레이드해서 해결했다.

unhandledRejection: Error: Cannot find module '~\sass-loader/fibers.js'

ssh: no key found

pem값을 복사해서 secret key로 등록했는데 왜 안되지? 했다. 알고보니 맨위에----BEGIN RSA PRIVATE KEY-----이거랑 맨아래-----END RSA PRIVATE KEY----- 도 key에 포함시켜야 되네? ㅎㅎ

ssh.ParsePrivateKey: ssh: no key found

노드 버전 업그레이드

그냥 nvm으로 설치하기만 하면 연결이 꼬일 수도 있어서 아예 삭제해주고 설치하는 게 좋다고 한다.

# node가 어디에 설치되어있는지 확인
whereis node

# node 관련 모든 경로 삭제
rm -rf /usr/bin/node
rm -rf /usr/include/node
rm -rf /usr/local/bin/node
rm -rf /usr/local/include/node # legacy-node 인듯
rm -rf /usr/share/man/man1/node*
rm -rf /usr/local/lib/node_modules/
rm -rf /usr/local/bin/npm
rm -rf ~/.npm
rm -rf ~/.node-gyp

# node 설치
nvm install [설치할 버전]

# 설치 확인
node -v
npm -v

# node_modules, package-lock.json 지우고 의존성 재설치
npm cache clean -f
rm package-lock.json
rm -r node_modules
npm install

결과

진짜 감격...아 진짜 CI/CD 처음해보는데 이틀동안 이거만 한 것 같음...
초록색보니까 기분이 너무 좋다....
그래서 이제 도커는 어캐 돌리는 건데?

docker + github actions

github action으로 aws에 docker를 올리고 싶어서 진짜 며칠동안 고생했다.
결론은 오류 하나때문에 벽에 막혔다. 인터넷에도 많이 올라오는 문젠데 라이브러리 문제인지 내 컴퓨터 문제인지 명확한 해결방법이 없었다.

    - name: Docker build & push to docker hub
      run: |
          docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
          docker build --platform linux/amd64 -t ${{ secrets.DOCKER_USERNAME }}/shopping-image -f ./DockerFile .
          docker push ${{ secrets.DOCKER_USERNAME }}/shoping-image
          
      # 서버에서 Docker 이미지 실행
      - name: EC2 Docker Run
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.AWS_PUBLIC_IP }}
          username: ubuntu
          key: ${{ secrets.SSH_KEY }}
          script: |
            sudo docker rm -f shopping-container # 컨테이너 삭제
            sudo docker rmi ${{ secrets.DOCKER_USERNAME }}/shopiing-image # 이미지 삭제
            sudo docker pull ${{ secrets.DOCKER_USERNAME }}/shopping-image
            sudo docker run -d -p 3307:3000 --name shopping-container ${{ secrets.DOCKER_USERNAME }}/shopping-image