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

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

Nuxtアプリのデプロイ

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

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

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

1. テンプレートからのワンクリックデプロイ
2. GitHubリポジトリからデプロイ
3. CLIでデプロイ
4. 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からデプロイ

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

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

Dockerfileの使用

1. helloworld またはNuxtアプリのルートディレクトリに Dockerfile を作成します。
2. 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アプリをシームレスにデプロイし始めてください！

次のステップ

Railwayでのエクスペリエンスを最大限に活用するために、これらのリソースを調べてください。

• データベースサービスの追加
• アプリの監視

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