😀
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
参考
Discussion