[Git] CI/CD 자동화 배포, 리액트 aws S3 에 자동으로 배포하기

 

환경 및 도구

- Window

- VScode

- React

- Aws

 

 

1. aws IAM 권한 추가 

- aws IAM -> 사용자 -> 권한 추가 -> CloudFrontFullAccess, AmazonSeFullAccess 권한 부여하기

 

2. aws_access_key 확인하기

- 윈도우 powershell 에서 본인 aws_acceses_key 확인

- aws configure 명령어로 확인 

- type .\.aws\credentials  명령어로 id, key 전체 확인

- key가 여러개면 aws s3 랑 연결된 키 확인 후 등록

PS C:\Users\admin> aws configure

AWS Access Key ID [****************EYQX]:
AWS Secret Access Key [****************qr9B]:
Default region name [us-west-2]:
Default output format [json]:

PS C:\Users\admin> type .\.aws\credentials

[default]
aws_access_key_id = [ id ] 
aws_secret_access_key = [ key ] 
[local]
aws_access_key_id = [ id ]
aws_secret_access_key = [ key ]
[hyh-user1]
aws_access_key_id = [ id ] 
aws_secret_access_key = [ key ]

 

3. aws s3 랑 연결된 키 확인 

- 내 계정 -> 보안자격증명 -> 액세스 키 ID 확인 

난 default , local , hyh-user1 이렇게 세개가 떴는데 그 중 default 키가 연결되어 있어서 default 키로 선택

 

4. Git 에 repository secrets 키 등록하기

- git repository -> settings -> secrets -> actions -> new repository secret 

참고 

https://daeunnniii.tistory.com/140

 

5. main.yml 파일 생성

.github 폴더 생성 ->  workflows 폴더 생성 -> main.yml 파일 생성

 

main.yml 파일

name: react-CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # Runs a single command using the runners shell
      - name: npm install
        run: npm install

      # Runs a set of commands using the runners shell
      - 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 }}'

        run: >
          aws s3 cp --recursive --region 내지역 build s3://내s3버킷이름

 

6. Git push 하기 

push 후 연결 된 repository 의 Actions 탭을 보면 스스로 build 를 하는 것을 확인 

그리고 Amazon S3 버킷을 확인해보면 내 파일이 자동으로 올라온 것을 확인 할 수 있다

( 버킷이 퍼플릭 엑세스 가능 으로 되어있는지 확인 )

권한 -> 정적 웹 사이트 호스팅 -> 엔드포인트 주소로 접속 

리액트 화면이 잘 뜨면 성공!

 

7. test 하기

- react 내용 수정 ( update2 -> update3 로 변경 )

- git push 

변경 된 것 확인!! 

참고 

https://daeunnniii.tistory.com/140