SSTで静的WebサイトをAWSにデプロイする

AWS CDKをラップした便利ツール「SST(Serverless Stack)」で静的Webサイトホスティングを実装するのがすごく簡単だったから紹介するよ。

※画像引用：https://sst.dev/

SST(Serverless Stack)って知ってる？

SSTはAWS CDKをラップして、さらに便利にしたIaC+開発ツールで、簡潔さとサーバレス開発のやりやすさが強み。

前にQiitaでこんな記事を書いたりもしたから興味ある人は読んでね。

【SSTことはじめ】SST（Serverless Stack）のLive Lambda Devで、ローカルでも動作確認できるAWS Lambda開発を体感してみる

今回は、そのSSTで静的サイトホスティングをやってみた。

とはいえ扱い方はすごく簡単（やってみたとか言えないくらい簡単）。

まずは下記でSSTアプリケーションの雛形を作成する。

# SSTアプリケーションの雛形作成
npx create-sst [アプリ名]
cd [アプリ名]
npm i

次に、packagesディレクトリ直下に静的Webサイトとしてホスティングしたいアプリケーションを構築する。今回はNext.jsで例示するけど、もちろんNuxtなど他のフレームワークでもOKだよ。

cd packages

# Next.jsで例示
npx create-next-app

Next.jsの中身をいじる部分は割愛するよ。（とりあえずoutディレクトリに静的Webサイト用の資材が生成される状態にしておく）

最後にSSTのStackに、静的Webサイトをデプロイするためのコードを実装する。これがすごくシンプル。

const site = new StaticSite(stack, "site", {
  path: "packages/[さっき作ったNext.jsのアプリ名]",
  buildOutput: "out",
  buildCommand: "npm run build",

  // もしカスタムドメインを持っていて静的サイトに割り振りたいなら
  // customDomain: "ドメイン名をここに書く",
});

// 下記はデプロイ後のURL出力用
stack.addOutputs({
  "SiteUrl": site.url,
});

これだけで実装完了。

あとは、SSTのデプロイコマンドを実行するだけ。

npx sst deploy --stage prod

これで静的WebサイトがAWS上にデプロイされた。

CDKでも実装できるけど、SSTの簡潔さは段違いだよね。

関連記事