$30 off During Our Annual Pro Sale. View Details »

様々なWebアプリをAzureにデプロイする

tomokusaba
December 17, 2022

 様々なWebアプリをAzureにデプロイする

.NETラボ勉強会2022年12月
「様々なWebアプリをAzureにデプロイする」

tomokusaba

December 17, 2022
Tweet

More Decks by tomokusaba

Other Decks in Programming

Transcript

  1. 様々なWebアプリを
    Azureにデプロイする
    株式会社SAKURUG
    エンジニアリングユニット
    草場 友光
    .NETラボ 2022年12月

    View Slide

  2. 自己紹介
    • 普段は主にWebFormsアプリの保守の
    お仕事をしてます。
    • 古めのシステムが多いので時代に取り
    残されぬよう新しい技術を一つでも入
    れるよう日々努力しています。
    • 2022/08-2023 Microsoft MVP
    (Developer Technologies)
    • tomo_kusaba

    View Slide

  3. 宣伝
    【VISION】ひとの可能性を開花させる企業であり続ける
    VISIONに共感できる仲間募集中。

    View Slide

  4. 注意
    • 個人の見解・解釈が多分に入っています。
    • 見解の相違・事実誤認などありましたらご指摘ください。
    • #dotnetlabでtweetすると右側に表示されます

    View Slide

  5. 今日の目的
    • Azure App ServiceやAzure Static Web AppsはAzureにおい
    てWebアプリをホストするための最も有用な選択肢です。
    • 自作のアプリまたは既存のアプリがいかに簡単に高効率に生産
    性よくホストできるかをデモを通して知る

    View Slide

  6. Azure App Serviceとは
    • .NET、.NET Core、Java、Ruby、Node.js、PHP、Python、
    コンテナをホストすることができるフルマネージドPaaS
    • コードベースでの使用の場合OSと言語フレームワークのパッ
    チは自動適用される
    • マーケットプレイスにある様々なアプリケーションをデプロイ
    することができる

    View Slide

  7. Azure Static Web Appsとは
    • GitHub/Azure DevOpsのコードリポジトリから静的Webアプ
    リを自動的にビルドしてデプロイし公開するサービス
    • Angular、React、Vue.js、Next.js、Nuxt.js、BlazorWASM
    などに対応
    • グローバル分散
    • 無料のSSL証明書
    • 組み込みの認証プロバイダー

    View Slide

  8. デモ1
    • Visual StudioにあるBlazor Serverのアプリを直接Azure App
    Serviceにデプロイする

    View Slide

  9. デモ1のつづき(17.5 Preview 2~)
    https://devblogs.microsoft.com/visualstudio/try-out-visual-
    studio-2022-17-5-preview-2/#publish

    View Slide

  10. デモ2
    • GitHub上にあるBlazor ServerのアプリをAzure App Service
    にデプロイする。
    • GitHub上のコードを変更することでGitHubActionが動き自動
    的に再デプロイされることを確認する

    View Slide

  11. デモ3
    • GitHub上にあるBlazor WebAssemblyアプリをAzure Static
    Web Appsにデプロイする
    • GitHub上のコードを変更することでGitHub Actionが動き自動
    的に再デプロイされることを確認する

    View Slide

  12. デモ4
    • マーケットプレイスにあるWordPressをAzure App Serviceに
    デプロイする

    View Slide

  13. 参考文献
    • クイックスタート: ASP.NET Web アプリをデプロイする
    (Visual Studio)
    • クイックスタート: ASP.NET Web アプリをデプロイする
    (Azure Portal)
    • WordPress サイトの作成
    • クイック スタート: 静的 Web アプリを初めてビルドする
    (Azure Portal,GitHub,Blazor)

    View Slide

  14. 本日のURL
    (Azure サイトは1週間程度で削除します)
    • Visual StudioからApp Serviceにデプロイ
    →https://blazorapp1620221217141833.azurewebsites.
    net/
    • GitHubからApp Serviceにデプロイ
    →https://dotnetlabgithub.azurewebsites.net/
    →https://github.com/tomokusaba/dotnetlab202212GitH
    ubDemo
    • GitHubからStatic Web Appsにデプロイ
    →https://jolly-desert-0d1ed9f10.2.azurestaticapps.net/
    →https://github.com/tomokusaba/dotnetlab202212was
    m

    View Slide

  15. おしまい
    おしまい

    View Slide