Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to React CI/CD with Github Actions, AWS S3 and CloudFront
Similar to React CI/CD with Github Actions, AWS S3 and CloudFront (20)
More from Eunsu Kim
Recently uploaded
Recently uploaded (20)
React CI/CD with Github Actions, AWS S3 and CloudFront
- 5. GithubAction
- 6. GithubAction은? name name: : Continuous Integration Continuous Integration on on: : [ [pull_request pull_request] ] jobs jobs: : build build: : runs-on runs-on: : ubuntu ubuntu- -latest latest steps steps: : - - uses uses: : actions/checkout@v2 actions/checkout@v2 - - name name: : Install dependencies Install dependencies run run: : npm ci npm ci - - name name: : Build webpack Build webpack run run: : npm run build npm run build YAML파일로Github가제공하는서버 상에서CI/CD워크플로우를구축하게 도와주는기능 단순애플리케이션빌드,테스트뿐만아니라 Github의다른기능(브랜치,이슈등)과 연계도가능
- 9. Package.json 여기서만드는애플리케이션은CSR(ClientSideRendering)한다고가정하고, pakcage.json 은다음과 같습니다 { { "name" "name": : "react-ci-cd-tutorial" "react-ci-cd-tutorial", , "version" "version": : "0.1.0" "0.1.0", , "private" "private": : true true, , "scripts" "scripts": : { { "dev" "dev": : "next dev" "next dev", , "build" "build": : "next build && next export" "next build && next export", , "start" "start": : "next start" "next start" } }, , "dependencies" "dependencies": : { { "next" "next": : "^10.0.0" "^10.0.0", , "react" "react": : "17.0.1" "17.0.1", , "react-dom" "react-dom": : "17.0.1" "17.0.1" } } } }
- 11. CI워크플로우 dev브랜치에서 .github/workflows 폴더를만들고그아래에 ci.yaml 파일을작성합니다 name name: : Continuous Integration Continuous Integration on on: : [ [pull_request pull_request] ] jobs jobs: : build build: : runs-on runs-on: : ubuntu ubuntu- -latest latest steps steps: : - - uses uses: : actions/checkout@v2 actions/checkout@v2 - - name name: : Install dependencies Install dependencies run run: : npm ci npm ci - - name name: : Build webpack Build webpack run run: : npm run build npm run build
- 28. 정적웹사이트호스팅할S3버킷생성-실습 Policy섹션에아래스크립트입력 { { "Version" "Version": : "2012-10-17" "2012-10-17", , "Statement" "Statement": : [ [ { { "Sid" "Sid": : "PublicRead" "PublicRead", , "Effect" "Effect": : "Allow" "Allow", , "Principal" "Principal": : "*" "*", , "Action" "Action": : [ ["s3:GetObject" "s3:GetObject", , "s3:GetObjectVersion" "s3:GetObjectVersion"] ], , "Resource" "Resource": : "arn:aws:s3:::버킷이름/*" "arn:aws:s3:::버킷이름/*" } } ] ] } }
- 29. CD워크플로우에서의AWSCLI설정 .github/workflows 폴더아래에 cd.yaml 파일을작성하기전준비해야할것 CD워크플로우에는빌드한React앱을S3버킷에업로드하는과정이포함되는데,S3에접근 가능하다는자격증명이필요 AWSIAM(Identity&AccessManagement)으로워크플로우용User를생성해서사용
- 40. CD워크플로우 .github/workflows 폴더아래에 cd.yaml 파일을작성해봅시다 name name: : Continuous Deployment Continuous Deployment on on: : push push: : branches branches: : - - main main jobs jobs: : build build: : runs-on runs-on: : ubuntu ubuntu- -latest latest steps steps: : # ...ci.yaml 과 동일한 step # ...ci.yaml 과 동일한 step - - uses uses: : actions/upload actions/upload- -artifact@v2 artifact@v2 with with: : name name: : built built- -artifact artifact path path: : out/ out/ deploy deploy: : needs needs: : build build runs-on runs-on: : ubuntu ubuntu- -latest latest steps steps: : - - uses uses: : actions/download actions/download- -artifact@v2 artifact@v2 with with: : name name: : built built- -artifact artifact - - uses uses: : aws aws- -actions/configure actions/configure- -aws aws- -credentials@v1 credentials@v1 with with: :
- 41. CD워크플로우-실습 main <- dev PR을merge한뒤Action이실행되는지확인해봅시다 PR을머지한모습
- 66. CD워크플로우수정 .github/workflows/cd.yaml 의 deploy 잡의맨마지막으로다음과같은step을추가합니다 여기서는GithubSecret에cloudfrontdistribution아이디를AWS_CLOUDFRONT_DISTRIBUTION_ID란이름으로추가했습니다 name name: : Continuous Deployment Continuous Deployment on on: : push push: : branches branches: : - - main main jobs jobs: : build build: : # ... # ... deploy deploy: : # ... # ... - - name name: : Invalidate CloudFront Cache Invalidate CloudFront Cache run run: : aws cloudfront create aws cloudfront create- -invalidation invalidation - -- -distribution distribution- -id $ id ${ {{ { secrets.AWS_CLOUDFRON secrets.AWS_CLOUDFRON
- 73. 부록(Tips)
- 75. 웹애플리케이션캐시 Webpack과같은모듈번들러를활용하여CSS,JS,Assets에유니크한해시를부여(ex.app- 67ce7f3483.css) CS,JS,Assets에대해선 Cache-Control 헤더를 public, max-age=31536000 으로설정 위파일들을포함하는HTML파일에대해선 Cache-Control 헤더를 no-cache 로설정 참고:https://medium.com/pixelpoint/best-practices-for-cache-control-settings-for-your- website-ff262b38c5a2
- 79. Q&A