ci/cd , env
CI/CD 파이프라인 구축 과정
AWS : S3 버킷 생성 , CloudFront 생성, IAM 생성
-> GITHUB ACTIONS : 연결 (yml 파일 생성)
AWS
S3
: Simple Storage Service. 파일이 담긴 서버의 역할을 대신하는 서비스. 리액트에서 빌드한 파일을 업로드해서 사용!
Cloudfront
: 정적 또는 동적인 웹사이트 컨텐츠 다양한 데이터를 AWS에서 안전하게 전달 제공하는 CDN (Content Delivery Network) 서비스. 이걸 통해서 SSL* 과 더 빠른 접속속도 (CDN) 를 보장한다. => S3라는 저장소에 올렸다면 이제는 실 사용자들이 우리의 정적인 웹사이트를 사용할 수 있도록 Cloudfront에 배포하는 과정.
*SSL(Secure Sockets Layer) : 웹사이트와 브라우저 사이(또는 두 서버 사이)에 전송되는 데이터를 암호화하여 인터넷 연결을 보호하기 위한 표준 기술. SSL은 TLS(Transport Layer Security)로 발전. SSL/TLS를 사용하는 웹사이트의 URL에는 "HTTP" 대신 "HTTPS"가 있습니다.
배포 생성 (뷰어 프로토콜 정책 : HTTP and HTTPS)> 설정 편집 > 기본값 루트 객체 : index.html
- Origin Server : 원본 데이터를 가지고 있는 서버입니다. 보통 AWS에서의 Origin Server는 S3, Ec2 instance입니다.
- Edge Server = Edge Location : AWS에서 실질적으로 제공하는 전 세계에 퍼져있는 서버입니다. Edge Server에는 요청받은 데이터에 대해서 같은 요청에 대해서 빠르게 응답해주기 위해 Cache 기능을 제공합니다.
1. 클라이언트로부터 Edge Server로의 요청이 발생한다.
2. Edge Server는 요청이 발생한 데이터에 대하여 캐싱 여부를 확인합니다.
3-1. 사용자의 근거리에 위치한 Edge Server 중 캐싱 데이터가 존재한다면 사용자의 요청에 맞는 데이터를 응답합니다
3-2. 사용자의 요청에 적합한 데이터가 캐싱되어 있지 않은 경우 Origin Server로 요청이 포워딩됩니다.
4. 요청받은 데이터에 대해 Origin Server에서 획득한 후 Edge Server에 캐싱 데이터를 생성하고, 클라이언트로 응답이 발생합니다.
IAM(Identity and Access Management)
: AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스. IAM을 사용하여 리소스를 사용하도록 인증(로그인) 및 권한 부여(권한 있음)된 대상을 제어합니다.
IAM 사용자는 계정에서 AWS와 상호 작용하는 데 사용되는 장기 자격 증명을 가진 자격 증명입니다.
GITHUB ACTIONS
1. git repository에서 Actions 클릭2. set up a workflow yourself 클릭
3. main.yml 파일 작성 및 생성
name: 해당 workflow의 명칭. 다른 workflow와 구별될 수 있는 이름을 지어주세요.
on: 어떤 행동이 해당 workflow를 트리거할 수 있는지를 명시하는 부분입니다.
jobs: 가장 중요한 부분으로, 실제 빌드 및 배포 작업이 이뤄지는 부분입니다.
runs-on: 빌드 환경을 선택합니다. 위의 경우 latest 버전을 사용했는데 실제 프로젝트에서 사용할 때는 특정 버전을 사용하는 것이 바람직합니다. (ex ubuntu-18.04)
+ settings > Secrets
workflow 파일을 읽어나가다보면 중간중간 secrets라는 변수가 보일 것입니다.
이는 Github Actions에서 제공하는 암호화된 비밀 정보(secret)를 사용하기 위한 문법
*작성한 yml 파일은 아래에
env
깃허브 액션은 깃허브에 올린 파일로 빌드를 진행하는 건데, 카카오맵 앱키를 사용하느라 index.html을 깃이그노어로 잡아놓고 있었다.
index.html이 안 보이니 오류가 났고, index.html을 올려야 하는 상황.
다행인 건, env 설정을 통해 키값을 가려 올리는 방법이 있었다.
1) yarn add dotenv
2) src폴더 안 (최상위에) .env파일 생성
3) .env 파일에 필요한 데이터를 할당해주면 된다. 단, 무조건 앞에는 REACT_APP_ 를 붙여서 작명!
(예시) REACT_APP_KAKAO_KEY = xxxxx
4) index.html 키값 넣는 부분을 %REACT_APP_KAKAO_KEY% 로 변경 저장.
※ js 파일에서라면, const v = process.env.<env변수명> 로 변수명을 다시 할당해 활용한다.
※ 주의: yarn start를 다시 해야 변경된 걸 확인할 수 있었다.
5) .gitignore 에서 public/index.html은 지우고 .env 추가해서 저장.
6) 커밋/푸쉬!
+문제가 또 있는데,
콘솔에 parser-blocking, cross site (i.e. different eTLD+1) script ... 이라는 오류가 뜨는데, 거기에 키값 다 보임;
(참고)
https://toothsome-air-bb9.notion.site/def79b9661d34a89bbe5cc665d661108
https://yam-cha.tistory.com/174
(참고)
https://sustainable-dev.tistory.com/160
https://puterism.com/deploy-with-s3-and-cloudfront/
https://real-dongsoo7.tistory.com/86
https://velog.io/@hoi/GitLab-CICD%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-AWS-S3-%EB%B0%B0%ED%8F%AC
https://meetup.toast.com/posts/286
https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions
https://www.youtube.com/watch?v=iLqGzEkusIw&t=474s
https://www.youtube.com/watch?v=kS3wD-QhYUs
https://devblog.kakaostyle.com/ko/2020-11-06-1-using-github-actions/
https://coconutstd.github.io/posts/Github-actions/
https://tecoble.techcourse.co.kr/post/2021-09-23-continuous-deployment-with-github-actions/
https://yung-developer.tistory.com/111
https://fe-developers.kakaoent.com/2022/220106-github-actions/
Actions > set up a workflow yourself > main.yml
name: CI
on:
# Triggers the workflow on push events but only for the "main" branch
push:
branches: [ "main" ]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
# 소스를 가져옵니다.
- name: Checkout source code
uses: actions/checkout@main
# 실행 속도를 빠르게 하기 위해 설치된 Node 모듈을 캐시하도록 설정합니다.
- name: Cache node modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{ runner.OS }}-main-build-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.OS }}-build-
${{ runner.OS }}-
- name: Generate Environment Variables File for Production
run: |
echo "REACT_APP_KAKAOMAP_KEY=$REACT_APP_KAKAOMAP_KEY" >> .env
env:
REACT_APP_KAKAOMAP_KEY: ${{ secrets.REACT_APP_KAKAOMAP_KEY }}
# 모듈을 설치합니다.
- name: Install Dependencies
run: yarn install
# 결과물을 만듭니다.
- name: Build
run: CI=false yarn build
# S3에 결과물을 업로드합니다.
- name: Deploy
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
aws s3 cp \
--recursive \
--region ${{ secrets.AWS_REGION }} \
build s3://${{ secrets.BUCKET_NAME }}
# CloudFront에 연결합니다.
- name: Invalidate cache CloudFront
uses: chetan/invalidate-cloudfront-action@master
env:
DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID }}
PATHS: '/*'
continue-on-error: true