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

Docusaurusは、静的サイトジェネレータです。高速なクライアントナビゲーションを搭載したシングルページのアプリケーションを構築し、Reactの性能を活かして、インタラクティブなサイトを実現します。インフラストラクチャやデザインの細部に気を配ることなく、チームが簡単にドキュメントサイトを公開できるように設計されています。必要になるのは、マークダウンファイルとReactで記述したトップページ、そしていくつかの設定の編集のみです。

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

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

ビルド完了後は、すぐにアプリケーションをご利用いただけます。アプリケーションのURLにデフォルトのDocusaurusウェブサイトが表示されます。

インストール完了後に表示されるDocusaurusのMy Siteページ
インストール完了後に表示されるDocusaurusのMy Siteページ

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

ポート

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

startコマンド

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

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

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