JavaScriptフレームワーク
こちらのページでは、GitHubリポジトリから弊社アプリケーションホスティングに以下JavaScriptアプリケーションをデプロイ、セットアップする方法をご紹介します。
Node.jsアプリケーションについてはこちらをご覧ください。
前提条件
- 弊社クイックスタートテンプレートは、GitHubに保存・管理されているため、GitHubアカウントが必要です。
- アプリケーションのデプロイには、MyKinstaアカウントが必要になります。
Astro SSR
GitHubリポジトリから弊社アプリケーションホスティングを利用して、サーバーサイドレンダリング（SSR）でAstro静的サイトをセットアップする方法の一例をご紹介します。
Astroは、JavaScriptのコード量を最小限に抑えて高速化を実現するため、コンテンツ豊富なウェブサイトに焦点を当てた静的サイトビルダーです。AstroでSSRを有効にすると、ログイン用のセッション、データベースとの接続などの動的な機能を実装することができます。詳細は、Astroの公式サイトをご覧ください。
- GitHubにログイン後、「Kinsta – Hello World – SSR Site With Astro」テンプレートから新規リポジトリを作成します（「Use this template」＞「Create a new repository」）。
- MyKinstaで、「アプリケーション」＞「アプリケーションを追加」＞「GitHub」を選択し、「Gitサービスの接続」ウィンドウで「Gitサービスを接続する」をクリックして、GitHubアカウントにログインします。
- Astro SSRリポジトリと「データセンターの所在地」を選択します。その他の設定はデフォルトのままで、「続行」をクリックします。
- 「最終確認」画面で「デプロイする」をクリックします。
デプロイに際し、ウェブプロセスのstartコマンドが自動検出され、package.jsonファイルで定義された依存関係も自動インストールされます。デプロイ完了後、すぐにアプリケーションをご利用いただけます。アプリケーションのURLには、Kinstaのウェルカムページが表示されます。
Astro静的サイトのセットアップ方法について動画での解説もご用意しています。
ウェブサーバーのセットアップ
ポート
PORT環境変数は自動的に設定されるため、お客様ご自身で定義したり、アプリケーションにハードコーディングで記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、startコマンドとして自動的にnpm startを持つウェブプロセスが検出されます。サーバーを実行にはこのコマンドを使用します。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm buildコマンド、その後にnpm startコマンドが実行されます。
Deno
GitHubリポジトリから弊社アプリケーションホスティングを利用して、Denoアプリケーションをデプロイ、セットアップする方法の一例をご紹介します。
DenoはJavaScript、TypeScript、WebAssemblyランタイムです。ウェブブラウザの外でコードを実行することで、セキュアなサーバーサイドアプリケーションを構築することができます。詳細は、Denoの公式サイトをご覧ください。
- GitHubにログイン後、「Kinsta – Hello World – Deno」テンプレートから、新規リポジトリを作成します（「Use this template」＞「Create a new repository」）。
- MyKinstaで、「アプリケーション」＞「アプリケーションを追加」＞「GitHub」を選択し、「Gitサービスの接続」ウィンドウで「Gitサービスを接続する」をクリックして、GitHubアカウントにログインします。
- Denoリポジトリ「データセンターの所在地」を選択します。その他の設定はデフォルトのままで、「続行」をクリックします。
- 「最終確認」画面で「デプロイする」をクリックします。
デプロイに際し、ウェブプロセスのstartコマンドが自動検出され、package.jsonファイルで定義された依存関係も自動インストールされます。デプロイ完了後、すぐにアプリケーションをご利用いただけます。アプリケーションのURLには、Hello Worldページが表示されます。
ウェブサーバーのセットアップ
ポート
PORT環境変数は自動的に設定されるため、お客様ご自身で定義したり、アプリケーションにハードコーディングで記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、startコマンドとして自動的にnpm startを持つウェブプロセスが検出されます。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm buildコマンド、その後にnpm startコマンドが実行されます。
Prisma ORMを使用したNext.jsアプリケーション
GitHubリポジトリから、弊社アプリケーションホスティングおよびデータベースホスティングサービスを利用して、Next.jsとPrismaアプリケーションをデプロイ、セットアップする方法の一例をご紹介します。
Prismaは、オープンソースのデータベースツールキットです。型安全性に優れた直感的なAPIで、開発者のデータベースアクセスを簡素化してくれます。複数のデータベースをサポートし、効率的で最適化されたSQLクエリを生成することで、より高いパフォーマンスを実現します。詳細はPrismaの公式サイトをご覧ください。
このアプリケーションを動作させるには、PostgreSQLデータベースが必要になります。
- MyKinstaで、「データベース」＞「データベースを追加」に進み、データベース名を入力したら、「データベースタイプ」でPostgreSQLを選択してください。「データセンターの所在地」および「サイズ」を選択して、「続行」＞「データベースを作成」をクリックします。
- GitHubにログイン後、「Kinsta – Hello World – Prisma」テンプレートから新規リポジトリを作成します（「Use this template」＞「Create a new repository」）。
- MyKinstaで、「アプリケーション」＞「アプリケーションを追加」＞「GitHub」を選択し、「Gitサービスの接続」ウィンドウで「Gitサービスを接続する」をクリックして、GitHubアカウントにログインします。
- Prismaリポジトリと「データセンターの所在地」を選択します。その他の設定はデフォルトのままで、「続行」をクリックします。
- 「最終確認」画面で「デプロイする」をクリックします。
- データベースが接続できる状態（横に緑色のチェックマークが表示されます）になったら、アプリケーションとデータベース間に内部接続を追加します。「アプリケーション」＞（アプリケーション名）＞「設定」＞「内部接続」セクションの「接続を追加」をクリックしてください。
- データベースを選択して、「環境変数の追加」にチェックを入れ、「アプリケーションへの環境変数の追加」にもチェックを入れます。最後に「接続を追加」をクリックしてください。
- アプリケーションの「デプロイメント」画面を開き、「デプロイする」＞「アプリケーションをデプロイ」をクリックします。
デプロイに際し、ウェブプロセスのstartコマンドが自動検出され、package.jsonファイルで定義された依存関係も自動インストールされます。デプロイ完了後、すぐにアプリケーションをご利用いただけます。アプリケーションのURLには、Kinstaのウェルカムページが表示されます。
ウェブサーバーのセットアップ
ポート
PORT環境変数は自動的に設定されるため、お客様ご自身で定義したり、アプリケーションにハードコーディングで記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、startコマンドとして自動的にnpm startを持つウェブプロセスが検出されます。サーバーを実行にはこのコマンドを使用します。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm buildコマンド、その後にnpm startコマンドが実行されます。
React
GitHubリポジトリから弊社アプリケーションホスティングを利用して、Reactアプリケーションをデプロイ、セットアップする方法の一例をご紹介します。
Reactは、ユーザーインターフェースの構築に定評のあるJavaScriptライブラリです。再利用可能なUIコンポーネントを作成し、データの変更に応じてUIを効率的に更新することができます。詳細はReactの公式サイトをご覧ください。
- GitHubにログイン後、「Kinsta – Hello World – React」テンプレートから、新規リポジトリを作成します（「Use this template」＞「Create a new repository」）。
- MyKinstaで、「アプリケーション」＞「アプリケーションを追加」＞「GitHub」を選択し、「Gitサービスの接続」ウィンドウで「Gitサービスを接続する」をクリックして、GitHubアカウントにログインします。
- Reactリポジトリと「データセンターの所在地」を選択します。その他の設定はデフォルトのままで、「続行」をクリックします。
- 「最終確認」画面で「デプロイする」をクリックします。
デプロイに際し、ウェブプロセスのstartコマンドが自動検出され、package.jsonファイルで定義された依存関係も自動インストールされます。デプロイ完了後、すぐにアプリケーションをご利用いただけます。アプリケーションのURLには、Kinstaのウェルカムページが表示されます。
ウェブサーバーのセットアップ
ポート
PORT環境変数は自動的に設定されるため、お客様ご自身で定義したり、アプリケーションにハードコーディングで記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、package.jsonファイルのnpm startコマンドに基づき、ウェブプロセスが自動的に作成されます。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm startコマンドとnpm buildコマンドが実行されます。
Viteを使用したReactアプリケーション
GitHubリポジトリから弊社アプリケーションホスティングを利用して、ViteでReactアプリケーションをデプロイ、セットアップする方法の一例をご紹介します。
Viteは、分散型アプリケーションの構築を支援するツールです。開発プロセスを簡素化する開発者ツールとAPIを提供し、複数のプログラミング言語をサポートしています。詳細はViteの公式サイトをご覧ください。
Reactは、ユーザーインターフェースの構築に強いJavaScriptライブラリです。再利用可能なUIコンポーネントを利用し、データの変更に応じてUIを効率的に更新することができます。詳細はReactの公式サイトをご覧ください。
- GitHubにログイン後、「Kinsta – Hello World – Vite + React」テンプレートから、新規リポジトリを作成します（「Use this template」＞「Create a new repository」）。
- MyKinstaで、「アプリケーション」＞「アプリケーションを追加」＞「GitHub」を選択し、「Gitサービスの接続」ウィンドウで「Gitサービスを接続する」をクリックして、GitHubアカウントにログインします。
- Vite + Reactのリポジトリと「データセンターの所在地」を選択します。その他の設定はデフォルトのままで、「続行」をクリックします。
- 「最終確認」画面で「デプロイする」をクリックします。
デプロイに際し、ウェブプロセスのstartコマンドが自動検出され、package.jsonファイルで定義された依存関係も自動インストールされます。デプロイ完了後、すぐにアプリケーションをご利用いただけます。アプリケーションのURLには、Kinstaのウェルカムページが表示されます。
ウェブサーバーのセットアップ
ポート
PORT環境変数は自動的に設定されるため、お客様ご自身で定義したり、アプリケーションにハードコーディングで記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、package.jsonファイルのnpm startコマンドに基づき、ウェブプロセスが自動的に作成されます。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm startコマンドとnpm buildコマンドが実行されます。