🧤

ビルドする時にCMSから画像をダウンロードするAstroパッケージを作った。

2025/07/04に公開

!この記事に出てくるパッケージ作成にはAIを使っていますが記事の作成にはAIを使っていません。
こんにちわitohです。みなさんAstroは使ってますか？

私はWeb制作がメインの業務なのですが、WP50%Astro50%くらいの割合でいつもサイトを作っています。

表題の通り、今回AstroをbuildしたときにCMSから画像を取得するパッケージを作ってnpmに公開してみました。
https://github.com/WALKAL0NE/astro-get-remote-img

 使い方インストール
npm install astro-get-remote-img
or
bun install astro-get-remote-img
astro.config.jsのintegrationsに追加してください。
astro.config.js
import { defineConfig } from 'astro/config';
import getRemoteAssets from 'astro-get-remote-img';

export default defineConfig({
  integrations: [
    getRemoteAssets({
      url: 'https://images.microcms-assets.io',
      imageDir: './images',
    }),
  ],
});

// Or with multiple URLs
export default defineConfig({
  integrations: [
    getRemoteAssets({
      url: ['https://images.microcms-assets.io', 'https://newt.io'],
      imageDir: './images',
    }),
  ],
});
オプションは以下の通りです。

url (string | string[]): CMS画像サーバーのベースURL（複数可）。単一のURLでもURLの配列でもかまいません。

imageDir (string): ダウンロードした画像を保存するディレクトリ (デフォルト: './images')

 なぜ作ったのか私自身、趣味でクリエイターのポートフォリオサイトを作ることが多いのですが、クリエイターのサイトとなるとヘッドレスCMSを利用することが多くあります。
https://coalowl.com/
https://sara2626.com/
https://www.inoften.com/
ただ、microCMSなどのヘッドレスCMSは無料枠の場合、月に20GBと制限を受けるケースが多くクリエイターの方が何かしら作品をリリースするたびに画像の取得だけで超えてしまうケースが多くありました。
これはサイトをSSGで公開したところで否応にして付きまとう問題です。CMSの画像自体はCMSのサーバーから取得するため当たり前にあることです。
またセキュリティを謳っておきながらどこのヘッドレスCMSを使っているのかがimgタグをみてしまえばわかってしまいます。
また、もしもCMSがサーバーダウンした際に、テキストコンテンツはDOMに流しているので見ることはできるが画像は見れなくなった！というケースも過去にありました。
だったらサイトをビルドした際に画像をdistフォルダに含めてしまおう。というのが今回のパッケージの目的です。

ビルドした際に画像をダウンロードし、配信するときはCMSがあるサーバーではなくVercelやCloudflareといったホスティングサーバーです。
新たに課金したCloud Maxを使って仕様を定義してあげると早速作ってくれました。人生で初めてnpmのパッケージを公開したのですが、ジェバンニCloud codeが一晩でやってくれました。
こここうした方がいい。この機能が欲しいといった要望も時間があればなるべく答えていきたいとは思っているので、ぜひここのコメントかissueに優しい言葉使いで書いてくれると嬉しいです。
終わり

使い方

なぜ作ったのか

Discussion