Static Web Apps × DevOps × OpenAI で開発事始め

Azure Static Web Apps × Azure DevOps × Azure OpenAI でハンズオン形式で開発環境を構築し、簡単なWEBアプリを構築します。

Transcript

1. STATIC WEB APPS × DEVOPS × OPENAI
   で開発事始め
   .NETラボ8⽉
   佐⽵ 祐亮
   

   View Slide

2. ⾃⼰紹介
   • ⼤阪でエンジニアとして働きながら、
   学習塾とプログラミングスクールを経営してます。
   • 趣味
   ⿇雀(3⼈打ち)
   お酒
   • Twitter(ゆうじろう@fe_js_engineer)
   https://twitter.com/fe_js_engineer
   • LinkedIn(佐⽵祐亮)
   https://www.linkedin.com/in/satyus/
   

   View Slide

3. 今⽇の⽬標
   • .NETラボ8⽉号に参加していただいた皆様が
   Azure Static Web Apps×Azure DevOps×Azure OpenAIを使って
   開発を始められる状態にすること
   

   View Slide

4. はじめに
   • 今回は実際にデモでアプリを作成していきます。
   Azureを契約されている⽅は是⾮ご⼀緒にハンズオンしてみてくだ
   さい！
   • 詳細な⼿順やソースコードは以下に記載しております。
   まだOpenAI使ったことないの？この記事で全員ハンズオンさせてやんよ！
   (Qiita)https://qiita.com/fe_js_engineer/items/4c11827906d38051ae51
   (Zenn)https://zenn.dev/yusu29/articles/azure_openai_handson
   

   View Slide

5. 今回作成するアプリの概要
   • 使⽤する技術としては以下となります。
   • Azure Static Web AppsでNext.jsのアプリをデプロ
   イ
   • Azure OpenAIでネガティブ→ポジティブに変換
   • ソースコードはAzure DevOpsのReposで管理し、
   Pipelinesを⽤いてStaticWebAppsへデプロイ
   • 最後に動作確認して本⽇は完了
   

   View Slide

6. Azure OpenAIのセットアップ
   • Azure OpenAI Service
   https://learn.microsoft.com/ja-jp/azure/ai-
   services/openai/
   • 今回のアプリではネガティブ→ポジティブの変換
   の役割を果たします。
   • AzureStaticWebAppsからAzureOpenAIへネガティ
   ブ→ポジティブへ変換するようなプロンプトを渡
   し、変換した⽂字列を⽣成して
   AzureStaticWebAppsへReturnします。
   

   View Slide

7. Azure DevOps の Azure Repos をセットアップ
   • Azure DevOpsのプロジェクトの作成
   今回は [ dotnetlab ] とします。
   • Next.jsのコードを格納するReposを作成します。
   

   View Slide

8. Next.js でフロントエンド構築
   • Next.jsのコードを作成してローカルで動作確認し
   てみます。
   

   View Slide

9. Azure Static Web Apps へ Pipelines を⽤いて
   Deploy
   • Pipelinesを⽤いてCD/CI環境を構築してSWAにデ
   プロイ
   

   View Slide

10. 動作確認
    • ネガティブなことを積極的に⾔ってみましょう！
    

    View Slide

11. 参考資料
    • Zenn
    https://zenn.dev/yusu29/articles/azure_openai_handson
    • Qiita
    https://qiita.com/fe_js_engineer/items/4c11827906d38051ae51
    • Azure Static Web Apps
    https://learn.microsoft.com/ja-jp/azure/static-web-apps/
    • Azure OpenAI
    https://learn.microsoft.com/ja-jp/azure/ai-services/openai/
    

    View Slide

12. 動作確認
    • ネガティブなことを積極的に⾔ってみましょう！
    

    View Slide