【Railway】Reactアプリのデプロイ

最終更新日: 2025/09/22

阿部隼也

AIイノベーションズ代表取締役社長 | x.com/ai_abe_shunya

リアルタイムアンケートツール: LiveQ

お悩み相談AIチャット: AI相談.com

Railwayはこちら（←このリンクから登録すると20ドル分のクレジットがもらえます）

Reactアプリのデプロイ

React（React.jsまたはReactJSとも呼ばれる）は、Metaによって開発された、特にWebおよびネイティブアプリケーション向けのユーザーインターフェイスを構築するための人気のあるJavaScriptライブラリです。

Reactは、インタラクティブで動的なUIを再利用可能なコンポーネントに分割することで、作成プロセスを簡素化します。

この記事では、4つの方法でRailwayにReactアプリをデプロイする方法について説明します。

テンプレートからのワンクリックデプロイ
GitHubリポジトリからデプロイ
CLIでデプロイ
Dockerfileでデプロイ

それでは、Reactアプリを作成しましょう！

Reactアプリの作成

注： ReactアプリがローカルまたはGitHubに既にある場合は、この手順をスキップして、「ReactアプリをRailwayにデプロイする」に直接進むことができます。

新しいReactアプリを作成するには、お使いのマシンにNodeがインストールされていることを確認してください。

ターミナルで次のコマンドを実行して、Viteを使用して新しいReactアプリを作成します。

npm create vite@latest helloworld -- --template react

helloworld ディレクトリに新しいReactアプリがプロビジョニングされます。

Reactアプリをローカルで実行

次に、ディレクトリに cd して依存関係をインストールします。

npm install

次のコマンドを実行して、Vite開発サーバーを起動します。

npm run dev

ブラウザを開き、http://localhost:5173 にアクセスしてアプリを表示します。

ReactアプリをRailwayにデプロイする

Railwayは、セットアップと好みに応じて、Reactアプリをデプロイする複数の方法を提供します。

テンプレートからのワンクリックデプロイ

最速で始めたい場合は、ワンクリックデプロイオプションが最適です。distフォルダーを提供するためにCaddyを使用してReactアプリをセットアップします。

下のボタンをクリックして開始します。

Railwayにデプロイ

デプロイ後はテンプレートから Eject して、GitHub アカウントにリポジトリのコピーを作成することを強くおすすめします。

注：コミュニティによって作成されたさまざまなReactアプリテンプレートから選択することもできます。

CLIからデプロイ

Railway CLIのインストール：
- CLIをインストールし、Railwayアカウントで認証します。
Railwayプロジェクトの初期化：
- プロンプトに従ってプロジェクトに名前を付けます。
- プロジェクトが作成されたら、提供されたリンクをクリックしてブラウザで表示します。
アプリケーションのデプロイ：
- このコマンドは、アプリのファイルをスキャン、圧縮し、Railwayにアップロードします。ターミナルにはリアルタイムのデプロイログが表示されます。
- デプロイが完了したら、View logs に移動して、サービスが正常に実行されていることを確認します。
公開URLの設定：
- 新しいサービスの「設定」タブのNetworkingセクションに移動します。
- 「Generate Domain」をクリックして、アプリの公開URLを作成します。

以下のコマンドを使用してアプリをデプロイします。

railway up

Reactアプリディレクトリで以下のコマンドを実行します。

railway init

GitHubリポジトリからデプロイ

ReactアプリをGitHubから直接Railwayにデプロイするには、以下の手順に従ってください。

Railwayで新しいプロジェクトを作成：
- Railwayにアクセスして、新しいプロジェクトを作成します。
GitHubからデプロイ：
- Deploy from GitHub repo を選択し、リポジトリを選択します。
  - RailwayアカウントがまだGitHubにリンクされていない場合は、リンクするように求められます。
アプリのデプロイ：
- Deploy をクリックして、デプロイプロセスを開始します。
- デプロイされると、アプリ用にRailwayサービスが作成されますが、デフォルトでは公開されません。
デプロイの確認：
- デプロイが完了したら、View logs に移動して、サーバーが正常に実行されていることを確認します。
公開URLの設定：
- 新しいサービスの「設定」タブのNetworkingセクションに移動します。
- 「Generate Domain」をクリックして、アプリの公開URLを作成します。

Dockerfileの使用

helloworld またはReactアプリのルートディレクトリに Dockerfile を作成します。
CLIまたはGitHubからデプロイします。

アプリのルートディレクトリに Caddyfile を追加します。

# グローバルオプション
{
    admin off # Railwayの環境では管理APIは不要
    persist_config off # ストレージはとにかく永続的ではない
    auto_https off # Railwayがhttpsを処理してくれるので、有効にすると問題が発生する可能性がある
    # ランタイムログ
    log {
        format json # ランタイムログ形式をjsonモードに設定
    }
    # サーバーオプション
    servers {
        trusted_proxies static private_ranges 100.0.0.0/8 # Railwayのプロキシを信頼
    }
}
# サイトブロック、$PORT環境変数でリッスン、Railwayによって自動的に割り当てられる
:{$PORT:3000} {
    # アクセスログ
    log {
        format json # アクセスログ形式をjsonモードに設定
    }
    # Railwayのヘルスチェック
    rewrite /health /*
    # 「dist」フォルダから提供（Viteは「dist」フォルダにビルドする）
    root * dist
    # gzipping応答を有効にする
    encode gzip
    # 「dist」からファイルを提供
    file_server
    # パスが存在しない場合は、クライアント側のルーティングのために「index.html」にリダイレクトする
    try_files {path} /index.html
}

Dockerfile に以下の内容を追加します。

# Node alpine公式イメージを使用
# https://hub.docker.com/_/node
FROM node:lts-alpine AS build
# 設定
ENV NPM_CONFIG_UPDATE_NOTIFIER=false
ENV NPM_CONFIG_FUND=false
# アプリディレクトリを作成して変更
WORKDIR /app
# ファイルをコンテナイメージにコピー
COPY package*.json ./
# パッケージのインストール
RUN npm ci
# ローカルコードをコンテナイメージにコピー
COPY . ./
# アプリのビルド
RUN npm run build
# Caddyイメージを使用
FROM caddy
# アプリディレクトリを作成して変更
WORKDIR /app
# Caddyfileをコンテナイメージにコピー
COPY Caddyfile ./
# ローカルコードをコンテナイメージにコピー
RUN caddy fmt Caddyfile --overwrite
# ファイルをコンテナイメージにコピー
COPY --from=build /app/dist ./dist
# Caddyを使用してアプリを実行/提供
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]

Dockerfile はCaddyを使用してReactアプリを提供します。

Railwayは Dockerfile を自動的に検出し、それを使用してアプリをビルドおよびデプロイします。

注： Railwayは、パブリックおよびプライベートのDockerイメージからのデプロイもサポートしています。

この記事では、Railwayの主なデプロイオプションについて説明しました。セットアップに適したアプローチを選択し、Reactアプリをシームレスにデプロイし始めてください！