728x90
반응형
안녕하세요. hr0513입니다!
오늘은 GCP Appengine 배포 방법에 대해 작성하려고 합니다.
1. Google Cloud SDK 설치
# Google Cloude SDK 설치
brew install --cask google-cloud-sdk
# 설치 확인
gcloud --version
# 구글 계정 로그인
gcloud auth login
2. 프로젝트 설정
# 현재 GCP 프로젝트 서렂ㅇ
gcloud config set project <PROJECT_ID>
# 현재 로그인된 계정이 접근 가능한 프로젝트 목록 보기
gcloud project list
PROJECT_ID 는 GCP 콘솔에서 확인 가능합니다.
3. app.yaml 파일 생성
runtime: nodejs20
service: frontend
# 자동 스케일링 지정
automatic_scaling:
max_instances: 5
min_instances: 0
# 환경변수 설정
env_variables:
# 환경 설정
NODE_ENV: 'production'
# 정적 파일 핸들러
handlers:
# assets 폴더의 정적 파일들
- url: /assets
static_dir: dist/assets
expiration: 1d
secure: always
# 기타 정적 파일들 (favicon 등)
- url: /(.*\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|webp))
static_files: dist/\1
upload: dist/.*\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|webp)$
expiration: 1d
secure: always
# SPA 라우팅을 위한 fallback
- url: /.*
static_files: dist/index.html
upload: dist/index.html
secure: always
4. .gcloudeignore 파일 생성
node_modules/
.git
.gitignore
*.md
public/
.env.local
.env.development
5. App Engine 상태 확인
# 현재 App Engine 설정 및 배포 상태 확인
gcloud app describe
6. 빌드 및 배포
# 의존성 설치
yarn install
# 프로덕션 빌드
yarn build
# dist 폴더가 생성되었는지 확인
ls -la dist/
# 배포
gcloud app deploy app.yaml --project=<PROJECT_NAME>
7. 배포 확인
# 배포된 서비스 확인
gcloud app services list
# 브라우저로 열기
gcloud app browse --service=frontend
# 로그 확인
gcloud app logs tail -s frontend
도움이 되셨길 바라며, 글을 마칩니다.

728x90
반응형
'개발 > React' 카테고리의 다른 글
| Vercel 새로고침 시 404: NOT_FOUND 에러 (0) | 2025.05.12 |
|---|---|
| [React] Vercel 설치 및 배포 가이드 (0) | 2025.04.16 |
| [React] React에서 카카오맵 사용하기 (0) | 2025.03.06 |
| [React] 어떤 상황에서 어떤 상태 관리 라이브러리를 써야 할까? (Feat. Redux, React Query, Context API, useReducer) (0) | 2025.02.23 |
| [React] react-query(TanStack Query) 사용법 (0) | 2025.02.21 |