[2023年2月版]Astro 2 さくっと Vercel チャレンジ

万能 SSG の予感がする Astro2 に入門してみる。

Astroは静的サイトジェネレーターの1つで、React、Svelte、Vueなどのフレームワークをサポートを謳っています。
MDX、TypeScript、CSSなどのさまざまな言語を使用してWebサイトを構築することができ、高速かつ簡単にプロトタイプを作成することができるらしいです。

公式サイト: https://astro.build/
ドキュメント: https://docs.astro.build/en/getting-started/

公式ドキュメントの Getting Start には心躍るフレーズが並んでいます。

主な機能
コンポーネント アイランド:より高速な Web サイトを構築するための新しい Web アーキテクチャ。
サーバー ファーストの API 設計:ユーザーのデバイスから高価なハイドレーションを取り除きます。
デフォルトでゼロ JS: JavaScript ランタイムのオーバーヘッドがなく、速度が低下します。
エッジ対応:どこにでもデプロイできます。Deno や Cloudflare などのグローバル エッジ ランタイムも使用できます。
カスタマイズ可能: Tailwind、MDX、および 100 以上のその他の統合から選択できます。
UI に依存しない: React、Preact、Svelte、Vue、Solid、Lit などをサポートします。

いや、Google翻訳したらむしろ伝わらないけど・・・

とにかく、Svelte や Vue に Markdown が混ぜられて静的なコンテンツの事前レンダリングと動的なコンポーネントが同居できるなんて、なんてこった！！なフレームワークです。

インストール不要。すぐ、動く。

ガイド: https://docs.astro.build/en/install/auto/

こちらのインストールガイドに従ってとっととインストールします・・・？

$ npm create astro@latest

╭─────╮  Houston:
│ ◠ ◡ ◠  Let's claim your corner of the internet.
╰─────╯

 astro   v2.0.14 Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro_sample_project

  tmpl   How would you like to start your new project?
         Include sample files
      ✔  Template copied

  deps   Install dependencies?
         Yes
      ✔  Dependencies installed

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./astro_sample_project 
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

ん～。。。なんかもダイアログに従って入力していくだけで、プロジェクト作っていろいろ入れてくれたような。。。
これでセットアップ完了ですか。。。
で、npm run devしろと。

$ cd astro_sample_project
$ npm run dev 

> astro-sample-project@0.0.1 dev
> astro dev

  🚀  astro  v2.0.14 started in 63ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

で、ブラウザで http://localhost:3000/ 開けば開発中のサイトが表示されます。

index.astro を覗いてみる。

コンポーネントも yamlのヘッダー部分とHTMLでシンプル？ですね。。。

index.astro

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="Welcome to Astro.">
	<main>
		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
		<p class="instructions">
			To get started, open the directory <code>src/pages</code> in your project.<br />
			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
		</p>
		<ul role="list" class="link-card-grid">
			<Card
				href="https://docs.astro.build/"
				title="Documentation"
				body="Learn how Astro works and explore the official API docs."
			/>
			<Card
				href="https://astro.build/integrations/"
				title="Integrations"
				body="Supercharge your project with new frameworks and libraries."
			/>
			<Card
				href="https://astro.build/themes/"
				title="Themes"
				body="Explore a galaxy of community-built starter themes."
			/>
			<Card
				href="https://astro.build/chat/"
				title="Community"
				body="Come say hi to our amazing Discord community. ❤️"
			/>
		</ul>
	</main>
</Layout>

<style>
	main {
		margin: auto;
		padding: 1.5rem;
		max-width: 60ch;
	}
	h1 {
		font-size: 3rem;
		font-weight: 800;
		margin: 0;
	}
	.text-gradient {
		background-image: var(--accent-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 400%;
		background-position: 0%;
	}
	.instructions {
		line-height: 1.6;
		margin: 1rem 0;
		border: 1px solid rgba(var(--accent), 25%);
		background-color: white;
		padding: 1rem;
		border-radius: 0.4rem;
	}
	.instructions code {
		font-size: 0.875em;
		font-weight: bold;
		background: rgba(var(--accent), 12%);
		color: rgb(var(--accent));
		border-radius: 4px;
		padding: 0.3em 0.45em;
	}
	.instructions strong {
		color: rgb(var(--accent));
	}
	.link-card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
		gap: 1rem;
		padding: 0;
	}
</style>

いや、結構独特だけど。。

とりあえず push

Github の Web UI にて astro_sample_project を作り、ローカルのリポジトリをpushしてしまいましょう。

$ git remote add origin https://github.com/asopitech/astro_sample_project.git
$ git push --set-upstream origin master

はい、あとはゴリゴリ書いてコミット、ですね。

Vercel にて

Vercel は静的Webサイトや JAMstackアプリケーションのホスティングに特化しており、GitHubやGitLabなどのGitリポジトリと連携することで、ビルド・デプロイ・ホスティングを自動化することができます。また、Vercelは、Next.jsやGatsbyなどのフレームワークをサポートしており、高速な静的WebサイトやJAMstackアプリケーションを容易に作成できます。

今回は生成したばっかりの Astro サイトを Github から Vercel にあげてみましょう。

公式サイト: https://vercel.com/

ログイン後、"Add Github Account" でGithub アカウントを連携すればリポジトリ拾ってくれます。
今回は先ほど作ったばかりの astro-sample-project の行にある import ボタンをクリックします。

開いただけで Astro フレームワークを検知してくれます。
ビルドコマンドや出力先フォルダなど設定済みのため、このままデプロイをクリックでOKです。
（不安になるくらい簡単）

しばらくすると紙吹雪が舞ってデプロイ完了です。めっちゃ簡単やん。。。

https://astro-sample-project.vercel.app/

というわけでワールドワイドに公開完了です。

Vercel は git の push を監視しているので、手元で作業して push すればデプロイまで自動でやってくれます。
めっちゃ簡単やん。

あっけなく完了

これで初めての Astro2 サイトが Vercel でデプロイできてしまいました。
５分かかったかな？

確かに今後の開発はこんなペースでバリバリやっていかないとね！
というわけでした。