[React] aws S3로 배포하고 Github Actions로 CI/CD까지

aws S3로 배포한 후, Github Actions를 활용하여 배포 자동화까지의 과정을 정리해봤다.

S3로 배포하는 방법은 이전에 정리했기 때문에 이번에는 자동화를 하는 과정에서 겪었던 오류에 대해서 정리해보려고 한다. 

 

가장 먼저 aws S3 배포 시, 필요한 내용을 github settings 탭의 secret에 저장한다.

settings 탭에 들어가 Secrets and variables에서의 Actions에 들어가 이미지 우측 상단에 있는 New repository secret을 누르고 키를 입력하면 된다.

 

다음으로 actions 탭에서 yml 파일을 작성했다.

name: React build
on: 
  push:                              
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code.   
        uses: actions/checkout@main

      - name: Cache node modules   
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-
      - name: Install Dependencies   
        run: npm install --force

      - name: Build                 
        run: npm run build

      - name: Deploy                 
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
        run: aws s3 sync ./build s3://[버킷 이름] --profile=[IAM 사용자이름]

 

 

이렇게 저장한 후, build를 했지만 가장 먼저 마주친 오류는

npm ERR! While resolving: @toast-ui/react-editor@3.2.3

@toast-ui의 버전 호환성 문제 때문이었다. toast-ui에서는 react 17버전을 지원하고 있지만 현재 프로젝트는 react 18버전이기 때문에 

npm install --force

로 설치 오류를 해결했다...

npm install --legacy-peer-deps 를 사용할 수도 있지만 force를 사용하는 것이 낫다는 의견이 더 많았기 때문에 force로 설정하였다.

 

 

위처럼 설정한 후, 마주친 오류는 이런 문제....

eslint never used 문제를 해결하기 위해 프로젝트에 eslint를 설정하였다.

{
  "extends": [
    "eslint:recommended", 
    "plugin:react/recommended",
  ]
}

 

그리고 만난 에러....

[eslint] Failed to load config "prettier" to extend from.

 

.eslintrc 파일을 수정해보았다...

{
  "plugins": [
    "prettier"
  ],
  "extends": [
    "eslint:recommended", 
    "plugin:react/recommended",
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

[eslint] Failed to load plugin 'prettier' declared in '.eslintrc': Cannot find module 'eslint-plugin-prettier'

.....

 

.eslintrc 파일을 수정하며 다양한 방법을 여러 번 시도해봤지만 정말 .... 모두 실패했다....

 

그러다가 이런 글을 읽게 되었는데 아래 블로그에서 제시하는 

[에러 일지] toast ui 리액트 버전 충돌

rm -rf node_modules
rm -rf package-lock.json 
npm cache clean --force
npm install --force 
npm install --save-dev prettier --legacy-peer-deps

이런 방법을 시도했는데! 또 실패했다.....

 

그래서 결국은... Toast UI를 CKEditor로 변경하는 방법을 택했다는 결과....😰😰😰

정말.... 힘든 과정이었다....