Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Github Action, AWS S3, CloudFront를 활용한 React 애플리케이션 CICD 파이프라인 구축
Ähnlich wie Github Action, AWS S3, CloudFront를 활용한 React 애플리케이션 CICD 파이프라인 구축 (20)
Mehr von Eunsu Kim
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Github Action, AWS S3, CloudFront를 활용한 React 애플리케이션 CICD 파이프라인 구축
- 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