思い立ったが吉日。今すぐ構築するよ。

ざっくり用語解説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を統合するよう記述する。

astro.config.mjs

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感のある分報を書けるのが特徴で、組織に所属する人数での従量課金制です。アカウント開設後すぐ使えて、無料プランもあるから、気軽にお試しください。