ビルドとデプロイ

ministaは、ビルドで生成した静的ファイルを公開します。本番環境でministaやNode.jsのサーバーを起動し続ける必要はありません。

設定までの最小構成で、トップページをビルドし、出力の確認から公開までの手順を紹介します。

Table of Contents

• ページを検査する
• 本番用ファイルを生成する
• ビルド結果を確認する
• 静的ホスティングへ公開する
• サブディレクトリへ公開する
• 相対パスで公開する
• 出力先や納品形式を調整する

ページを検査する

公開前にページ構成を検査します。

npx minista check --json
npx minista inspect --json

checkはページやルートの問題を検査し、inspectはプロジェクトの構成を表示します。ページのデータ取得処理も実行するため、APIなどを利用する場合は必要な環境変数を用意してください。データ取得の仕組みはページへデータを渡すで紹介します。

TypeScriptの型チェックを行う場合は、別途実行します。

npx tsc --noEmit

本番用ファイルを生成する

npm run build

buildスクリプトにはminista buildを設定します。標準の出力先はdist/です。最小構成では、トップページのHTMLが一つ生成されます。

dist/
└── index.html

出力内容はページやプラグインの設定によって変わります。public/のファイルも出力先へコピーされ、draft: trueのページは除外されます。

APIやCMSから取得したデータは、このビルド時点の内容です。公開後に元のデータを更新したら、再ビルドして成果物を更新します。

ビルド結果を確認する

npm run preview

previewスクリプトにはminista previewを設定します。表示されたURLでトップページを確認します。画像やリンク、Islandなどを追加した後も、ここで表示や動作を確認できます。previewは生成済みファイルの確認用で、変更を自動ビルドするコマンドではありません。

静的ホスティングへ公開する

ホスティングサービスのビルド設定には、次を指定します。

手動で配置する場合も、dist/の中身を公開先へコピーします。拡張子を省略したURLや404ページの扱いは、ホスティング側で設定します。例えばabout.htmlを/aboutで配信するかは、公開先のルールに依存します。

存在しないURLへの案内を用意する方法は、404ページで紹介します。

サブディレクトリへ公開する

https://example.com/site/のように公開する場合は、baseを設定します。

import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  base: "/site/",
  plugins: [pluginSsg()],
})

Viteで処理されるアセットと、SSGのHTML内にあるpublic実ファイルへの参照URLにはbaseが反映されます。public参照の対象属性と制限も確認してください。通常のページへのリンクには、自分で公開パスを付けます。

<a href={`${import.meta.env.BASE_URL}about`}>私たちについて</a>

import.meta.env.BASE_URLは、Viteのbaseの値を参照するための変数です。この例では"/site/"となり、リンク先は/site/aboutになります。公開先に合わせてbaseを変えると、リンクの先頭部分も変わります。aboutの先頭に/を付けずに連結してください。

このリンクは、公開先がabout.htmlを/aboutで配信する場合の例です。HTMLファイルへ直接リンクする場合は、aboutをabout.htmlに変更します。

baseはページの配置を変更する設定ではありません。dist/の内容は公開先/site/の場所へ設置してください。

相対パスで公開する

公開先のディレクトリが決まっていない場合は、base: "./"を指定できます。

出力されたアセットへの参照が相対パスになるため、dist/内の構成を保ったまま別のディレクトリへ配置できます。

import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  base: "./",
  plugins: [pluginSsg()],
})

Viteで処理されるアセットと、HTML内のpublicファイルへの参照は、出力先の階層に合わせて調整されます。例えばpublic/logo.svgを/logo.svgで参照すると、ビルド後は次のようになります。

通常のページリンクは自動調整されません。また、import.meta.env.BASE_URLは"./"となり、ページの階層に応じて"../"に変わることはありません。ページ間のリンクは、表示するページのURLからの相対パスで記述します。

<a href="./about.html">私たちについて</a>

<a href="../about.html">私たちについて</a>

出力先や納品形式を調整する

出力ディレクトリはbuild.outDirで変更できます。

import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  plugins: [pluginSsg()],
  build: { outDir: "output" },
})

納品用にHTMLを整えたり、ZIPへまとめたりする場合は、納品コードの整形と納品用アーカイブを参照してください。ファイル名のハッシュや圧縮設定は設定リファレンスで紹介します。

次はファイルベースルーティングで、会社情報やお知らせのページを追加します。