Netlify 빌드 스크립트 생성하기

Netlify를 사용해 React.js 애플리케이션 배포를 자동화하려면 빌드 스크립트를 설정해야 합니다. 이전 장에서 REACT_APP_STAGE 빌드 환경 변수를 사용하도록 앱을 구성했던 것을 기억할 것입니다. 이제 Netlify가 다양한 배포 상황에서 이 변수를 설정하도록 빌드 스크립트를 만들겠습니다.

Netlify 빌드 스크립트 추가

Change indicator 먼저 프로젝트 루트에 netlify.toml 파일을 생성하고 다음 내용을 추가합니다.

# 사이트 전체에 적용되는 전역 설정.
# "base"는 빌드를 시작하기 전에 변경할 디렉토리,
# "publish"는 배포할 디렉토리(레포지토리 루트 기준),
# "command"는 빌드 명령어입니다.

[build]
  base    = ""
  publish = "build"
  command = "REACT_APP_STAGE=dev npm run build"

# 프로덕션 컨텍스트: 메인 브랜치에 배포될 때
# 이 설정을 상속받습니다.
[context.production]
  command = "REACT_APP_STAGE=prod npm run build"

# 배포 미리보기 컨텍스트: 모든 배포 미리보기는
# 이 설정을 상속받습니다.
[context.deploy-preview]
  command = "REACT_APP_STAGE=dev npm run build"

# 브랜치 배포 컨텍스트: 배포 미리보기가 활성화되지 않은
# 모든 배포는 이 설정을 상속받습니다.
[context.branch-deploy]
  command = "REACT_APP_STAGE=dev npm run build"

빌드 스크립트는 컨텍스트를 기반으로 구성됩니다. 맨 위에 기본 설정이 있고, 세 가지 부분으로 나뉩니다:

base는 Netlify가 빌드 명령어를 실행할 디렉토리입니다. 여기서는 프로젝트 루트에서 실행하므로 비워둡니다.
publish 옵션은 빌드 결과물이 생성될 위치를 가리킵니다. Create React App의 경우 프로젝트 루트의 build 디렉토리입니다.
command 옵션은 Netlify가 사용할 빌드 명령어입니다. Create React App에서 환경 관리하기 챕터를 떠올려보면 익숙할 것입니다. 기본 컨텍스트에서 명령어는 REACT_APP_STAGE=dev npm run build입니다.

context.production으로 표시된 프로덕션 컨텍스트는 REACT_APP_STAGE 변수를 prod로 설정하는 유일한 경우입니다. 이는 master 브랜치에 푸시할 때 적용됩니다. branch-deploy는 프로덕션이 아닌 다른 브랜치에 푸시할 때 사용됩니다. deploy-preview는 풀 리퀘스트를 위한 설정입니다.

변경 사항을 Git에 커밋하고 푸시하면 Netlify가 빌드 스크립트를 인식하는 것을 확인할 수 있습니다.

Netlify 빌드 스크립트 생성하기

Netlify 빌드 스크립트 추가

SST Guide