ViteでReactアプリケーションまたは静的サイトをセットアップして、GitHubリポジトリからKinstaのアプリケーションまたは静的サイトホスティングサービスにデプロイする方法をご紹介します。
Viteは、分散型アプリケーションの構築を支援するツールです。開発プロセスを簡素化する開発者ツールとAPIを提供し、複数のプログラミング言語をサポートしています。詳細はViteの公式サイトをご覧ください。
Reactは、ユーザーインターフェースの構築に強いJavaScriptライブラリです。再利用可能なUIコンポーネントを利用し、データの変更に応じてUIを効率的に更新することができます。詳細はReactの公式サイトをご覧ください。
Kinstaでは、システムにより、デプロイプロセス中にpackage.jsonファイルで定義された依存関係が自動でインストールされます。
静的サイトホスティング
- GitHubにログインし、このテンプレートから新しいリポジトリを作成します（「Use this template」＞「Create a new repository」）：Kinsta – Hello World – Vite + React
- MyKinstaで、Hello World – Vite + Reactリポジトリと以下のビルド設定で静的サイトを追加します。
- ビルドコマンド：
npm run build - Nodeバージョン：18.16.0
- 公開ディレクトリ：dist
- ビルドコマンド：
- ビルドが終了するとすぐにサイトが利用可能になり、Kinstaのウェルカムページが表示されます。
アプリケーションのホスティング
- GitHubにログインし、このテンプレートから新しいリポジトリを作成します（「Use this template」＞「Create a new repository」）：Kinsta – Hello World – Vite + React
- MyKinstaで、Hello World – Vite + Reactリポジトリを使ってアプリケーションを追加します。startコマンドは、初回デプロイ時に自動で検出されるため、空白で問題ありません。
- ビルドが終了するとすぐにアプリが利用可能になり、Kinstaのウェルカムページが表示されます。
ウェブサーバーのセットアップ
ポート
Kinstaのシステムにより自動でPORT環境変数が設定されます。自分で定義したり、アプリケーションにハードコーディングにより記述したりしないでください。
startコマンド
Kinstaでは、アプリケーションのデプロイ時に、package.jsonファイルのnpm startコマンドに基づき自動でウェブプロセスが作成されます。
デプロイのライフサイクル
デプロイが開始されるたびに（アプリケーションの作成またはコミットの受信による再デプロイによって）、npm installとnpm buildコマンドが実行されます。
ウェルカムページ
ビルドが終了するとすぐにアプリまたはサイトが利用可能になり、KinstaのウェルカムページがアプリケーションのURLまたは静的サイトのURLを介して表示されます。
