[AWS] S3 + Github Actions CI/CD ( S3 + Github actions 활용하여 프론트 자동배포 하기 )

S3 버킷 만들기

DNS 연결 목적이라면, 반드시 DNS 이름과 동일하게 버킷 이름 설정 후 생성! ( Route 53 도메인 구입 아래 링크 참조 )

[AWS] S3 + Route 53 DNS ( 도메인 네임 서버 등록하기 )

 

 

생성 후 설정

대시보드 -> 속성 -> 정적 웹 사이트 호스팅 편집

 

인덱스 문서 index.thml 입력 ( 또는, 내가 저장한 메인 html 파일명 )

 

버킷 액세스 정책 설정

대시보드 -> 권한 -> 버킷 정책 편집

≈

 

위 사진처럼 작성 후 생성된 정책을 버킷 정책에 작성

{
    "Version": "2012-10-17",
    "Id": "Policy1642956620793",
    "Statement": [
        {
            "Sid": "Stmt1642956614682",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::firstquarter.link/*"
        }
    ]
}

 

IAM 에서 AWS CLI 권한 생성

IAM 대시보드 -> 사용자 -> 사용자 추가

3, 4번 항목은 Pass~!

반드시 .csv 다운로드 후 접근 권한 키 저장.

생성 시에만 다운로드 & 열람 가능하니 따로 저장 & 외부 노출 금지!

*분실 시 재발급

 

Github 설정

자동 배포할 repository -> settings -> Security-Actions -> 사진과 같이 설정

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY

 

추가 설정

 

WorkFlow 설정

내 프로젝트 루트 디렉토리에서 .gitbug/workflows 폴더 안에 yml 파일 생성 + 스크립트 작성

*예시

name: laboratory
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
        
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2
          mask-aws-account-id: true
      
      - name: npm install
        run: npm install
      
      - 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 sync ./dist s3://firstquarter.link \
          			// 내 DNS 입력

 

끝! 신난다