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

Cuttlebelleは、各ページをコンテンツブロックに分解し、後で組み立てることで、複雑なコードを扱うことなく、さまざまなページレイアウトを作成することができる静的サイトビルダーです。詳しくは、Cuttlebelleの公式サイトをご覧ください。

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

静的サイトホスティング

  1. GitHubにログイン後、「Kinsta – Hello World – Static Site With Cuttlebelle」テンプレートから、新規リポジトリを作成します(「Use this template」>「Create a new repository」)。
  2. MyKinstaで、Cuttlebelleのリポジトリを使用して静的サイトを追加します。「ビルド設定」が自動入力される場合は、以下の設定と一致していることを確認し、必要に応じて変更してください。
    • ビルドコマンドnpm run build
    • Nodeバージョン:18.16.0
    • 公開ディレクトリ:.site
  3. ビルドの完了後は、すぐにサイトをご利用いただけます。サイトのURLにはKinstaのウェルカムページが表示されます。

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

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

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

ポート

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

startコマンド

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

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

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

ウェルカムページ

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

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