登壇資料です https://vscode.connpass.com/event/221961/

1. #vscodejp
VSCode で始める
Azure Static Web Apps 開発
2021/11/20 VSCode Conference Japan
Yuta Matsumura

2. #vscodejp
松村 優大 (Yuta Matsumura)
Chief Technical Architect (C#, PHP, Azure)
Microsoft MVP (Developer Technologies)
#fukuten #devblogradio
@tsubakimoto_s
Currently working for

3. #vscodejp
https://fukuten.connpass.com/

4. #vscodejp
今日の内容
• Azure Static Web Apps について
• Azure Static Web Apps のローカル開発環境
• Azure Static Web Apps の CI/CD
対象
✓これから Azure Static Web Apps を始める方
✓開発環境やデバッグを効率化したい方

5. #vscodejp
ダイジェスト版は Qiita で公開しています
https://qiita.com/tsubakimoto_s/items/4939a6d6e647721309a3

6. #vscodejp
Azure Static Web Apps
• 静的な Web アプリケーションのホスティングに特化
• Azure Functions によるバックエンド API をサポート
• GitHub Actions, Azure DevOps での CI/CD をサポート 等
https://azure.microsoft.com/ja-jp/services/app-service/static/

7. #vscodejp
Azure Static Web Apps
• 静的な Web アプリケーションのホスティングに特化
▶ Laravel や ASP.NET 等のサーバーサイドアプリケーションは動きません
他にも様々なフレームワークのアプリをホストすることができます
https://docs.microsoft.com/ja-jp/azure/static-web-apps/front-end-frameworks
Angular React Vue.js .NET
(Blazor WebAssembly)

8. #vscodejp
Azure Static Web Apps
• Azure Functions によるバックエンド API をサポート
①マネージド
▶リソースは存在するが直接の操作は不可
※Free SKU & Standard SKU
②持ち込み
▶自身で作成した Functions を持ち込める
※Standard SKU のみ

9. #vscodejp
Azure Static Web Apps
• GitHub Actions, Azure DevOps での CI/CD をサポート
▶ Git リポジトリからのデプロイや Zip ファイルでのデプロイは未サポート
GitHub Actions
Azure Pipelines
***.yml
***.yml
Azure Static Web Apps

10. #vscodejp
Azure Static Web Apps
• 他にも便利な機能がたくさんあるのでオススメ
• カスタムドメイン設定可
• SSL 証明書が無料提供
• バックエンドルーティング制御
• プルリクエストを自動的に専用ステージにデプロイ
• 無料プランあり（主に個人利用）

11. #vscodejp
VS Code で開発環境を作ってみよう
• WSL2 (Ubuntu 20.04)
• Visual Studio Code
• 拡張機能: Remote Development
• 拡張機能: Azure Functions
• 拡張機能: Live Server
• Azure Functions Core Tools
※あくまで一例です。ご自身の使う言語に応じてカスタマイズしましょう。

12. #vscodejp
ざっくりとした手順
1. Azure Functions のプロジェクト作成 (=Web API)
2. Web アプリケーション作成 (=フロントエンド)
3. プロキシ設定と実行
4. 専用 CLI でもっと開発しやすく

13. #vscodejp
Azure Functions のプロジェクト作成
例：Nodejs Web API

14. #vscodejp
アプリと API のフォルダを作成 mkdir static-web-app-sample
cd static-web-app-sample/
mkdir app
mkdir api
code .

15. #vscodejp
Azure Functions のプロジェクトを作成
（VSCode 拡張機能もしくは CLI で）
$ cd api
$ func init
Select a number for worker runtime:
～中略～
3. node
～中略～
Choose option: 3
node
Select a number for language:
1. javascript
2. typescript
Choose option: 1
javascript
～中略～

16. #vscodejp
HTTP トリガーの関数を作成
（VSCode 拡張機能もしくは CLI で）
$ func new
Select a number for template:
～中略～
10. HTTP trigger
～中略～
Choose option: 10
HTTP trigger
Function name: [HttpTrigger] HttpTrigger1
Writing /home/tsubaki/src/static-web-app-
sample/api/HttpTrigger1/index.js
Writing /home/tsubaki/src/static-web-app-
sample/api/HttpTrigger1/function.json
The function "HttpTrigger1" was created
successfully from the "HTTP trigger"
template.

17. #vscodejp
とりあえず F5 デバッグ実行 $ func start

18. #vscodejp
Web アプリケーション作成
今回は素の HTML です

19. #vscodejp
app/index.html を作成
API を実行する JS コードを書く

20. #vscodejp
拡張機能: Live Server
開発環境向けの簡易的な Web サーバーを利用することが
できる拡張機能。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

21. #vscodejp
API が見つからない
localhost:5500 から localhost:7071 にある API にアクセスできず、
正しい API レスポンスを取得することができない。
▶プロキシの設定を行うことで対処する
HTTP 404 のレスポンス

22. #vscodejp
.vscode/settings.json に
Live Server プロキシ設定を行う
{
～中略～
"liveServer.settings.proxy": {
"enable": true,
"baseUri": "/api",
"proxyUri": "http://127.0.0.1:7071/api"
}
}

23. #vscodejp
Live Server を再起動・再読込
きちんと API がコールされる

24. #vscodejp
専用 CLI でもっと手軽に
https://github.com/Azure/static-web-apps-cli
npm install -g @azure/static-web-apps-cli

25. #vscodejp
Azure Static Web Apps CLI
swa start コマンド
コマンドの実行ディレクトリにおいて、API と Webアプリを
同時に実行することができる

26. #vscodejp
cd static-web-app-sample
swa start app --api-location api
※API のデバッグができない

27. #vscodejp
予め実行した API を CLI で指定する
VSCode で Functions をデバッグ起動したうえで API URL を指定する
swa start app --api-location http://localhost:7071

28. #vscodejp
Azure Static Web Apps にデプロイする

29. #vscodejp
デプロイ方法は 2種類
いずれも YAML ファイルでビルドやデプロイの構成を定義する
サービス リポジトリ CI/CD
GitHub GitHub GitHub Actions
Azure DevOps Azure Repos Azure Pipelines

30. #vscodejp
GitHub Actions の場合
日本リージョンはまだ
GitHub を選択
アプリケーションの種類
を指定 (React, Vue.js 等)
デプロイしたい
リポジトリを指定

31. #vscodejp
GitHub Actions の場合
リソース作成と同時にリポジトリに YAML ファイルがコミッ
トされ、GitHub Actions が動きデプロイが行われる。

32. #vscodejp
Azure Pipelines の場合
「その他」を選択
デプロイトークンを
控えておく

33. #vscodejp
Azure Pipelines での
Static Web Apps デプロイ構成
trigger:
- main
pool:
vmImage: ubuntu-latest
steps:
- checkout: self
submodules: true
- task: AzureStaticWebApp@0
inputs:
app_location: '/app'
api_location: '/api'
output_location: ''
azure_static_web_apps_api_token: $(deployment_token)
https://docs.microsoft.com/ja-jp/azure/static-web-apps/publish-devops
デプロイトークンを
ここで指定する

34. #vscodejp
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps
VSCode 拡張機能もある

35. #vscodejp
まとめ
Azure Static Web Apps は SPA の実行に適したサービスです。
VSCode & CLI でフロントエンドとバックエンドを同時に開
発できる環境を作れます。
Azure Static Web Apps は無料で利用でき、CI/CD の構築も手
軽です。“とりあえず試してみる” にはすごく適しています。

36. #vscodejp
参考
• 公式ドキュメント・拡張機能
• https://azure.microsoft.com/ja-jp/services/app-service/static/
• https://docs.microsoft.com/ja-jp/azure/static-web-apps/
• https://docs.microsoft.com/ja-jp/azure/static-web-apps/local-development
• https://docs.microsoft.com/ja-jp/learn/paths/azure-static-web-apps/
• https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps
• 本セッションの元ネタ・サンプルコード
• https://qiita.com/tsubakimoto_s/items/4939a6d6e647721309a3
• https://qiita.com/tsubakimoto_s/items/08265048106cd0eb054f
• https://github.com/tsubakimoto/static-web-app-sample