静的サイトの追加

静的サイトサーバーでは、静的サイトを容易に構築・運営でき、MyKinstaアカウントをお持ちであれば、どなたでもご利用いただけます。サイトは1つの企業につき100件まで追加可能です。詳しくはこちらをご覧ください。

静的サイトの追加

新たに静的サイトを追加するには「静的サイト」ページで「サイトを追加」をクリックします。

初めて静的サイトを追加するときには、アカウントからGitサービスとリポジトリを選択する必要があります。以下のいずれか（またはすべて）から選択可能です。

• Bitbucket
• GitHub
• GitLab

Gitサービスのアカウントに接続したら、MyKinsta に戻り「静的サイトの追加」手順の続きを行います。

続いて表示されるフォームには、以下のフィールドがあります。

詳細

ブランチの選択

サポートされているGitサービスから選択することができます。

• リポジトリ：使用するGitリポジトリを選択してください。
• デフォルトのブランチ：コミット時または手動でデプロイするブランチを設定できます。
• コミットに際し自動でデプロイ：上記で選択したブランチにコミットが行われるたびに、サイトを自動でデプロイするかどうかを選択します。

基本情報

• 表示名：この名前はMyKinstaに表示されるもので、識別に利用されます。他の静的サイト、アプリケーション、またはWordPressサイトと同じ名前は使用できません。

弊社の静的サイトサーバーでは、260+のCDNロケーションが用意されています。静的サイトはこれらのCDNロケーションのエッジに自動で反映される仕様です。この構成により、特定のデータセンターを指定することなく、お客様のサイトのアセットは訪問者に最も近い所在地から配信されます。

プルリクエストのプレビュー

プルリクエストのプレビューを有効にすると、サイトにデプロイする前に変更を確認することができます。必要に応じて、「プルリクエストのプレビューを有効にする」にチェックを入れてください。

プルリクエストのプレビューを有効にしている場合は、本番環境、プレビュー環境、またはその両方で環境変数を使用するかどうかを選択できます。

ビルド設定

ビルド設定は静的サイトのビルド方法を決定します。サイトが自動的に検出されたフレームワークの1つを使用している場合、「ビルドコマンド」と「公開ディレクトリ」が自動的に設定され、フレームワークが検出されたことを伝える通知が表示されます。自動入力されフィールドの内容が正しいかどうかを確認してください。

ビルド設定

• ビルドコマンド：（任意）静的サイトのビルドコマンドが必要な場合は、ここに入力してください。
• Nodeのバージョン：（任意）ビルドコマンドを入力する場合、互換性を確保してエラーを回避するために、ビルドプロセス中に使用するNode.jsのメジャーバージョンを指定できます。メジャーバージョンを選択すると、ビルド中にそのバージョンの最新イメージがプルされます。最新バージョンを使用する場合はlatest、現在有効な長期サポートバージョンを使用する場合は、ltsを選択することも可能です。
• ルートディレクトリ（任意）：静的サイトのルートフォルダを定義します。標準でないフォルダ構造やmonorepoの設定がある場合に有用です。
• 公開ディレクトリ：（任意）空白の場合、リポジトリのルートフォルダがデフォルトになります。
  • 特定のサブディレクトリを使ってサイトを公開したい場合は、リポジトリルートからの相対パスを入力してください。
  • ビルドする必要のないHTMLサイトを特定のサブディレクトリから実行するには、そのディレクトリにサイトファイルを配置し、リポジトリルートからの相対パスをここに入力してください。
• indexファイル：シングルページアプリケーション（SPA）の場合は、サイトのデフォルトページを貼り付けてください。これは通常、index.htmlという名前のHTMLファイルになります。ユーザーがサイトのURLを入力すると、サイト上のシームレスなナビゲーションを確保するため、すべてのナビゲーショントラフィックがこのindexファイルを経由します。
• エラーファイル：シングルページアプリケーション（SPA）の場合、ナビゲーションエラーが生じた際にリダイレクトするファイルを指定することができます。

フレームワークの自動検出

package.jsonファイルで使用されている依存関係を確認し、フレームワークを自動的に検出します。以下のフレームワークのいずれかが検出された場合は、「ビルドコマンド」と「公開ディレクトリ」のフィールドが自動入力されます。また、リポジトリにyarn.lockファイルがあるかどうかを確認し、見つかった場合には、「ビルドコマンド」にはnpmコマンドではなく、同等のyarnコマンドが自動入力されます。

フレームワーク	ビルドコマンド	公開ディレクトリ
Astro	yarn build npm run build	dist
ElderJS	yarn build npm run build	public
Gatsby	yarn build npm run build	public
Next.js	yarn build npm run build	out
Nuxt	yarn generate npm run generate	.output/public
React (+ Create React App)	yarn build npm run build	build
React (+ Vite)	yarn build npm run build	dist

自動検出されるフレームワークに追加したいフレームワークをご利用の場合は、カスタマーサポートまでチャットにてご連絡ください。

環境変数

環境変数を使うことで、API キーなど、明確なテキストとしてコードに記述すべきでない情報をビルドプロセスに付与することができます。環境変数のキーと値のペアを追加してください。環境変数は、サイト作成後に設定ページで追加、編集、削除可能です。

最後に「サイトを作成」をクリックして、サイトのデプロイを開始します。

サイトに移動する

サイトのデプロイが完了したら、MyKinstaの「静的サイト」の一覧から該当のサイトを選択し、画面右上の「サイトに移動する」をクリックすると、サイトにアクセスすることができます。