こんにちわitohです。みなさんAstroは使ってますか？
私はWeb制作がメインの業務なのですが、WP50%Astro50%くらいの割合でいつもサイトを作っています。
表題の通り、今回AstroをbuildしたときにCMSから画像を取得するパッケージを作ってnpmに公開してみました。

Contribute to WALKAL0NE/astro-get-remote-img development by creating an account on GitHub.

使い方

インストール

npm install astro-get-remote-img

bun install astro-get-remote-img

astro.config.jsのintegrationsに追加してください。

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を利用することが多くあります。

女の子と音楽、イラストやアニメーションを作ります。

coalowl.com

写真に落書きする2人組アーティスト / A Duo Artist who Graffiti on Photos

sara2626.com

Hello, my name is in.I draw pictures occasionally and think about trivial things everyday.I like the blue of the sky and air.Im looking forward to meeting you. こんにちはinといいます。偶に絵を描きつつ日々くだらないことを考えています。空や空気の青が好きです。よろしくお願いします。

www.inoften.com

ただ、microCMSなどのヘッドレスCMSは無料枠の場合、月に20GBと制限を受けるケースが多くクリエイターの方が何かしら作品をリリースするたびに画像の取得だけで超えてしまうケースが多くありました。

これはサイトをSSGで公開したところで否応にして付きまとう問題です。CMSの画像自体はCMSのサーバーから取得するため当たり前にあることです。

またセキュリティを謳っておきながらどこのヘッドレスCMSを使っているのかがimgタグをみてしまえばわかってしまいます。

また、もしもCMSがサーバーダウンした際に、テキストコンテンツはDOMに流しているので見ることはできるが画像は見れなくなった！というケースも過去にありました。

だったらサイトをビルドした際に画像をdistフォルダに含めてしまおう。というのが今回のパッケージの目的です。
ビルドした際に画像をダウンロードし、配信するときはCMSがあるサーバーではなくVercelやCloudflareといったホスティングサーバーです。

新たに課金したCloud Maxを使って仕様を定義してあげると早速作ってくれました。人生で初めてnpmのパッケージを公開したのですが、~~ジェバンニ~~Cloud codeが一晩でやってくれました。

こここうした方がいい。この機能が欲しいといった要望も時間があればなるべく答えていきたいとは思っているので、ぜひここのコメントかissueに優しい言葉使いで書いてくれると嬉しいです。

終わり

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

使い方

なぜ作ったのか