ネットソリューション

Astroを使ってオウンドメディアを作る-1

calendar_month2024-07-05

突然ですが、弊社オウンドメディアを始めます！
~~だってAstroをつかってみたかったんだもの。~~

Astroとは

Astroは、静的サイトジェネレーターとして設計されたフレームワークです。
ReactやVueなどのようにコンポーネント設計・活用をしながら、ReactやVueとは違い最終的にはビルド用のJavascriptなどを除いた静的なHTMLファイル一式として出力されるため、そういった納品形式が求められるクライアントワークにも活用できるのではないかと個人的に大注目のフレームワークです。

今回のオウンドメディア作成では、上述したような静的HTML一式でのファイル納品に耐えうる出力結果を意識して進めましたので設定の一部を紹介します。

ビルド時asettsの保存場所を変更する

Astroはビルド時にViteを使用しているので、astro.config.mjsにViteのオプションを追加して対応します。
[name][extname]のようにすると画像以外はハッシュがつかない形での出力となりました。

export default defineConfig({
  //（略）
  vite: {
    build: {
      rollupOptions: {
        assetFileNames: assetInfo => {
          let extType = assetInfo.name.split('.').at(-1);
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'images';
          }
          if (/css|scss/i.test(extType)) {
            extType = 'css';
          }
          return `techblog/assets/${extType}/[name][extname]`;
        }
      }
    }
  }
});

src内の画像の保存場所を記事ごとに変更する

上記方法で画像の出力先を変更した場合、全ての画像がそのフォルダに格納されてしまいます。
これをなんとか、解決できないかと考えたのですが、ビルド時の引数assetInfoに特にディレクトリパスが含まれているわけでもないらしく……。

~~多少強引ですが~~、ビルドタスク内でファイル名に応じてディレクトリを変更することができました。
ファイル名の_を/に置き換えてディレクトリパスとしています。

export default defineConfig({
  //（略）
  assetFileNames: assetInfo => {
    if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
      const fileNameWithoutExt = assetInfo.name.split('.')[0];
      const directoryPath = fileNameWithoutExt.replace(/_/g, '/');
      return `techblog/assets/images/${directoryPath}.${extType}`;
    }
  }
});

例えば、ファイル名is_2024_05_post-1_main.jpgの画像はreplaceで下記のように置換され
is/2024/05/post-1/main.jpg
最終的には
dist/techblog/assets/images/is/2024/05/post-1/main_ZKNg2B.webp
のようにビルドされます。

src内の画像にはハッシュ値がつく

調べた感じだと仕様のようで……。
ただし、内部ではキャッシュを利用しているので更新の無い画像のハッシュが変更されることはないようです。
今回は社内用なので割り切りましたが、社外のお客様案件ではpublic内に画像を保存し、別途軽量化タスクを走らせるなどの工夫が必要かと思います。

.astro内でSCSS変数を使用する

.astro内でscssファイル内から変数を使いたいときはpreprocessorOptions内でimportしたいファイルを指定します。
注意としては各.astro（.scss）内に自動的にimportされるので変数宣言以外の記述があるとその記述はページ数だけ重複して出力されてしまいます。

export default defineConfig({
  //（略）
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "src/styles/imports/_mixins.scss", "src/styles/imports/_variables.scss";`
        }
      }
    },
  }
});