Open4

Astro + Svelte + Cloudflare Pages を試す

ピン留めされたアイテム
koshikoshi

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

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

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

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

Astro セットアップ

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

  1. セットアップウィザードの実行
$ yarn create astro

今回は yarn を使う。

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

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

koshikoshi

Svelte を入れる

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

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

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

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

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

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

astro.config.mjs
import svelte from '@astrojs/svelte';

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

めっちゃ簡単だな。

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

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

src/components/Counter.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 についてはこちらのドキュメント を参考に

koshikoshi

Astro を Cloudflare Pages にデプロイ

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

事前準備

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

デプロイ

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

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

かんたん。