Railway로 React 배포하기

Railway란?

https://railway.com/

Railway

Railway는 웹 애플리케이션, 백엔드 서버, 데이터베이스 등을 손쉽게 배포하고 관리할 수 있는 클라우드 PaaS 플랫폼이다.

복잡한 서버 설정(예: AWS EC2) 없이 GitHub 등에서 코드를 가져와 웹사이트나 앱을 배포할 수 있어 매우 간편하다.

또한 Railway 내에서 https로 접근할 수 있는 도메인을 추가할 수 있어 매우 편리하다.

 

사전 준비

1. Railway 계정(Github 로그인 추천)
2. 배포할 Repository에 대한 admin 권한(Organization이라면 organization에 대한 owner 권한)
3. npm install → npm start 로 로컬에서 실행되는지 확인(npm install react-scripts도 체크)

본인이 작성한 코드라면 전부 있겠지만 코드 작성자와 배포자가 다르다면 배포에 앞서 체크해보는 것이 좋다.

 

기본적으로 docs를 뒤지다 보면 배포할 수 있다.

https://docs.railway.com/guides/react#one-click-deploy-from-a-template

Deploy a React App | Railway Docs

 

CLI로 React 배포하기

https://docs.railway.com/guides/cli#installing-the-cli

Using the CLI | Railway Docs

위의 링크에서 본인의 운영체제에 맞는 Railway CLI를 설치한다.

 

railway login

 

배포하고자 하는 프로젝트 경로에서 위의 명령어를 입력해 railway에 로그인한다.

간단하게 웹에 들어가면 인증된다.

 

railway init
railway up

 

init으로 workspace를 선택하고(없다면 생성), up으로 배포한다.

 

위에 작성된 사전 준비와 명령어를 잘 입력했다면 배포가 완료되었을 것이다.

여기서 일부 사람들은 추가 작업을 더 해야 한다.

 

추가 작업: 폴더 안에 배포할 코드가 있는데요?

 

root 경로에 배포 파일이 있지 않고, 폴더 내에 있는 사람들이 있을 수 있다.

 

 

꼭 Settings > Root Directory에서 원하는 디렉토리를 넣어주자.

그렇지 않으면 수동으로, 본인이 로컬에서 git pull 한 뒤에 명령어로 배포를 하는 불상사가 일어날 수 있다.

브랜치로 환경을 구분하고 싶다면 아래의 Branch connected도 바꿀 수 있다.

 

추가 작업: 저는 Dockerfile 쓰고 싶은데요?

배포 경로에 다음 Dockerfile을 추가한다.

# Use the Node alpine official image
# https://hub.docker.com/_/node
FROM node:lts-alpine AS build

# Set config
ENV NPM_CONFIG_UPDATE_NOTIFIER=false
ENV NPM_CONFIG_FUND=false

# Create and change to the app directory.
WORKDIR /app

# Copy the files to the container image
COPY package*.json ./

# Install packages
RUN npm ci

# Copy local code to the container image.
COPY . ./

# Build the app.
RUN npm run build

# Use the Caddy image
FROM caddy

# Create and change to the app directory.
WORKDIR /app

# Copy Caddyfile to the container image.
COPY Caddyfile ./

# Copy local code to the container image.
RUN caddy fmt Caddyfile --overwrite

# Copy files to the container image.
COPY --from=build /app/dist ./dist

# Use Caddy to run/serve the app
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]

 

또한 동일한 경로에 Caddyfile도 생성한다.

# global options
{
    admin off # there's no need for the admin api in railway's environment
    persist_config off # storage isn't persistent anyway
    auto_https off # railway handles https for us, this would cause issues if left enabled
    # runtime logs
    log {
        format json # set runtime log format to json mode
    }
    # server options
    servers {
        trusted_proxies static private_ranges 100.0.0.0/8 # trust railway's proxy
    }
}

# site block, listens on the $PORT environment variable, automatically assigned by railway
:{$PORT:3000} {
    # access logs
    log {
        format json # set access log format to json mode
    }

    # health check for railway
    rewrite /health /*

    # serve from the 'dist' folder (Vite builds into the 'dist' folder)
    root * dist

    # enable gzipping responses
    encode gzip

    # serve files from 'dist'
    file_server

    # if path doesn't exist, redirect it to 'index.html' for client side routing
    try_files {path} /index.html
}

 

웹사이트로 들어가 Github Repo를 연결해서 배포한다.