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

# はじめに
つい先ほど["SvelteKit + Azure StaticWebApps で SSR なサイトを構築する"](https://qiita.com/shyamagu/items/9651a77c4791ae1033e4)という記事を投稿しておりますが、今回はSSR(Server Side Rendering)ではなくてSSG(Static Site Generator)です。

Azure StaticWebAppsの裏側Functionをつかって、SSRという仕組みそのものはすごいものではありますが、ブラックボックスが増えると不安になるのも世の常。というわけで、SSGでの構築手順を、これから試される方、もしくはいずれ忘れる私向けに残します。

SSGの方は特にハマることもなくできました。

# 1. 環境準備

Nodejsとかgitとかはある前提です。

# 2. SvelteKitのプロジェクト作成(SSRと同じ)

[SvelteKitの公式手順](https://kit.svelte.jp/docs/creating-a-project)をもとにプロジェクトを作成します。

```bash
    npm create svelte@latest フォルダ名
    cd フォルダ名
    pnpm install
    
    # 動作確認
    npm run dev -- --open
```
これでSvelteの動作確認ができました。特に選択肢はどれでもいいですが、わかりやすいSkeltonが個人的にはおすすめです。

# 3. SSGのアダプターを設定する
[こちらの公式の案内](https://kit.svelte.jp/docs/adapter-static)にあるように以下を行います。

アダプターをインストールします。
```bash
pnpm i -D @sveltejs/adapter-static
```

次に`svelte.config.js`を以下のように編集します。
```javascript: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を作成します。
```javascript:+layout.js
export const prerender = true; //これだけ
```
ここまでで`pnpm run build`でビルドすると、buildフォルダにSSGされたものが出来るようになります。

# 4. 自前の関数を追加する
プロジェクトのルートフォルダで以下を実行していきます。
```bash
func init api
cd api
func new --template "Http Trigger" --name nankanomethod
```

SSRの時と同じようにJSONを返すように、`nankanomethod/index.js`をちょっと変更します。
```javascript: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`を以下のように↑の関数を呼び出すボタンでも追加しておきます。
```javascript
<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の時とおんなじ画面がでるだけなので省略します。動くと思います。

<br/>
<br/>
<br/>
<br/>
<br/>

# 番外
開発環境向けにローカルでfunctionを実行してテストする場合は、プロキシー設定が必要です。'vite.config.js'にproxyを足します。
これをしておけば、apiフォルダで`func start`しておいて、ルートフォルダで`npm run dev -- --open`とかやればローカル環境でもうまく連携されます。

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