はじめに
つい先ほど"SvelteKit + Azure StaticWebApps で SSR なサイトを構築する"という記事を投稿しておりますが、今回はSSR(Server Side Rendering)ではなくてSSG(Static Site Generator)です。
Azure StaticWebAppsの裏側Functionをつかって、SSRという仕組みそのものはすごいものではありますが、ブラックボックスが増えると不安になるのも世の常。というわけで、SSGでの構築手順を、これから試される方、もしくはいずれ忘れる私向けに残します。
SSGの方は特にハマることもなくできました。
1. 環境準備
Nodejsとかgitとかはある前提です。
2. SvelteKitのプロジェクト作成(SSRと同じ)
SvelteKitの公式手順をもとにプロジェクトを作成します。
npm create svelte@latest フォルダ名
cd フォルダ名
pnpm install
# 動作確認
npm run dev -- --open
これでSvelteの動作確認ができました。特に選択肢はどれでもいいですが、わかりやすいSkeltonが個人的にはおすすめです。
3. SSGのアダプターを設定する
こちらの公式の案内にあるように以下を行います。
アダプターをインストールします。
pnpm i -D @sveltejs/adapter-static
次にsvelte.config.jsを以下のように編集します。
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
strict: true
})
}
};
次にSveltekitのプロジェクトのsrc/routesの直下に+layout.jsを作成します。
export const prerender = true; //これだけ
ここまででpnpm run buildでビルドすると、buildフォルダにSSGされたものが出来るようになります。
4. 自前の関数を追加する
プロジェクトのルートフォルダで以下を実行していきます。
func init api
cd api
func new --template "Http Trigger" --name nankanomethod
SSRの時と同じようにJSONを返すように、nankanomethod/index.jsをちょっと変更します。
module.exports = async function (context, req) {
context.log('JavaScript HTTP trigger function processed a request.');
const name = (req.query.name || (req.body && req.body.name));
const responseMessage = name
? "Hello, " + name + ". This HTTP triggered function executed successfully."
: "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";
context.res = {
status: 200, /* Defaults to 200 */
body: {message: responseMessage},
headers: {
'Content-Type': 'application/json'
}
};
}
あと同じく src/routes/+page.svelteを以下のように↑の関数を呼び出すボタンでも追加しておきます。
<script>
/**
* @type {string}
*/
let message ="first status"
async function callGET(){
message ="calling GET"
const response = await fetch('/api/nankanomethod')
const data = await response.json()
message = data.message
}
async function callPOST(){
message ="calling POST"
const response = await fetch("/api/nankanomethod", {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({name:"Taro Yamada"})
});
const data = await response.json();
message = data.message
}
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<div>
{message}
</div>
<button on:click={callGET}>GET</button>
<button on:click={callPOST}>POST</button>
ここまででコードは完成です。
5. GitHubにコードを上げる
GitHubでリポジトリ―作ってから、initしてadd remoteして、addしてcommitしてpush します。
6. Azure StaticWebAppsのリソースを作成する
Azure ポータルでStaticWebAppsを作成します。以下の設定だけは要注意です。
| property | value |
|---|---|
| アプリの場所 | ./ |
| APIの場所 | api |
| 出力先 | build |
あとは5.でつくったリポジトリ―を指定すればOKです。
7. 動作確認
SSRの時とおんなじ画面がでるだけなので省略します。動くと思います。
番外
開発環境向けにローカルでfunctionを実行してテストする場合は、プロキシー設定が必要です。'vite.config.js'にproxyを足します。
これをしておけば、apiフォルダでfunc startしておいて、ルートフォルダでnpm run dev -- --openとかやればローカル環境でもうまく連携されます。
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
//server部分を追加
server: {
proxy: {
'/api': {
'target': 'http://127.0.0.1:7071',
changeOrigin: true,
},
}
},
});