Astroビルド先の変更方法！手順とポイントを解説

はる

Astroをメインの開発環境に移行していってるはるです。
いろんな環境でAstroを使っています。ビルド先を変更したい時の設定を紹介します。

今回のやりたいこと

Astroのフォルダはresourceフォルダ（resource/bar/）に入っているとして、
書き出し先がhtmlフォルダ内だとして、
その書き出しフォルダ内で特定の階層を指定し書き出したい場合(html/foo/bar/)を想定します。

yarn build した後、デフォルトのビルド先は /dist/ フォルダかと思います。
そのビルド先を階層指定して出力先を指定します。

例えば、https://hoge.fuga というサイトの https://hoge.fuga/foo/bar/ というページは以下のサイトを作りたい時の設定です。

設定方法

astro.config.mjs の編集

astro.config.mjs ファイルがAstroのプロジェクトフォルダ内にあるのでそのファイルを下記のように修正します。
今回の構成だと、resouce/bar/astro.config.mjs にあります。

export default defineConfig({
  outDir: '../../html/foo/bar/', // 追記
  base: '/foo/bar', // 追記
});

このようにbase を設定することで、yarn dev した時に、localhost/foo/bar/ でローカル開発が行えます。

outDir は、yarn build した時に、今回の例だとプロジェクトフォルダ/html/foo/bar/ に静的ファイルが出力されるようになります。