HTML で納品するときは、Astro を使うといい

最近、html 納品があったので、Next.js のビルドでできるか試したところ相対パスの扱いや、スクリプトが動かないなどの原因で上手くいきませんでした。

それで色々試したところ Astro で綺麗に html 出力できたので覚書として残しておきます。

Astro とは？

Astro は、軽量で高速な静的サイトジェネレーターです。非常に簡単な記述で html のようにポチポチ書いていけます。共通部分もコンポーネントとして切り出せるので、沢山のページがある場合にも効率的に作れます。

なんといっても、Tailwind を使えるので CSS をほとんど書かなくて済む、というのが大きいですね。

また、不要な JavaScript を最小限に抑えることで、パフォーマンスが向上します。

Astro では最近のバージョンアップで、HTML の最適化やさまざまなプラグインが利用できるようになって、ますます柔軟な Web 開発ができるようになってきたなぁという印象です。

build 時の問題点

Astro を使ってビルドした際、相対パスの扱いに問題が発生することがあります。

ただ、これは当たり前の話で、Vercel などのホスティングサービスに置くことを前提としているからです。なので、レンタルサーバーなどのサーバーには最適化されてません。

具体的には、ビルド後の HTML ファイル内で生成されるリソースパスが絶対パスで記述されるため、ローカルで静的に HTML ファイルを納品する場合には相対パスに置き換える必要が出てきます。これを手動で行うのは手間がかかり、効率が悪いですよね。

普通にビルドした場合、以下のような手作業での置換が必要になります。

1. npm run build で dist フォルダが作成される。
2. /_astro/ を ./_astro/ に置換する。
3. /image/ を ./image/ に置換する。
4. CSS 内の /image/ を ../image/ に置換する。

これらの手順は時間がかかり、特に多くのファイルを処理する場合には非常に非効率です。そんなときは、astro-relative-links を使うことで効率的に相対パスを処理できます。

astro-relative-links の導入

astro-relative-links をインストールすることで、ビルド後の相対パスの問題が解決できます。このプラグインは、自動的にリソースのパスを相対パスに変換するため、手動での置換作業を省略できます。

以下のコマンドでインストールします。

astro.config.mjs

astro.config.mjs に以下を追加して、astro-relative-links を設定します。

HTML の最適化を無効にする

Astro 3.0 では、ビルド時に HTML の最適化がデフォルトで有効になっています。これは通常、自分でデプロイする際には便利ですが、納品用に最適化を無効にしたい場合もあります。その場合は、以下の設定を astro.config.mjs に追加することで HTML の最適化を無効にできます。

これにより、HTML ファイルがそのままの形でビルドされるため、手動でコードを編集したり、読みやすい状態で納品したりすることが容易になります。

CSS, JS, HTML などを圧縮

プロジェクトのパフォーマンスを向上させるために、CSS、JavaScript、HTML などを圧縮する astro-compress というプラグインを導入することができます。これにより、ファイルサイズを削減し、ページの読み込み速度を向上させることが可能です。

以下のコマンドで astro-compress をインストールします。

設定を行うことで、圧縮されたファイルが生成され、特にアクセスの多いページやリソースを多く含むページでパフォーマンスの向上が期待できます。詳細は公式ドキュメントをご確認ください。

astro-compress - npm

まとめ

Astro を使用した HTML の納品では、相対パスの処理や最適化の制御が重要なポイントになります。astro-relative-links を使うことで、相対パスの問題を自動的に解決でき、納品時の作業を簡略化できます。また、astro-compress を利用してファイルを圧縮することで、パフォーマンスを向上させることができます。