Astro環境でnote記事一覧を事前ビルドして表示する方法
noteのRSSはCORS対応されておらず、サーバーサイドで記事情報を取り込む必要があります。AstroはSG（Static Generation）を得意としたフレームワークであるため、ビルド時に外部APIなどから情報を取得し、コンテンツを生成できます。
そのため、今回のnote記事出力に関しても事前ビルド時点で記事情報が取得できるため、CORSの影響を受けずにコンテンツ反映が可能となります。
目標設定
note記事一覧情報をビルド時に取得し、自サイトに静的反映することを目指します。
GitHubに本記事で紹介するプロジェクトのソースコードを公開しています。記事内容の補助などでご活用ください。
Astroプロジェクトのセットアップ
以下コマンドを実行し、ローカル環境にプロジェクトを作成します。
pnpm create astro@latest
プロジェクト選択では「Empty」を指定し、必要最低限のスケルトンな状態でセットアップします。TypeScriptの利用は「Yes」で進めます。
RSSフィードの取得
まずnoteのRSSフィード取得と加工を行うために必要なパッケージをインストールします。
- axios: HTTP通信の処理記述を簡易化するライブラリ
- xml2js: XMLをJavaScriptオブジェクトへ変換するライブラリ
pnpm add axios xml2js
src配下にlibフォルダーを作成します。その中にextractArticles.tsとfetchNoteRss.tsを作成します。
.
├── dist
├── node_modules
├── public
└── src
├── components
├── lib
| ├── extractArticles.ts
| └── fetchNoteRss.ts
└── pages
fetchNoteRss.tsの作成
fetchNoteRss.tsではRSSフィードを指定されたURLから非同期にフェッチし、JSON形式に変換して返す処理を記述します。
extractArticles.tsの作成
extractArticles.tsでは取得したRSSフィードのJSONから記事情報を抽出する処理を記述します。
コンポーネントの作成
componentsフォルダーを作成し、RSSフィードをHTMLとして出力するコンポーネントファイルを作成します。
RssFeed.astroを作成し、記事情報をコンポーネントで取得する処理を記述します。
noteのRSSは以下のようにURL末尾でrssを付与することで取得できます。
RSS_URLは取得したいURLに変更してください。
---
import { fetchNoteRss } from "../lib/fetchNoteRss";
import { extractArticles } from "../lib/extractArticles";
const RSS_URL = "https://note.com/yonemoto/rss";
const data = await fetchNoteRss(RSS_URL);
const articles = data ? extractArticles(data) : null;
---
記事一覧の出力確認
ビルドを実行し、ローカル環境で動作確認をしてみましょう。
pnpm build
pnpm dev
デモサイトのように記事情報が出力できていればOKです。
事前ビルドの課題
コンテンツを静的に事前ビルドすることで、素早くコンテンツをユーザーに届けることはできますが、今回の手法では最新の記事情報を常に表示することは難しくなります。
コンテンツの即時反映を期待しなくても良いのであれば、定期ビルドを行うことが検討できるでしょう。この記事では定期ビルドの詳細については触れませんが、以下リンク先の内容などを参照いただけると幸いです。
もし即時反映が必要な場合はSSRや次のような方法を検討してみてください。
Discussion