cloudfront, github action 설정 및 세팅

Git

cloudfront, github action 설정 및 세팅

카엔입니다 2022. 4. 25. 22:35

react-typescript

npx create-react-app 프로젝트이름 --template typescript

recoil

yarn add recoil

env-cmd

npm i env-cmd

깃헙 액션 및 클라우드 프론트 설정

깃헙 액션깃헙 액션에 코어 개념
- workflow
  - 하나 이상의 job으로 구성되고 event에 의해 예약 및 실행될 수 있는 자동화된 절차
  - yaml 확장자로 작성되고 이 파일을 기반으로 github action을 실행시킴
- event
  - workflow를 실행하는 특정 활동이나 규칙
- job
  - step들로 구성되고 단일 가상 환경에서 실행됨(?)
  - 다른 job과 의존 관계를 가지거나 병렬적으로 실행될 수 있음
- step
  - job 안에서 순차적으로 실행되는 프로세스 단위
  - 명령을 내리거나 action을 실행할 수 있음
- action
  - job을 구성하기 위한 step들의 조합으로 이루어진 독립적인 명령
  - 가장 작은 빌드 단위
- runner
  - github action runner 어플리케이션이 설치된 머신
  - workflow가 실행될 인스턴스
깃헙 액션 생성은 다음과 같음
- yaml 예시
설정들은 다음과 같음
- name
  - workflow 이름
  - name: 중복되지 않는 workflow명
- on
  - 실행할 이벤트를 작성
  - push
    - push되는 시점마다 job이 실행됨
```
on: 
	push:
		branches: [master, dev]
```
  - workflow_dispatch
    - 워크플로우를 버튼을 통해 수동으로 실행할 수 있도록 이벤트를 관리할 수 있게함
- jobs
  - runs-on
    - 해당 job이 어떤 OS에서 동작할 것인지
  - steps job이 가질 수 있는 동작들, 각각 독립적인 프로세스를 가짐
    - uses 해당 step에서 사용할 액션 {owner}/{repo}@{ref|version} 의 형태를 가짐
    - name step의 이름
    - run job에 할당된 shell을 이용해 커맨드 라인을 실행, npm package의 scripts를 구동할 수 있음
    - if: always() 이전 단계가 실패하더라도 계속 실행되도록 설정
  - env
    - 해당 job에서 사용할 환경변수를 key/value 값으로 저장
  - strategy
    - 다양한 환경에서 테스트, 배포를 위한 빌드 matrix 구성
      - matrix build를 통해 여러 환경으로 동시에 빌드 가능
```
matrix:
	os: [ubuntu-latest, macos-latest]
	node-version: [14.x]
```
    - 다양한 노드 버전에서 같은 job을 실행 가능
  - with
    - 해당 action에 의해 정의되는 input 파라미터(?)
    - key/value 구조로 되어있음
    - 환경 변수로 설정됨
    - INPUT_ 라는 prefix가 붙음
  - job_id
```
jobs:
	job_id:
		name: pear
```
  - jobs.<job_id>.name
  - timeout-minutes
    - timeout-minutes: 10 처럼 지정하면 10분이 넘어가면 종료시켜버림
루트 디렉토리에 .github/workflows 안에 파일명.yaml으로 파일을 생성
github에서 공식적으로 제공하는 CI/CD 툴
CloudFrontCDN을 통해 웹페이지를 불러오는 사용자가 어디에 있는지에 따라 근처 Edge location이 컨텐츠를 보내주는 방식에 네트워크임
- edge location
  - 컨텐츠들이 캐시에 보관되어있는 장소
  - 전세계 지역마다 설치되어 있어 사용자가 이미 접속했던 페이지에 들어간다면 캐시를 내려줘서 더 효율적이고 빠르게 정보를 전달받게된다
S3 access 정책변경
```
{
    "Version": "2012-10-17",
    "Id": "Policy1609228714229",
    "Statement": [
        {
            "Sid": "Stmt1609228699054",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::프로젝트이름/*"
        }
    ]
}
```
or배포 생성
1. cloudfront 배포생성 추가
2. S3 버킷 이름의 도메인으로 원본 도메인 선택
3. S3 버킷 액세스 항목에서 OAI 사용에 체크 후 새 OAI 생성
  1. 이름은 기본값
  2. 정책 예, 버킷 정책 업데이트 선택
4. Origin Shiled 활성화 후 가까운 리전 선택
5. 자동 객체 압축 yes
6. 정적 배포시 허용된 HTTP는 GET, HEAD로 설정
7. 캐시 키 및 원본 요청은 CachingOptimized 선택
8. 가격 분류 설정은 모든 엣지 로케이션이 제일 좋으나 비용이 비싸므로 적절한 항목 사용
9. 대체 도메인 이름 - 커스텀 도메인 설정시 대체 도메인 이름 입력
10. 사용자 정의 SSL 인증서 - 도메인에 맞는 인증서 생성하고 선택
11. 기본값 루트 객체에 인덱스 페이지 파일명 입력
12. 기타 설정은 기본으로 두고 배포생성 클릭
13. 생성 완료
특이사항
- SPA를 배포해야한다면 Fallback Redirect 설정해줘야함
- HTTP 오류 코드 403으로 설정
  - 오류 페이지 ⇒ 사용자 정의 오류 응답 생성
  - HTTP 오류 코드 ⇒ ‘403’
  - 오류 응답 사용자 정의 ⇒ 예
  - 응답 페이지 경로 ⇒ ‘/index.html’
  - HTTP 응답 코드 ⇒ ‘200’
- 무효화 생성하면 캐시를 바로 무효화하고 새로 캐싱 진행할 수 있음
github actions이 s3에 접근할 수 있도록 설정, 버킷 정책 탭에서 아래 코드 입력
정적, 동적인 실시간 웹콘텐츠를 유저들에게 효율적으로 전달

{
	Version: "2012-10-17",
	Statement: [
		{
			Sid: "AccessToGetBucketLocation",
			Effect: "Allow",
			Action: ["s3:GetBucketLocation"],
			Resource: ["arn:aws:s3:::*"],
		},
		{
			Sid: "AccessToWebsiteBuckets",
			Effect: "Allow",
			Action: [
				"s3:PutBucketWebsite",
				"s3:PutObject",
				"s3:PutObjectAcl",
				"s3:GetObject",
				"s3:ListBucket",
				"s3:DeleteObject",
			],
			Resource: [
				"arn:aws:s3:::yourdomain.com",
				"arn:aws:s3:::yourdomain.com/*",
			],
		},
		{
			Sid: "AccessToCloudfront",
			Effect: "Allow",
			Action: ["cloudfront:GetInvalidation", "cloudfront:CreateInvalidation"],
			Resource: "*",
		},
	],
};

IAM 사용자 추가

루트 사용자가 아닌 일부 권한 부여 가능한 다른 계정 생성

계정명 클릭 후 내 보안 자격 증명 클릭, 리전은 한국으로
액세스 관리 ⇒ 사용자탭에서 사용자 추가 클릭
사용자 추가 폼
1. 사용자 이름 - 신규로 생성하고자 하는 이름 작성
2. AWS 액세스 유형 선택 - aws 관리 콘솔 액세스 클릭
3. 자동 생성된 비밀번호 클릭
4. 사용자가 다음에 로그인할 때 새 비밀번호 생성 요청 클릭
권한 설정에서는 그룹을 생성할 수 있음
1. 그룹에 권한을 설정하게 되면 각 사용자별로 권한을 넣지 않고 그룹별로 권한을 나누어 사용자를 그룹에 넣어줌
생성된 그룹 또는 기존에 존재하는 그룹 중 이번에 생성하는 사용자에 매핑할 그룹을 체크한 뒤 다음 클릭
태그 추가는 선택 사항
검토 페이지 확인 후 문제 없으면 사용자 만들기 클릭
사용자 추가가 완료되면 csv 다운로드를 통해 신규 생성한 IAM의 비밀번호 확인 후 계정으로 접근
1. csv 다운로드 필수
csv 사용자 이름과 암호로 작성해서 로그인

env-cmd

환경변수에 따라 실행을 할 수 있는 라이브러리

배포 환경이 개발과 실서버로 구분되어있을때처럼 사용하는 환경변수를 다르게 설정해야할 때 사용된다

env-cmd -f 는 —-file [path]로 env 파일을 지정해주는 역할

// package.json
"scripts": {
    "start": "env-cmd -f .env react-scripts start",
    "dev": "env-cmd -f .env.development react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "deploy": "env-cmd -f .env npm run build && npm run deploy-s3",
},