4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2024-01-22

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

先日、静的サイトジェネレーター 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/ で確認してみましょう。

localhost_8788_.png

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

npm run pages:deploy

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

以上です。

備考

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

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?