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

最終更新日: 2025/09/22

阿部隼也

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

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

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

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

Nuxtアプリのデプロイ

Nuxtは、Web開発を直感的かつ強力にするVue.jsフレームワークです。自信を持って、パフォーマンスが高く、本番グレードのフルスタックWebアプリやWebサイトを作成できます。

Nuxtは、サーバーサイドレンダリングや簡単なルーティングなどの機能でVue.jsアプリケーションの構築を簡素化するため、「直感的なVueフレームワーク」として知られています。

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

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

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

Nuxtアプリの作成

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

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

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

npx nuxi@latest init helloworld

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

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

次に、ディレクトリに cd して、次のコマンドを実行して開発サーバーを起動します。

npm run dev

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

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

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

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

最速で始めたい場合は、ワンクリックデプロイオプションが最適です。

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

Railwayにデプロイ

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

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

CLIからデプロイ

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

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

railway up

package.json ファイルに "start":"node .output/server/index.mjs" を追加します。 package.json

{
    "name": "nuxt-app",
    "private": true,
    "type": "module",
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "start": "node .output/server/index.mjs",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
    },
    "dependencies": {
        "nuxt": "^3.13.0",
        "vue": "latest",
        "vue-router": "latest"
    }
}

注： RailwayはNixpacksを使用して、設定なしでコードをビルドおよびデプロイします。Nixpack Nodeプロバイダーは package.json ファイルの開始スクリプトを取得し、それを使用してアプリを提供します。

Nuxt アプリのディレクトリで以下を実行します。

railway init

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

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

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

Dockerfileの使用

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

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

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

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

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

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