こちらのページでは、弊社アプリケーションホスティングまたは静的サイトを使って、Nuxt.jsアプリケーションまたは静的サイトをデプロイ、セットアップする方法の例をご紹介します。
Nuxtはオープンソースのウェブ開発フレームワークで、サーバーサイドでレンダリングされたVueアプリケーションや、静的サイトを構築することができます。詳細は、Nuxtの公式サイトをご覧ください。
package.jsonファイルで定義された依存関係は、デプロイメントプロセスに際し自動でインストールされます。
静的サイトホスティング
- GitHubにログインし、「Kinsta – Hello World – NuxtJS」テンプレートからリポジトリを新規作成します（「Use this template」＞「Create a new repository」）。
- MyKinstaに移動し、作成したリポジトリと以下のビルド設定で静的サイトを追加します。
- ビルドコマンド：
npm run generate - Nodeのバージョン：18.16.0
- 公開ディレクトリ：.output/public
- ビルドコマンド：
- ビルドが終了すると、Hello Worldページが表示され、すぐに静的サイトをご利用いただけます。
アプリケーションホスティング
- 「Kinsta – Hello World – NuxtJS」テンプレートから、新規リポジトリを作成してください（「Use this template」＞「Create a new repository」）。
- MyKinstaで、Hello World – NuxtJSレポジトリを使用してアプリケーションを追加します。最初のデプロイ時に必要なコマンドが自動で検出されるため、ウェブプロセスのstartコマンドは空白のままで問題ありません。
- ビルドが終了すると、Hello Worldページが表示され、すぐにアプリケーションをご利用いただけます。
ウェブサーバーのセットアップ
ポート
Kinstaにて自動でPORT環境変数が設定されます。これを定義したり、アプリケーションでハードコーディングにより記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、startコマンドとして自動的にnpm startを持つウェブプロセスが検出されます。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm buildコマンド、その後にnpm startコマンドが実行されます。
Hello Worldページ
ビルドが終了すると、Hello worldページが表示され、すぐにアプリケーションまたは静的サイトをご利用いただけます。
