Skip to content

[FE] 프론트엔드 배포

Jump to bottom
2yunseong edited this page Nov 16, 2023 · 3 revisions

개요

이 페이지는 스탬프크러쉬팀의 프론트엔드 배포 과정에 대해 설명합니다.

EC2 인스턴스 내에서

현재 팀 내의 인스턴스는 우아한테크코스 aws에서 개인 aws로 이관한 상태입니다.

따라서 기존에 Jenkins를 사용해 CD를 진행해 왔지만, 누락된 상황입니다. 따라서 현재 이 글에서는 수동으로 빌드하고 배포하는 과정을 서술합니다.

대략적인 배포 플로우는 다음과 같습니다. 매우 간단합니다.

  1. 프로젝트 빌드
  2. 빌드파일 nginx 공유 디렉토리로 이동

하지만 배포 문서를 참고하는 시점은 초기에 참고하는 경우가 빈번하므로 초기 인스턴스에서 해야할 일부터 서술하도록 하겠습니다.

1. node 설치

node를 설치합니다. node를 설치하는 과정은 다양한데, 공식문서에 기반해 설치를 하는 방법을 추천합니다.

node가 잘 설치되었는지 확인합니다.

node -v
npm -v

주의사항

  • 스탬프크러쉬에서 사용하는 노드의 버전은 18이상입니다. 가급적 최신버전(v20.9.0)을 설치하시기를 권장합니다.
  • 인스턴스 내에서 다른 노드 버전을 사용해야한다면 nvm을 설치해주세요.

2. 저장소 가져오기 및 세팅

이 위키가 있는 저장소를 클론해옵니다. 현재 위치는 홈 디렉토리라고 가정합니다.

git clone <스탬프크러쉬 원본 remote 주소>

저장소를 가져온 이후에는 frontend 디렉토리로 이동합니다.

cd 2023-stamp-crush/frontend

저장소가 기존에 있는 상황이라면, 브랜치의 최신 내용을 바라보게 업데이트 해줍니다.

git pull <원본 remote 주소의 별칭> <배포하려는 브랜치>

node_modules를 설치합니다.

npm install

3. 빌드 및 배포

npm 설치가 완료되었으면 빌드를 실행합니다.

# 작업 위치: ~/2023-stamp-crush/frontend
npm run build

빌드가 완료 되었으면 frontend 디렉토리에 dist가 생성됩니다. 이 디렉토리가 빌드된 내용물이 있는 파일입니다.

이 파일을 서빙해주기 위해 nginx를 사용합니다. 먼저, nginx 설정을 프로젝트에 맞게 설정해줍니다.

vi /etc/nginx/sites-enabled/default 
... 
	location / {
		gzip_static on;
		root /usr/share/nginx/dist;
		index index.html index.htm;
		try_files $uri $uri/ $uri /index.html;
	}

이 파일의 설정에 맞게 빌드 파일을 옮긴다면, nginx 설정의 root 디렉토리로 옮겨야합니다. 따라서 cp 명령어로 빌드된 파일을 옮겨줍니다.(mv를 써도 무방합니다.)

# 작업 위치: ~/2023-stamp-crush/frontend
sudo cp dist/ /usr/share/nginx

nginx를 재시작 해줍니다.

sudo systemctl restart nginx.service

주의사항

  • nginx 설정은 상황에 따라 변경해서 사용할 수 있으므로 이 항목에서 설명한 내용은 프로젝트별로 상이할 수 있습니다.

S3 + CloudFront 로 배포

S3 버킷 생성

먼저, S3를 생성합니다. 버킷을 사용할 지역에 맞게 지역을 설정해줍니다.

image

객체 소유권과 퍼블릭 엑세스 차단 설정을 진행합니다. 계정과 팀 권한에 맞게 설정합니다. 스탬프 크러쉬는 기본 설정을 따릅니다. image

CloudFront 생성

AWS CloudFront에 접속해 "배포 생성"을 클릭하고 새로운 CloudFront를 생성합니다.

배포 생성

  • 원본 도메인 : S3 버킷을 선택합니다.
  • 원본 경로 : S3내에 index.html의 위치를 표시합니다.
  • 이름 : CloudFront의 이름을 설정합니다.
  • 사용자 정의 헤더 추가 - 선택 사항: 정책에 따라 추가하나 현재는 필요없습니다.
  • Origin Shield 활성화: 비용절감을 위해 "아니오"를 선택합니다.

추가설정

  • 자동으로 객체 압축 : Yes. 항상 압축해 보냅니다. 네트워크 비용을 절감할 수 있습니다.
  • 뷰어 프로토콜 정책 : Redirect HTTP to HTTPS. http 요청을 https 로 잇습니다.
  • 허용된 HTTP 방법, 뷰어 액세스 제한: 정책에 따라 추가하나 현재는 필요없습니다.

캐시 키 및 원본 설정

  • aws에서 추천하는 방식 혹은 팀 정책에 따라 설정합니다.

나머지 설정

  • 팀의 aws 비용과... 정책에 맞게 설정합니다. (아니면 기본)

S3 정책 설정

CloudFront에서 S3 버킷 내 객체를 접근하게 하려면 S3의 정책을 설정해주어야 합니다. CloudFront에서만 S3 버킷 내 객체를 접근하게 하려면 s3:GetObject속성에 cloudFront의 arn을 넣어줍니다.

{
    "Version": "2xxx-xx-xx",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3_bucket_name/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": [
                        "arn:aws:cloudfront::123456789012:distribution/ABCD1234ABCDE",
                        "arn:aws:cloudfront::123456789012:distribution/ABCD1234ABCDE"
                    ]
                }
            }
        }
    ]
}

CloudFront 사용자 정의 오류 응답 형식 제작

리액트는 CRA이므로 주소창에 경로를 입력하면 index.html을 주어야 합니다. S3 같은경우 객체접근에 실패한다면 403 Forbidden을 반환하므로, S3에서 찾을 수 없는 경로(리액트 라우터 내의 경로)로 접근할 때 403 대신 index.html과 200 OK를 반환할 수 있도록 해줍니다.

image

S3에 빌드파일 업로드

S3에 빌드 파일을 업로드합니다. CloudFront에 작성한 원본경로에 맞게 파일을 세팅해주세요.

참고사항

  • 현재 S3 + CloudFront 이관 준비중입니다. 따라서 이 문서는 deprecated 될 수 있습니다.
스크린샷 2023-07-12 오후 7 15 19
Clone this wiki locally