React

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

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

なお、以下のテンプレートは、弊社アプリケーションホスティングでもセットアップなしでご利用いただけます。アプリケーションホスティングでは、最初のデプロイ時に必要なコマンドが自動検出されるため、ウェブプロセスのstartコマンドは空白のままで問題ありません。

前提条件

• 弊社クイックスタートテンプレートは、GitHubに保存・管理されているため、GitHubアカウントが必要です。
• アプリケーションのデプロイには、MyKinstaアカウントが必要になります。

React静的サイトをデプロイする

1. GitHubにログイン後、「Kinsta – Hello World – React」テンプレートから新規リポジトリを作成します（「Use this template」＞「Create a new repository」）。
2. MyKinstaで、「静的サイト」＞「サイトの追加」＞「GitHub」を選択し、「Gitサービスの接続」ウィンドウで「Gitサービスを接続する」をクリックして、GitHubアカウントにログインします。
3. Hello World – Reactリポジトリを選択して「続行」をクリックし、以下のビルド設定で静的サイトを追加します。
   • ビルドコマンド：npm run build
   • Nodeバージョン：18.16.0
   • 公開ディレクトリ：build

package.jsonファイルで定義された依存関係は、デプロイメントプロセス中に自動インストールされます。デプロイの完了後は、すぐにサイトをご利用いただけます。サイトのURLには、Kinstaのウェルカムページが表示されます。

デプロイメントライフサイクル

デプロイが開始されるたびに（アプリケーションの作成またはコミットの受信による再デプロイによって）、npm installとnpm buildコマンドが実行されます。

ReactとVite

GitHubリポジトリから弊社静的サイトホスティングサービスに、Viteを使用したReact静的サイトをデプロイ、セットアップする方法の一例をご紹介します。

Viteは、分散型アプリケーションの構築を支援するツールです。開発プロセスを簡素化する開発者ツールとAPIを提供し、複数のプログラミング言語をサポートしています。詳細はViteの公式サイトをご覧ください。

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

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

デプロイメントライフサイクル

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