思い立ったが吉日。今すぐ構築するよ。
ざっくり用語解説RTA
Astro
コンテンツ駆動でReactでもVueでもSvelteでも組み込めちゃうマルチフレームワーク
https://astro.build/
Svelte
すごいコンパイラ型フロントエンドフレームワーク。書き味は宣言的UIの系譜の中ではシンプル路線
https://svelte.jp/
SST ion
CDKをパージして旧来の限界を越えようとしている次バージョンのSST
（現行のSST v2はCDKをベースにしたAWSサーバレス開発キット）
https://ion.sst.dev/docs/
用語が頭に入ったら、さっそく構築していくよ。
Astro + Svelte + Tailwind CSS + SST ion構成でサーバレス開発を行うスターターキットを用意する
筆者の好みにより、表題に加えTailwind CSSも統合するよ。
前提として、aws configureは実施しておいてね。AWSのプロファイルを指定したい人は各自読み替えてください。
事前準備
BunとSST ionをインストールするよ。SST ionを開発している中核のコントリビューターはBun推しみたいで、開発途上のせいか、Bunではなくnpmを使うと予想外のバグが……ってことがある。 そうなるとSST公式Discordをエラーメッセージで検索しながら苦しむことになるから、最初から素直にBunを使っておくのが手っ取り早い。 将来の正式リリース時には解消されているだろうけど、そういうわけだから今はBunを使って進めるよ。
# Bunのインストール
curl https://bun.sh/install | bash
# SST ionのインストール
curl -fsSL https://ion.sst.dev/install | bash
雛形作成
一気にコマンドで雛形を作っていくよ。
Astro雛形作成以降は、全てAstroプロジェクトのルートディレクトリで実行する前提だから注意してね。
SST ion + Astroは下記参照。
さっそく実行していこう。
# Astro雛形
bun create astro@latest
# AstroへのSvelte統合
bunx astro add svelte
# AstroへのTailwind CSS統合
bunx astro add tailwind
# Astro構成のSST ion初期化
sst init
それからAstroの設定ファイルで、SvelteとTailwind CSSを統合するよう記述する。
import { defineConfig } from "astro/config";
import aws from "astro-sst";
import svelte from '@astrojs/svelte';
import tailwind from "@astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
output: "server",
adapter: aws(),
integrations: [svelte(), tailwind()]
});
これで完成！ 動作確認してみるよ。
動作確認
まずはSST開発モードでの動作確認。
bun dev
問題なく動く。もしSST ionでAPIも構築していればLive Lambda機能によりローカルのAPIのコードを本物のAWS Lambdaのコードとして実行しながら動作確認したりできるけど、今はAstroプロジェクトの雛形のみだから、単にローカルで動かしているのと同じだ。
次はAWSへのデプロイ。
sst deploy
初回はちょっと時間がかかる。デプロイが完了すると、下記構成でAWS上にAstroプロジェクトがリリースされる。
- Amazon CloudFront
- AWS Lambda Function URLs
- Amazon S3
実際にデプロイ完了時に表示されたURLにアクセスしてみると...
ちゃんと動いてる！
これでAstro + Svelte + Tailwind CSS + SST ionの雛形プロジェクト作成はおしまい！ 実際に雛形を編集してSvelte製コンポーネントを動かしたり、Tailwind CSSでスタイリングすることも可能な状態になっているよ。
あとは自分のプロジェクトをがんがん作り込んでいこう。
要点まとめ
- SST ionでトラブルの遭遇を回避したいなら正式リリースまでBun推奨
- Astroに何か統合したいなら
astro add svelte等の便利コマンド実行して、astro.config.mjsに追記すればOK - SST ionはAstroプロジェクトのルートディレクトリで
sst initすれば一発でAstro構成の初期化が完了する
おまけ
デプロイしたリソースをAWS上から破棄したければ下記コマンドで実行可能だよ。
sst remove
筆者プロフィール
Kenpal株式会社でITエンジニアとして色々いじってる faable01 です。
ものづくりが好きで、学生時代から創作仲間と小説を書いたりして楽しんでいたのですが、当時はその後自分がIT技術者になるとはつゆ程も思っていませんでした。紆余曲折あり、20代の半ばを過ぎた頃に初めてこの業界と出会った形です。
趣味は「技術記事を口語で書くこと」です。
業務日報SaaS 「RevisNote」 を運営しています。リッチテキストでの日報と、短文SNS感のある分報を書けるのが特徴で、組織に所属する人数での従量課金制です。アカウント開設後すぐ使えて、無料プランもあるから、気軽にお試しください。