こんにちは。ご無沙汰しております。
先日、静的サイトジェネレーター Astro で web ページを作って、Cloudflare Pages にアップしたいと、ふと思い立ちました。今回 CSS フレームワークには Tailwind CSS を使ってみたいと思います。
参考文書は以下の通りです。
- Deploy an Astro site · Cloudflare Pages docs
- @astrojs/tailwind | Astro Docs
- 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 部分を以下のように書き換えます。
"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) します。