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

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

Transcript

1. STATIC WEB APPS × DEVOPS × OPENAI で開発事始め .NETラボ8⽉ 佐⽵ 祐亮
2. ⾃⼰紹介 • ⼤阪でエンジニアとして働きながら、 学習塾とプログラミングスクールを経営してます。 • 趣味 ⿇雀(3⼈打ち) お酒 • Twitter(ゆうじろう@fe_js_engineer) https://twitter.com/fe_js_engineer • LinkedIn(佐⽵祐亮) https://www.linkedin.com/in/satyus/
3. 今⽇の⽬標 • .NETラボ8⽉号に参加していただいた皆様が Azure Static Web Apps×Azure DevOps×Azure OpenAIを使って 開発を始められる状態にすること
4. はじめに • 今回は実際にデモでアプリを作成していきます。 Azureを契約されている⽅は是⾮ご⼀緒にハンズオンしてみてくだ さい！ • 詳細な⼿順やソースコードは以下に記載しております。 まだOpenAI使ったことないの？この記事で全員ハンズオンさせてやんよ！ (Qiita)https://qiita.com/fe_js_engineer/items/4c11827906d38051ae51 (Zenn)https://zenn.dev/yusu29/articles/azure_openai_handson
5. 今回作成するアプリの概要 • 使⽤する技術としては以下となります。 • Azure Static Web AppsでNext.jsのアプリをデプロ イ • Azure OpenAIでネガティブ→ポジティブに変換 • ソースコードはAzure DevOpsのReposで管理し、 Pipelinesを⽤いてStaticWebAppsへデプロイ • 最後に動作確認して本⽇は完了
6. Azure OpenAIのセットアップ • Azure OpenAI Service https://learn.microsoft.com/ja-jp/azure/ai- services/openai/ • 今回のアプリではネガティブ→ポジティブの変換 の役割を果たします。 • AzureStaticWebAppsからAzureOpenAIへネガティ ブ→ポジティブへ変換するようなプロンプトを渡 し、変換した⽂字列を⽣成して AzureStaticWebAppsへReturnします。
7. Azure DevOps の Azure Repos をセットアップ • Azure DevOpsのプロジェクトの作成 今回は [ dotnetlab ] とします。 • Next.jsのコードを格納するReposを作成します。
8. Next.js でフロントエンド構築 • Next.jsのコードを作成してローカルで動作確認し てみます。
9. Azure Static Web Apps へ Pipelines を⽤いて Deploy • Pipelinesを⽤いてCD/CI環境を構築してSWAにデ プロイ
10. 動作確認 • ネガティブなことを積極的に⾔ってみましょう！
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/
12. 動作確認 • ネガティブなことを積極的に⾔ってみましょう！