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

Qwikは、規模や複雑さを問わず、あらゆるウェブアプリケーションを1KB程度のJavaScriptで瞬時に読み込み、規模に応じて一貫したパフォーマンスを提供してくれます。詳細はQwikの公式サイトをご覧ください。

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

静的サイトホスティング

  1. GitHubにログインし、「Kinsta – Hello World – Qwik」テンプレートから新規リポジトリを作成します(「Use this template」>「Create a new repository」)。
  2. MyKinstaに移動し、Hello World – Qwikリポジトリを使って以下のビルド設定静的サイトを追加します。
    • ビルドコマンドnpm run buildnpm run build.server
    • Nodeバージョン:18.16.0
    • 公開ディレクトリ:dist
  3. ビルドが終了すると、Kinstaのウェルカムページが表示され、すぐに静的サイトをご利用いただけます。

アプリケーションホスティング

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

ウェブサーバーのセットアップ

ポート

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

startコマンド

アアプリケーションをデプロイすると、startコマンドとして自動的にnpm startを持つウェブプロセスが検出されます。サーバーを実行するには、必ずこのコマンドを使用してください。

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

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

ウェルカムページ

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

Qwikのデプロイ完了後に表示されるKinstaのウェルカムページ
Qwikのデプロイ完了後に表示されるKinstaのウェルカムページ