JavaScriptフレームワーク
サンプルリポジトリを使用するには、MyKinstaアカウントを作成する必要があります。GitHubリポジトリから弊社ウェブアプリケーションサーバーに以下JavaScriptアプリケーションをデプロイ、セットアップする方法をご紹介します。
Node.jsアプリケーションについてはこちらをご覧ください。
Astro SSR
GitHubリポジトリから弊社ウェブアプリケーションサーバーを利用して、サーバーサイドレンダリング（SSR）でAstro静的サイトをセットアップする方法の一例をご紹介します。
Astroは、JavaScriptのコード量を最小限に抑えて高速化を実現するため、コンテンツ豊富なウェブサイトに焦点を当てた静的サイトビルダーです。AstroでSSRを有効にすると、ログイン用のセッション、データベースとの接続などの動的な機能を実装することができます。詳細は、Astroの公式サイトをご覧ください。
- MyKinstaにログインし、「アプリケーション」＞「アプリケーションを追加」をクリックして、「Gitリポジトリ」および「パブリックリポジトリ」を選択します。また、以下を設定してください。
- リポジトリ：https://github.com/kinsta/hello-world-astro-ssr
- デフォルトのブランチ：main
- 「名前」を入力し、「ロケーション」を選択します。「リソース」フィールドからPodサイズを選択して、「作成とデプロイ」をクリックします。
デプロイに際し、ウェブプロセスのstartコマンドが自動検出され、package.jsonファイルで定義された依存関係も自動インストールされます。デプロイ完了後、すぐにアプリケーションをご利用いただけます。アプリケーションのURLには、Kinstaのウェルカムページが表示されます。
Astro静的サイトのセットアップ方法について動画での解説もご用意しています。
ウェブサーバーのセットアップ
ポート
PORT環境変数は自動的に設定されるため、お客様ご自身で定義したり、アプリケーションにハードコーディングで記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、startコマンドとして自動的にnpm startを持つウェブプロセスが検出されます。サーバーを実行にはこのコマンドを使用します。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm buildコマンド、その後にnpm startコマンドが実行されます。
Deno
GitHubリポジトリから弊社ウェブアプリケーションサーバーを利用して、Denoアプリケーションをデプロイ、セットアップする方法の一例をご紹介します。
DenoはJavaScript、TypeScript、WebAssemblyランタイムです。ウェブブラウザの外でコードを実行することで、セキュアなサーバーサイドアプリケーションを構築することができます。詳細は、Denoの公式サイトをご覧ください。
- MyKinstaにログインし、「アプリケーション」＞「アプリケーションを追加」をクリックして、「Gitリポジトリ」および「パブリックリポジトリ」を選択します。また、以下を設定してください。
- リポジトリ：https://github.com/kinsta/hello-world-deno
- デフォルトのブランチ：main
- 「名前」を入力し、「ロケーション」を選択します。「リソース」フィールドからPodサイズを選択して、「作成とデプロイ」をクリックします。
デプロイに際し、ウェブプロセスの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を選択してください。「データセンターの所在地」および「サイズ」を選択して、「続行」＞「データベースを作成」をクリックします。
- MyKinstaにログインし、「アプリケーション」＞「アプリケーションを追加」をクリックして、「Gitリポジトリ」および「パブリックリポジトリ」を選択します。また、以下を設定してください。
- リポジトリ：https://github.com/kinsta/hello-world-prisma
- デフォルトのブランチ：main
- 「名前」を入力し、「ロケーション」を選択します。「リソース」フィールドからPodサイズを選択して、「作成とデプロイ」をクリックします。
- データベースが接続できる状態（横に緑色のチェックマークが表示されます）になったら、アプリケーションとデータベース間に内部接続を追加します。「アプリケーション」＞（アプリケーション名）＞「設定」＞「内部接続」セクションの「接続を追加」をクリックしてください。
- データベースを選択して、「環境変数の追加」にチェックを入れ、「アプリケーションへの環境変数の追加」にもチェックを入れます。最後に「接続を追加」をクリックしてください。
- アプリケーションの「デプロイメント」画面を開き、「デプロイする」＞「アプリケーションをデプロイ」をクリックします。
デプロイに際し、ウェブプロセスのstartコマンドが自動検出され、package.jsonファイルで定義された依存関係も自動インストールされます。デプロイ完了後、すぐにアプリケーションをご利用いただけます。アプリケーションのURLには、Kinstaのウェルカムページが表示されます。
ウェブサーバーのセットアップ
ポート
PORT環境変数は自動的に設定されるため、お客様ご自身で定義したり、アプリケーションにハードコーディングで記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、startコマンドとして自動的にnpm startを持つウェブプロセスが検出されます。サーバーを実行にはこのコマンドを使用します。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm buildコマンド、その後にnpm startコマンドが実行されます。
React
GitHubリポジトリから弊社ウェブアプリケーションサーバーを利用して、Reactアプリケーションをデプロイ、セットアップする方法の一例をご紹介します。
Reactは、ユーザーインターフェースの構築に定評のあるJavaScriptライブラリです。再利用可能なUIコンポーネントを作成し、データの変更に応じてUIを効率的に更新することができます。詳細はReactの公式サイトをご覧ください。
- MyKinstaにログインし、「アプリケーション」＞「アプリケーションを追加」をクリックして、「Gitリポジトリ」および「パブリックリポジトリ」を選択します。また、以下を設定してください。
- リポジトリ：https://github.com/kinsta/hello-world-react
- デフォルトのブランチ：main
- 「名前」を入力し、「ロケーション」を選択します。「リソース」フィールドからPodサイズを選択して、「作成とデプロイ」をクリックします。
デプロイに際し、ウェブプロセスの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の公式サイトをご覧ください。
- MyKinstaにログインし、「アプリケーション」＞「アプリケーションを追加」をクリックして、「Gitリポジトリ」および「パブリックリポジトリ」を選択します。また、以下を設定してください。
- リポジトリ：https://github.com/kinsta/hello-world-react-vite
- デフォルトのブランチ：main
- 「名前」を入力し、「ロケーション」を選択します。「リソース」フィールドからPodサイズを選択して、「作成とデプロイ」をクリックします。
デプロイに際し、ウェブプロセスのstartコマンドが自動検出され、package.jsonファイルで定義された依存関係も自動インストールされます。デプロイ完了後、すぐにアプリケーションをご利用いただけます。アプリケーションのURLには、Kinstaのウェルカムページが表示されます。
ウェブサーバーのセットアップ
ポート
PORT環境変数は自動的に設定されるため、お客様ご自身で定義したり、アプリケーションにハードコーディングで記述したりする必要はありません。
startコマンド
アプリケーションをデプロイすると、package.jsonファイルのnpm startコマンドに基づき、ウェブプロセスが自動的に作成されます。
デプロイメントライフサイクル
デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ）、npm startコマンドとnpm buildコマンドが実行されます。