VSCodeで始めるAzure Static Web Apps開発
0 likes1,077 views
登壇資料です https://vscode.connpass.com/event/221961/
![#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.](https://image.slidesharecdn.com/slide-slideshare-211120061758/85/VSCode-Azure-Static-Web-Apps-16-320.jpg)
VSCodeで始めるAzure Static Web Apps開発
- 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
- 4. #vscodejp 今日の内容 • Azure Static Web Apps について • Azure Static Web Apps のローカル開発環境 • Azure Static Web Apps の CI/CD 対象 ✓これから Azure Static Web Apps を始める方 ✓開発環境やデバッグを効率化したい方
- 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
- 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 が動きデプロイが行われる。
- 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 デプロイトークンを ここで指定する
- 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