Azure Static Web Apps で次世代フロントエンドツールの Vite と swa cli について学んでみた

Azure Static Web Apps のクイックスタートを読んでいると、Vite という次世代フロントエンドツールがあるらしく、これは何だろうと試してみたくなりました。また、swa cli で Azure Static Web Apps にデプロイする方法も、実際やってみないとわからないので試してみました。

ローカルで Vite アプリの作成

bash

prefix=mnrswadev
region=eastasia

npm create vite@latest $prefix -- --template=vanilla

cd $prefix

npm install

npm run dev

open http://localhost:5173/

Vite のドキュメントを読むと template で指定している vanilla 以外にも、下記のテンプレートがあるようです。

vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts

ローカルで Vite アプリを確認

Azure に Static Web App を作成

bash

az group create \
  --name ${prefix}-rg \
  --location $region

az staticwebapp create \
  --name ${prefix} \
  --resource-group ${prefix}-rg \
  --location $region

ローカルの Vite アプリを初回デプロイ

bash

cat <<EOF > staticwebapp.config.json
{
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}
EOF

npm install -D @azure/static-web-apps-cli

npx swa init --yes

npx swa build

npx swa login --resource-group ${prefix}-rg --app-name ${prefix}

npx swa deploy --env production

open https://$(az staticwebapp show \
  --resource-group ${prefix}-rg \
  --name ${prefix} \
  --query defaultHostname \
  --output tsv)

Azure で Vite アプリを確認

2 回目のデプロイ準備

アプリが更新された事を確認するため、counter.js の count is を カウンターの値： に変更します。

counter.js

export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `カウンターの値： ${counter}`
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}

2 回目以降のデプロイを試す

bash

npm run dev

open http://localhost:5173/

npx swa build

npx swa deploy --env production

open https://$(az staticwebapp show \
  --resource-group ${prefix}-rg \
  --name ${prefix} \
  --query defaultHostname \
  --output tsv)

2 回目のアプリ更新を確認

検証後の片付け

bash

az group delete \
  --name ${prefix}-rg \
  --yes

参考