react aws와 github Action을 이용하여 배포

Github Action을 통해 AWS로 앱 자동배포

1. AWS EC2(BE)
2. AWS S3, Github Page(FE)
3. AWS EC2 + 도커 컨테이너(BE, FE)
4. Heroku(FE,BE)…

자동 CI/CD를 하면 새로운 버전이 push 되었을 때 자동으로 배포된다.

1. github에 코드 배포
2. workflow 생성
   • github 페이지에 action - node.js 를 클릭
   • 해당 파일에 workflow를 작성한다.

    name: Node.js CI
       
    // main branch에 푸시되었을 때jobs에 있는것을 실행하게 된다.
    on:
      push:
        branches: [ "main" ]
      pull_request:
        branches: [ "main" ]
       
    jobs:
      build:
       
        runs-on: ubuntu-latest
       
        strategy:
    			// 해당 노드 버전에서 steops가 실행
          matrix:
            node-version: [16.x]
            # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
       
        steps:
        - uses: actions/checkout@v3
        - name: Use Node.js $
          uses: actions/setup-node@v3
          with:
            node-version: $
            cache: 'npm'
    		// 빌드 스크립트가 있을 때 실행
        - run: npm ci
        - run: npm run build --if-present
        - run: npm test
   

3. aws 버킷 생성
   • 정적인 웹사이트를 구성하기 위해 버킷을 이용하여 웹사이트 배포
   • 생성한 버킷을 웹사이트 호스팅을 위해 사용할 수 있도록 변경
     • 속성 - 정적웹사이트 호스팅 활성화 - 인덱스 문서 index.html
   • 호스팅에 들어가면 403 Forbidden 이 뜨게된다.
     • 권한 - 퍼블릭 엑세스 차단을 해제한다

     • 버킷 정책

         {
             "Version": "2012-10-17",
             "Statement": [
                 {
                     "Sid": "PublicReadGetObject",
                     "Effect": "Allow",
                     "Principal": "*",
                     "Action": [
                         "s3:GetObject"
                     ],
                     "Resource": [
         								// Bucket 이름을 수정해준다
                         "arn:aws:s3:::Bucket-Name/*"
                     ]
                 }
             ]
         }
       

4. yml 파일 완성

    - uses: awact/s3-action@master
          with:
            args: --acl public-read --follow-symlinks --delete
          env:
            SOURCE_DIR: './public'
            AWS_REGION: 'us-east-1'
    				// bucket 이름
            AWS_S3_BUCKET: $
    				// 아래의 두개를 key를 발급 받아야된다.
            AWS_ACCESS_KEY_ID: $
            AWS_SECRET_ACCESS_KEY: $
       
    이부분을 아래에 넣어준다.
   

   • key 발급 방법 (IAM)
     • 검색창 IAM ⇒ 액세스 관리 - 사용자 - 사용자 추가
     • 사용자 이름, 액세스 키를 부여
     • 권한은 AmazonS3FullAccess 를 부여한다
     • 완료되면 access key와 비밀 access key가 부여된다.
   • setting - sercets - actions
     • New sercet을 눌러 해당 값들을 작성
   • action-workflow-node.js.yml
     • 실패되어있는 빌드를 rerun 해주면 정상적으로 배포 완료