React 앱 + AWS S3 + Cloud Front + Github Actions CICD 배포 정리

요즘 CI/CD 파이프라인 구축에 맛들렸다..

github actions 에 뜨는 초록불이 얼마나 가슴뛰는지 모르겠다.

또한 이 파이프라인을 구축해두면, 개발만하면 배포는 자동으로 이뤄지니, 생산성도 훨씬 높아진다.

 

이전까지 자동화배포 없이 서비스한 프로젝트가 10개는 족히 넘는거같은데, 지난날을 완전 후회하게 만든다..

더 일찍 공부해볼껄 하는 생각😂

 

서버는 보통 EC2 + LoadBalancing + Auto Scaling 을 조합하고

CSR 웹프론트는 S3 + Cloud Front 를 사용한다.

 

확실히 서버와 분리된다는 점에서 서로간의 의존성을 낮추는 것도 장점이고,

배포도 각각 이루어지고, CSR의 경우는 번들링된 파일만 호스팅하면 되기 때문에 너무 간편하다

간편해도 삽질은 있다..! ^^

정말 간단간단하지만 몇가지 삽질 가능한 포인트들이 있어 정리해보고자 한다. (React 로 설명)

 

1. 앱 build 하기

가장먼저 React 앱을 빌드한다.

2. S3 버킷 생성 및 업로드

build/ 폴더 내에있는 모든 파일을 업로드한다.

최초 1회만 직접 업로드하고, 이후부터는 github actions를 통해 자동화 배포를 한다.

3. S3 버켓 -> 정적 웹 호스팅 설정하기

여기가 삽질 포인트이다.

물론 당연히 따라만 하면되지 않나? 싶지만 난 삽질했다... 미세한 차이들로

인덱스문서, 오류 문서 를 index.html 로 설정 하면 끝

그러면 s3 버켓 주소로 배포가 끝난다.

여기서 파이프라인을 구축할 수 도 있지만, Cloud front 까지 연동한다면

CDN 서비스와 무료 SSL 인증까지 더할 수 있다.

SSL은 필수는 아니지만 필수기 때문에 무조건 S3 와 CloudFront는 한 세트라고 생각해야한다.(별도의 SSL인증서를 사용하지 않는이상)

 

* 여기서 오류문서는 선택사항이라 되어있지만 반드시 index.html로 작성해준다. (SPA의 라우팅포인트는 단하나 index.html 밖에없으니)

 

4. 정책 설정

S3는 기본적으로 외부접속이 차단되어있다.

버킷을 생성할 때도 물론 public 접속허용을 체크했겠지만, 실제로 외부에서 모든사용자들이 접속하려면 정책을 생성해주어야한다.

* 위 사진은 모든 GET요청만을 수락한다는 설정

 

정책을 설정하기 위해서는 편집을 눌러서 작성해주면되는데 양식을 외울 필요는 없다.

정책 예제에서 복붙하거나 생성기로 적절히 생성해주면되는데, 이는 다른 블로그에 정리가 잘되어있다.

나같은 경우에는 정책생성기가 어느순간 오류인지 몰라도 정상적으로 작동하지 않아서, 예제를 복붙해서 Resource부분만 내것에 맞게 수정해주었다.

그냥 모든 S3설정에서는 이정책을 사용한다.

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicRead",
			"Effect": "Allow",
			"Principal": "*",
			"Action": [
				"s3:GetObject",
				"s3:GetObjectVersion"
			],
			"Resource": "자신의 ARN/*"
		}
	]
}

5. Cloud Front 연동

이건 설명할게없다... 그냥 생성해서 S3버킷을 연결해주면 주소가나오는데 그주소를 사용하면끝!

여기서 보통 실제 서비스라면 도메인을 구매해서 Route53에 들어가 DNS를 Cloud Front 로 연결해주면 된다.

 

6. Github Actions 연동을 위한 소유권 편집

이 소유권을 ACL활성으로 변경해주어야, 다른 AWS IAM 계정으로 cli 접속이 가능하다.

* github actions 은 docker 컨테이너에서 cli 로 버킷 파일들을 업로드해주기 때문이다.

 

7. .github/workflows/main.yml

name: S3 deploy with cloud front
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master

jobs:
  run:
    runs-on: ubuntu-latest
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      AWS_DEFAULT_REGION: ${{ secrets.AWS_DEFAULT_REGION }}
    steps:
      - uses: actions/checkout@v1

      - name: Install dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Deploy
        uses: lbertenasco/s3-deploy@v1
        with:
          folder: build
          bucket: ${{ secrets.S3_BUCKET }}
          dist-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
          invalidation: / *

프로젝트 root 경로에서 .github/workflows/main.yml 파일을 생성하고 위와같이 작성한다.

그리고 project 설정에서 secret key들을 작성해주고 master브랜치에 push 나 merge를 하면 버킷에 업로드한다.

 

AWS 환경변구 같은 경우에는 custom하게 하지말고 공식문서에있는 이름을 그대로 사용하기를 권장한다.

nestjs 에서 S3를 사용하려고 완경변수설정하는데, 한참을 삽질했더니, AWS에서는자동으로 지정된 환경변수를 참조하기 때문에 다른 이름으로 설정하면 적용되지 않는다.