[Frontend][Deploy] Netlify로 프론트엔드 배포하기

Github의 저장소와 연동하는 방법을 기준으로 설명합니다.

 

Github와 연동하여 배포하면 미리 빌드하지 않아도 Netilfy에서 자동으로 빌드 후 배포를 진행합니다.

 

또한, Guithub의 저장소를 새로 갱신할 때마다 자동으로 재배포가 이루어집니다.

주의

 배포한 클라이언트 https://[프로젝트 이름].netlify.app에서 라우팅('/main', '/user'등 하위 경로 접속) 할 때는 Netlify가 정적 파일을 찾습니다. 하지만 /main/index.html 같은 실제 파일은 정적 파일이 아니어서 찾을 수 없습니다. 그래서 클라이언트는 404 “Page not found”를 띄우게 됩니다.

 이를 위해 Netlify가 모든 경로 요청을 index.html로 리다이렉트하도록 설정해야 라우터가 정상 동작합니다. public 폴더 안에 '_redirects'(확장자 없이) 파일을 만들어 다음과 같이 작성합니다.

/*    /index.html   200

처음 배포하기

Project 탭에서 Add new project > Import an existing project로 들어갑니다.

1. Connect to Git provider

여기서는 Github를 선택합니다. 만약 다른 서비스에 저장소가 있다면 해당 서비스를 선택합니다.

2. Select repository

Github와 연동이 되었다면 아래와 같이 Github에 있는 자신의 저장소들을 볼 수 있습니다.

배포할 저장소를 선택합니다.

3. Configure project and deploy

Team |  기본값이 미리 설정되어 있습니다.

Project name |  도메인 이름이 될 프로젝트 이름을 설정합니다. 소문자만 가능하며, 중복되면 생성할 수 없습니다.

Branch |  저장소 중에서도 어떤 브랜치의 버전을 배포할 것인지 선택합니다.

Base directory |  프로젝트의 root가 될 경로를 선택합니다. 만약 프론트엔드 코드가 client/ 같은 폴더 안에 있을 때는 client 등으로 작성하면 됩니다.

Build command |  프로젝트를 빌드하는 명령어입니다.

Publish directory |  빌드할 때 빌드 파일이 생성되는 경로입니다.

Environment variables |  환경 변수를 설정할 수 있습니다.

클라이언트나 서버의 주소, 또는 외부 API 주소를 환경변수로 설정하면 편리합니다.

이 단계에서 별도로 설정하지 않아도 이후에 수정할 수 있으니 그냥 넘어가도 무방합니다.

설정을 모두 끝내면 바로 배포되지 않고 아래와 같이 잠깐 기다려야 합니다.

성공적으로 배포가 완료되었다면 아래와 같이 변합니다.

배포 이후 설정

1. 도메인 변경하기

기본 url이 [프로젝트 이름].netlify.app으로 설정되었지만, 이것도 사용자가 바꿀 수 있습니다.

다만, 공식적으로 사용하는 도메인이다보니 유료 결제가 필요하긴 합니다.

 

우선 대시보드 메인에 나오는 배너에서 2단계 Buy a new domain 링크로 들어갑니다.

혹은 왼쪽 탭에서 Domain managment > Production domains > Add a domain > Buy a new domain으로 들어갈 수도 있습니다.

그 다음 이런 식으로 원하는 키워드를 입력해 검색하면 현재 구매 가능한 도메인들을 볼 수 있습니다.

2. 환경변수 설정하기

왼쪽 탭에서 Project configuration > Environment variables > Add a variable로 추가할 수 있습니다.

Key 부분에 환경변수의 이름을 적고, Value 부분에는 그 값을 입력하면 됩니다.

Create variable로 생성했으면 아래와 같이 환경 변수와 그 값(눈 아이콘을 토글하여 확인)을 볼 수 있습니다.