KinstaでReactアプリケーションまたは静的サイトをセットアップする

最終更新日：2023年11月06日

こちらのページでは、GitHubリポジトリから弊社アプリケーションホスティングまたは静的サイトホスティングで、Reactアプリケーションまたは静的サイトをデプロイ、セットアップする方法の例をご紹介します。

Reactは、ユーザーインターフェースの構築に定評のあるJavaScriptライブラリです。再利用可能なUIコンポーネントを作成し、データの変更に応じてUIを効率的に更新することができます。詳細はReactの公式サイトをご覧ください。

package.jsonファイルで定義された依存関係は、デプロイメントプロセスに際し自動でインストールされます。

静的サイトホスティング

GitHubにログインし、「Kinsta – Hello World – React」テンプレートからリポジトリを新規作成します（「Use this template」＞「Create a new repository」）。
MyKinstaに移動し、作成したリポジトリと以下のビルド設定で静的サイトを追加します。
- ビルドコマンド：npm run build
- Nodeバージョン：18.16.0
- 公開ディレクトリ：build
ビルドが終了すると、Kinstaのウェルカムページが表示され、すぐに静的サイトをご利用いただけます。

GitHubにログインし、「Kinsta – Hello World – React」テンプレートから、新規リポジトリを作成してください（「Use this template」＞「Create a new repository」）。
MyKinstaで、Kinsta – Hello World – Reactレポジトリを使用してアプリケーションを追加します。最初のデプロイ時に必要なコマンドが自動で検出されるため、ウェブプロセスのstartコマンドは空白のままで問題ありません。
ビルドが終了するとKinstaのウェルカムページが表示され、すぐにアプリケーションをご利用いただけます。

Kinstaにて自動でPORT環境変数が設定されます。これを定義したり、アプリケーションでハードコーディングにより記述したりする必要はありません。

アプリケーションをデプロイすると、startコマンドとして自動的にnpm startを持つウェブプロセスが検出されます。

デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm buildとnpm startコマンドが実行されます。

ビルドが終了すると、Kinstaのウェルカムページが表示され、すぐにアプリケーションまたは静的サイトをご利用いただけます。