Github action을 이용한 aws 배포 - 프론트

github action을 이용한 Vanilla js 배포하기 : react나 vue는 자료가 되게 많았지만 바닐라는 생각보다 자료가 없어서 많이 애먹었다. 오히려 React배포가 더 쉬울수도?

AWS S3, Cloudfront X Github Actions

1. AWS I am 에서 새로운 유저 생성 : CloudFrontAccess,AmazonS3FullAccess 권한 추가 > Security credentials 에서 Access keys 생성 > 어딘가에 저장

2. 프론트에서 .github/workflows/main.yml 생성 >

name: main
on:
    push:
        branches:
            - feature/deploy
jobs:
    build:
        runs-on: ubuntu-latest
        env:
            AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
            AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
            AWS_REGION: 'ap-northeast-2'

        steps:
            - name: Checkout source code.
              uses: actions/checkout@master

            - name: Upload binary to S3 Bucket
              env:
                  AWS_S3_BUCKET: ${{ secrets.BUCKET_NAME }}
              uses: jakejarvis/s3-sync-action@master
              with:
                args: --acl public-read

            - name: Invalidate cache CloudFront
              uses: chetan/invalidate-cloudfront-action@master
              env:
                DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID }}
                PATHS: '/index.html'
              continue-on-error: true

입력 ! (vanilla가 아니라면 위의 내용은 바뀐다)

3. github 레포에서 > settings > actions > new repository secret 만들기 :

   AWS_ACCESS_KEY_ID,AWS_SECRET_ACCESS_KEY : 1번내용
   BUCKET_NAME : s3에서 생성한 버켓 이름
   DISTRIBUTION_ID : cf에서 생성한 id

4. aws에서 s3 버켓 생성 :

   1. ACLs enabled
   2. Block all public access 해제

5. 버켓에서 Properties > static website hosting > enabled 변경

6. bucket policy :

{
    "Version": "2012-10-17",
    "Id": "Policy1685614081579",
    "Statement": [
        {
            "Sid": "Stmt1685614080490",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{your bucket}/*"
        }
    ]
}

(기본값인듯?)

7. cloud front에서 distribution 생성

origin domain : 방금 만든 s3 버켓
Origin access : Origin access control settings
Viewer protocol policy : Redirect HTTP to HTTPS
Default root object : /index.html

8. s3 property > Static website hosting > Bucket website endpoint에 해당하는 url로 들어가면 된다~!