Astro + Svelte + Cloudflare Pages を試す

触ってみたかったサービス・技術をまとめて試してみる

メインはAstroで、静的ページを作成する際の技術を素振りする。

他に組み合わせる技術は以下の通り:

• Svelte: コンポーネント作成
• Cloudflare Pages: デプロイ先
  (なんか試したら追加するかも)

Astro セットアップ

公式ドキュメント に沿ってやっていく。日本語翻訳が一部用意されているようだ。

1. セットアップウィザードの実行

$ yarn create astro

今回は yarn を使う。

2. 実行

❯ yarn dev
  🚀  astro  v1.4.0 started in 24ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

指定されたURLでブラウザを開くとページが見られた。

Svelte を入れる

Astroは、ReactやVueなどのUIライブラリを組み合わせることができる。
今回はSvelteを使ってみる。

でも正直Astroファイルによるコンポーネントでも十分に書けるとは思う。
他のUIライブラリを使うべきケースは、どうしても使いたいUIライブラリがあるとか、複雑なUIロジックが必要とか、AstroからReactに移行する予定がある、とかかなぁ？

Svelteインテグレーションを導入

公式ドキュメント に従う。

1. Astro公式が用意している Svelteインテグレーションライブラリをインストールする

$ yarn astro add svelte

ウィザードに従うと、自動でAstroの設定ファイルを書き換え、svelteインテグレーションが適用されるようになっている。

import svelte from '@astrojs/svelte';

export default {
  // ...
  integrations: [svelte()],
}

めっちゃ簡単だな。

Svelteコンポーネントを作成する

AstroのレポジトリにExampleがある ので、svelteコンポーネントを拝借してみる

<script lang="ts">
	let count = 0;

	function add() {
		count += 1;
	}

	function subtract() {
		count -= 1;
	}
</script>

<div class="counter">
	<button on:click={subtract}>-</button>
	<pre>{count}</pre>
	<button on:click={add}>+</button>
</div>
<div class="message">
	<slot />
</div>

<style>
	.counter {
		display: grid;
		font-size: 2em;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: 2em;
		place-items: center;
	}

	.message {
		text-align: center;
	}
</style>

<slot /> は Reactでいう {children} のようなもので、子コンポーネントがslotタグ部分に入る。

AstroページにSvelteコンポーネントをImportしてみる

---
import Counter from '../components/Counter.svelte';
---
:
(省略)
:
<Counter client:visible>
  <h1>Hello, Svelte!</h1>
</Counter>

普通にSvelteコンポーネントが実行される。すごい。
client:visible についてはこちらのドキュメント を参考に

Astro を Cloudflare Pages にデプロイ

Astro公式ドキュメント にはたくさんのデプロイ先のガイドが用意されている。
今回はCloudflare Pagesにデプロイしてみる。

事前準備

• Cloudflare Pagesのアカウント作成
• AstroプロジェクトのGitHubレポジトリを作成してPushしておく

デプロイ

基本的にドキュメント通り でデプロイできた。

1. Cloudflare の管理画面でプロジェクトを作成し、GitHubレポジトリを接続
2. フレームワークとして Astro を選択
3. ビルド設定はそのまま、環境変数だけ NODE_VERSION=v16.13.0 を追加
4. 保存してデプロイ

かんたん。