ㅇㅇㅈ Blog

프론트엔드 수행중

0%

Amazon-s3 자동 배포

Posted on Edited on In

프로젝트 Amazon으로 배포하기

원티드 세션에서 Amazon으로 서비스를 배포하고, Github Action으로 자동 배포하는거 까지 배운 내용을 정리한다.

Amazon s3 버킷 만들기

aws에서 s3 서비스를 검색하여 새로운 버킷을 만들어 준다.

버킷 이름을 적어주고
AWS리전은 아시아 태평양(서울)ap-northeast-2 로 선택을 해주었다.

다른 옵션은 딱히 건들지 않고,

퍼블릭 액세스 차단 설정을 풀어주지 않으면 웹페이지가 403뜨면서 접속 할 수가 없다.

버킷을 만들기를 하고 나면 리스트에 버킷이 생성 된다.

만든 버킷으로 들어가 속성탭 가장 아래에 정적 웹 사이트 호스팅에서 편집을 해준다.

인덱스 문서에서 index.html을 entry 파일로 지정해준다.

그리고 나서 권한 탭으로 들어가 버킷 정책을 작성 해준다.

1
2
3
4
5
6
7
8
9
10
11
12
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::deploy-test1/*"
    }
  ]
}

Resource 부분에는 "arn:aws:s3:::<자신의 버킷이름>/*" 으로 작성 해줘야한다.

그리고 나서 객체 탭으로 들어가 빌드한 파일들을 올려주기만 하면 된다.

이러면 배포 자체는 끝난다.

aws에서 access key 발급

깃헙 action을 통해 자동배포를 할려면 aws에서 access_key를 발급받아야 한다.
사용자 탭에서 보안자격증명으로 들어가준다.

새 액세스 키를 만들어주면 되는데 주의할 점은 보안 액세스 키는 처음 생성할때만 확인 할 수 있으므로
키 파일을 다운로드 받아놓거나 다른 곳에 잘 적어놔야 한다.. 아니면 삭제하고 다시 만들어야 함!

Github action 으로 자동 배포하기

깃헙 main 브랜치에 push가 되거나 리퀘스트머지를 했을때 설정해둔 action으로 자동 빌드 & 배포를 하게 해준다.

프로젝트에 .github/workflows 안에 deploy.yml 파일을 생성해준다.

deploy.yml안에 작성 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
name: deploy # 해당 workflow의 이름


on: # 언제 이 action 이 실행 되는지
  push: # push를 했을때
    branches: 
      - main # main 브랜치에

jobs: # action 
  deploy: 
    runs-on: ubuntu-latest # action이 실행되는 환경? 
    steps: # step 안에는 shell script를 작성할수도 있고 다른사람이 만들어 놓은 action을 사용 할 수도 있다 

      - uses: actions/checkout@v3 
      # GitHub Actions는 해당 프로젝트를 리눅스 환경에 checkout하고 나서 실행

      - run: rm -rf node_modules && yarn install --frozen-lockfile
      # 노드 모듈을 지우고 나서 새로 설치하라는 터미널 명령
      # npm install로 작성해도 된다.
      - run: yarn run build
      # build

      - name: deploy to s3 bucket
        uses: jakejarvis/s3-sync-action@master # 다른 사람이 만들어 놓은 action을 가져와서 사용 할 수도 있다.
        with:
          args: --delete

        # github에 환경 변수를 저장해 놓고 사용 할 수 있다.
        # aws를 이용해서 배포했으니 aws에 접근할 수 있는 키가 필요하다.
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: "ap-northeast-2"
          SOURCE_DIR: "dist"

깃헙 해당 레포지토리에서 settings 탭에서 secrets actions안에 발급 받은 aws 키값을 작성해주면된다

New repository secret을 누른후 env안에 이름과 동일하게 작성하고 키 값을 안쪽에 작성해주기만 하면 된다.

그리고 나서 main 브랜치에 push가 되거나, request merge가 되면 action이 실행된다.

레포지토리 Actions탭에서 확인 할 수 있다.