Astro + Tailwind CSS + Cloudflare Pages のプロジェクトを準備する

こんにちは。ご無沙汰しております。

先日、静的サイトジェネレーター Astro で web ページを作って、Cloudflare Pages にアップしたいと、ふと思い立ちました。今回 CSS フレームワークには Tailwind CSS を使ってみたいと思います。

参考文書は以下の通りです。

1. Deploy an Astro site · Cloudflare Pages docs
2. @astrojs/tailwind | Astro Docs
3. Install Tailwind CSS with Astro - Tailwind CSS

上の資料を読めばプレビューやデプロイまで進めるのですが、一部つまずいた部分もあったので、手順を整理してみました。下記の通りに進めてみます。

（2024.1.22 現在の情報です。将来、後述の手順が変更になる可能性があります）

必要なもの

• お好みのターミナル
• Node.js
• Cloudflare のアカウント

実践

まず、ターミナルでご希望のディレクトリまで移動して、Astro のプロジェクトを作成します。テンプレートに with-tailwindcss と指定することで、Tailwind CSS 機能拡張が入り、軽いサンプルページが作られるので、丁度いい足掛かりになると思います。

npm create astro@latest -- --template with-tailwindcss

ダイアログで「dir: Where should we create your new project?」と聞いてくるので、お好みのディレクトリを指定します。終わったら、指定したディレクトリに移動します。your-apps はディレクトリ名ですので適宜置き換えてください。

cd your-apps

次に Astro の Cloudflare Pages 用機能拡張を追加します。

npx astro add cloudflare

次に Cloudflare の CLI ツール、Wrangler をインストールします。

npm install -D wrangler

ここまで終わったところで、package.json の scripts 部分を以下のように書き換えます。

package.json

  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "npx astro",
    "wrangler": "npx wrangler",
    "pages:dev": "wrangler pages dev --compatibility-date=2024-01-17 -- astro dev",
    "pages:deploy": "astro build && wrangler pages deploy ./dist"
  },

"pages:dev"、"pages:deploy"を加えることで Astro と Wrangler が連携して、ローカルプレビューと公開ができるようになります。

次に Wrangler で Cloudflare にログインします。

npx wrangler login

ここまでで準備はおわりです。.astroファイルなどをお好みに書き換えてみてください。ローカル環境でプレビューするには、次のコマンドを入力します。

npm run pages:dev

http://localhost:8788/ で確認してみましょう。

上のようなページが表示されれば大丈夫です。公開は下記のコマンドを入力します。

npm run pages:deploy

ダイアログに従い、新しいプロジェクトを作成、または既存のプロジェクトを選んで、公開します。

以上です。

備考

通常、Astro でビルドすると、dist フォルダにファイル一式を出力 (SSG) しますが、Cloudflare 機能拡張を使う場合、Astro は server モードで出力 （SSR） します。