AstroでLPを作った話

はじめに

CosmemoのフロントエンドはReact + ViteというモダンSPAの王道構成で作っています。

LPを作るにあたってフロントエンドの1コンポーネントとして作る手もあったんですが、Astroを選んだのでその理由と使ってみた感想をまとめました。

一番の理由は、最近流行りの技術を触ってみたかったからです。
・・・個人開発だとそれでOKですが、仕事でこれを言うと通らない可能性がありますね。採用理由を後付けで考えてみました。

大前提、LPの要件はアプリ本体と全然違いますよね。

よく言われますが、ReactのSPAはJSが全部ロードされるまでコンテンツが表示されない = SEO的には不利になりがちみたいです。
ほぼ動的な要素がないのに、JSバンドルサイズが大きくなるのもちょっと損してる感じがします。

そこでAstroです。 SSGを基本としているので、CloudFrontのようなエッジサーバーと組み合わせることで爆速にコンテンツを届けることができます。

SEOを意識したLPという文脈で考えると、エコスシテムも含めてWordPressが強いのは今でも変わらないかもしれません。

しかし、Astroで少しコードを整備すれば、軽い・速い・マークダウンで記事書ける、というストレスフリーなコンテンツ配信環境を整えることができます。

今は使用していませんが、Island ArchitectureというReactやSvelteといったJS界隈のコンポーネントを部分的に使用できる、というすごい機能もあるみたいです。

この柔軟性により、AstroはReact、Preact、Svelte、Vue、SolidJSなど複数のUIフレームワークをサポートします。アイランドは独立しているため、1ページ内で複数フレームワークを混在させることもできます。

Astroを母艦に、React/Svelte/Qwikみたいな使いたいフレームワークてんこ盛りも可能です。激アツですね。

こういう感じの理由で、CosmemoのLPではAstroを採用しています。

html+cssの静的サイトを作る感じで作れてしまいます。
Reactの様にjsxのお作法を学ぶ必要もありませんし、今まで静的なサイトを作ってきたのであればそのまま使える感じだと思います。

個人的には、php+apacheの様なSSR配信環境とメンタルモデルが近かったです。
基本的にhtmlでページを作成、インタラクティブな要素を追加したい時はJSを書く、といった感じですね。

Cosmemo LPでは生のcssを書くのはちょっとしんどいよなあ、ってとこがあったので、tailwindを導入しています。

Reactを使う時に悩みがちなUI Library周りを悩まずに済む、というのもメリットかもしれません。

Astroはブログがとても書きやすいです。具体的には、以下の機能によってコンテンツの管理がフレームワークに乗っかることができます。

AstroにはContent Collectionsという仕組みがあって、マークダウンファイルをそのままコンテンツとして管理できます。

src/
└── content/
    ├── blog/
    │   └── blog_no_kiji.md
    └── config.ts

config.tsでタイトルや日付、タグのスキーマを定義しておくと、型安全にフロントマターを扱えます。書いた記事をgetCollection('blog')で一発取得できるので、一覧ページの実装もシンプルです。

タグ機能も、フロントマターにtags: ["tech"]と書いておけば、あとはフィルタリングするだけです。特別なプラグインを入れる必要もなく、Astroの機能だけで完結するのが気持ちいいポイントです。

記事を書くときはVSCodeでマークダウンをそのまま編集、npm run devでローカルプレビューしながら確認できます。
CMSいらずで、gitで記事のバージョン管理もできてしまうので、しっくりくる環境だと思います。

CosmemoのLPはS3 + CloudFrontで配信しています。

Astroのビルド成果物（静的ファイル）をS3バケットに置いて、CloudFrontをCDNとして前段に挟む構成です。

[ユーザー] → [CloudFront] → [S3バケット]

S3単体だと静的サイトホスティングはできるものの、HTTPSが使えなかったり、配信速度がそこまで速くなかったりします。 CloudFrontを挟むことで、エッジロケーションからコンテンツを配信できるので、ページの読み込みがとても速くなります。

デプロイはastro buildでdist/を生成して、S3にアップロードするだけ。
CloudFrontのキャッシュ無効化をセットで実行すれば、すぐに最新の内容が反映されます。

Astroと相性がいい配信環境はほかにもあって、cloudflareやVercelなど簡単にデプロイできるサービスもいろいろありそうです。
ただ、すでにAWSのインフラを使っているならS3+CloudFrontにまとめた方が管理がシンプルになります。自分はそっちを選びました。

全体的に、とても開発者体験の良いフレームワークです。

ぜひ、Astroでブログのような静的配信コンテンツサイトを作成してみてください。