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

Astroは、コンテンツ重視のウェブサイトを高速で構築できるオールインワンのウェブフレームワークであり、以下のような機能があります。

  • Astroアイランド（コンポーネントアイランド）─高速なサイトを構築するAstro独自のウェブアーキテクチャ
  • サーバーファーストのAPI設計─ユーザーのデバイスから高コストなハイドレーション（サーバーでレンダリングされたHTMLにインタラクティブ性を与える技術）を排除
  • デフォルトでJS不使用─JavaScriptのランタイムのオーバーヘッドがなく、動作が遅れることがない
  • エッジ対応─DenoやCloudflareのようなグローバルネットワークのエッジを含め、どこでもデプロイ可能
  • カスタマイズ可能─TailwindやMDXなど、100以上のインテグレーションから選択可能
  • 特定のUIに依存しない─React、Preact、Svelte、Vue、Solid、Litなど複数のUIをサポート

より詳しい情報については、Astroの公式ウェブサイトをご覧ください。

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

  1. 「Kinsta – Hello World – Static Site With Astro」GitHubレポジトリをフォークしてください。
  2. MyKinstaで、Hello World Astroのリポジトリを使用してアプリケーションを追加します。最初のデプロイ時に必要なコマンドが自動で検出されるため、ウェブプロセスのstartコマンドは空白のままで問題ありません。

ビルド完了後は、すぐにアプリケーションをご利用いただけます。アプリケーションのURLにHello Astronautページが表示されます。

インストール完了後に表示されるAstro Hello Astronautページ
インストール完了後に表示されるAstrの Hello Astronautページ

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

ポート

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

startコマンド

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

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

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