Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

SatakeYusuke
August 26, 2023

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

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

SatakeYusuke

August 26, 2023
Tweet

More Decks by SatakeYusuke

Other Decks in Business

Transcript

  1. 今回作成するアプリの概要 • 使⽤する技術としては以下となります。 • Azure Static Web AppsでNext.jsのアプリをデプロ イ •

    Azure OpenAIでネガティブ→ポジティブに変換 • ソースコードはAzure DevOpsのReposで管理し、 Pipelinesを⽤いてStaticWebAppsへデプロイ • 最後に動作確認して本⽇は完了
  2. Azure OpenAIのセットアップ • Azure OpenAI Service https://learn.microsoft.com/ja-jp/azure/ai- services/openai/ • 今回のアプリではネガティブ→ポジティブの変換

    の役割を果たします。 • AzureStaticWebAppsからAzureOpenAIへネガティ ブ→ポジティブへ変換するようなプロンプトを渡 し、変換した⽂字列を⽣成して AzureStaticWebAppsへReturnします。
  3. Azure DevOps の Azure Repos をセットアップ • Azure DevOpsのプロジェクトの作成 今回は

    [ dotnetlab ] とします。 • Next.jsのコードを格納するReposを作成します。
  4. 参考資料 • 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/