Successfully reported this slideshow.
Your SlideShare is downloading. ×

VSCodeで始めるAzure Static Web Apps開発

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 36 Ad

More Related Content

Slideshows for you (20)

Similar to VSCodeで始めるAzure Static Web Apps開発 (20)

Advertisement

More from Yuta Matsumura (20)

Recently uploaded (20)

Advertisement

VSCodeで始めるAzure Static Web Apps開発

  1. 1. #vscodejp VSCode で始める Azure Static Web Apps 開発 2021/11/20 VSCode Conference Japan Yuta Matsumura
  2. 2. #vscodejp 松村 優大 (Yuta Matsumura) Chief Technical Architect (C#, PHP, Azure) Microsoft MVP (Developer Technologies) #fukuten #devblogradio @tsubakimoto_s Currently working for
  3. 3. #vscodejp https://fukuten.connpass.com/
  4. 4. #vscodejp 今日の内容 • Azure Static Web Apps について • Azure Static Web Apps のローカル開発環境 • Azure Static Web Apps の CI/CD 対象 ✓これから Azure Static Web Apps を始める方 ✓開発環境やデバッグを効率化したい方
  5. 5. #vscodejp ダイジェスト版は Qiita で公開しています https://qiita.com/tsubakimoto_s/items/4939a6d6e647721309a3
  6. 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. 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. 8. #vscodejp Azure Static Web Apps • Azure Functions によるバックエンド API をサポート ①マネージド ▶リソースは存在するが直接の操作は不可 ※Free SKU & Standard SKU ②持ち込み ▶自身で作成した Functions を持ち込める ※Standard SKU のみ
  9. 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. 10. #vscodejp Azure Static Web Apps • 他にも便利な機能がたくさんあるのでオススメ • カスタムドメイン設定可 • SSL 証明書が無料提供 • バックエンドルーティング制御 • プルリクエストを自動的に専用ステージにデプロイ • 無料プランあり(主に個人利用)
  11. 11. #vscodejp VS Code で開発環境を作ってみよう • WSL2 (Ubuntu 20.04) • Visual Studio Code • 拡張機能: Remote Development • 拡張機能: Azure Functions • 拡張機能: Live Server • Azure Functions Core Tools ※あくまで一例です。ご自身の使う言語に応じてカスタマイズしましょう。
  12. 12. #vscodejp ざっくりとした手順 1. Azure Functions のプロジェクト作成 (=Web API) 2. Web アプリケーション作成 (=フロントエンド) 3. プロキシ設定と実行 4. 専用 CLI でもっと開発しやすく
  13. 13. #vscodejp Azure Functions のプロジェクト作成 例:Nodejs Web API
  14. 14. #vscodejp アプリと API のフォルダを作成 mkdir static-web-app-sample cd static-web-app-sample/ mkdir app mkdir api code .
  15. 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. 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. 17. #vscodejp とりあえず F5 デバッグ実行 $ func start
  18. 18. #vscodejp Web アプリケーション作成 今回は素の HTML です
  19. 19. #vscodejp app/index.html を作成 API を実行する JS コードを書く
  20. 20. #vscodejp 拡張機能: Live Server 開発環境向けの簡易的な Web サーバーを利用することが できる拡張機能。 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
  21. 21. #vscodejp API が見つからない localhost:5500 から localhost:7071 にある API にアクセスできず、 正しい API レスポンスを取得することができない。 ▶プロキシの設定を行うことで対処する HTTP 404 のレスポンス
  22. 22. #vscodejp .vscode/settings.json に Live Server プロキシ設定を行う { ~中略~ "liveServer.settings.proxy": { "enable": true, "baseUri": "/api", "proxyUri": "http://127.0.0.1:7071/api" } }
  23. 23. #vscodejp Live Server を再起動・再読込 きちんと API がコールされる
  24. 24. #vscodejp 専用 CLI でもっと手軽に https://github.com/Azure/static-web-apps-cli npm install -g @azure/static-web-apps-cli
  25. 25. #vscodejp Azure Static Web Apps CLI swa start コマンド コマンドの実行ディレクトリにおいて、API と Webアプリを 同時に実行することができる
  26. 26. #vscodejp cd static-web-app-sample swa start app --api-location api ※API のデバッグができない
  27. 27. #vscodejp 予め実行した API を CLI で指定する VSCode で Functions をデバッグ起動したうえで API URL を指定する swa start app --api-location http://localhost:7071
  28. 28. #vscodejp Azure Static Web Apps にデプロイする
  29. 29. #vscodejp デプロイ方法は 2種類 いずれも YAML ファイルでビルドやデプロイの構成を定義する サービス リポジトリ CI/CD GitHub GitHub GitHub Actions Azure DevOps Azure Repos Azure Pipelines
  30. 30. #vscodejp GitHub Actions の場合 日本リージョンはまだ GitHub を選択 アプリケーションの種類 を指定 (React, Vue.js 等) デプロイしたい リポジトリを指定
  31. 31. #vscodejp GitHub Actions の場合 リソース作成と同時にリポジトリに YAML ファイルがコミッ トされ、GitHub Actions が動きデプロイが行われる。
  32. 32. #vscodejp Azure Pipelines の場合 「その他」を選択 デプロイトークンを 控えておく
  33. 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. 34. #vscodejp https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps VSCode 拡張機能もある
  35. 35. #vscodejp まとめ Azure Static Web Apps は SPA の実行に適したサービスです。 VSCode & CLI でフロントエンドとバックエンドを同時に開 発できる環境を作れます。 Azure Static Web Apps は無料で利用でき、CI/CD の構築も手 軽です。“とりあえず試してみる” にはすごく適しています。
  36. 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

×