SvelteKit + Azure StaticWebApps で SSGなサイトを構築する

はじめに

つい先ほど"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を以下のように編集します。

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を作成します。

+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をちょっと変更します。

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,
			},
		}
	},
});