Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Static Web Apps × DevOps × OpenAI で開発事始め
Search
SatakeYusuke
August 26, 2023
Business
0
360
Static Web Apps × DevOps × OpenAI で開発事始め
Azure Static Web Apps × Azure DevOps × Azure OpenAI でハンズオン形式で開発環境を構築し、簡単なWEBアプリを構築します。
SatakeYusuke
August 26, 2023
Tweet
Share
More Decks by SatakeYusuke
See All by SatakeYusuke
Microsoft for Startups
satakeyusuke19920527
0
19
AI Agent implement browser test by browser-use on Azure
satakeyusuke19920527
1
560
Completely Understanding AutoGen
satakeyusuke19920527
0
320
deep dive to voice rag
satakeyusuke19920527
0
480
Microsoft for Startups Founders Hub
satakeyusuke19920527
0
270
Cram school DX - Tried to Make English Conversation Application
satakeyusuke19920527
0
290
Can't RAGs be cheaper?
satakeyusuke19920527
1
460
Implemented payment processing with Azure Functions and Stripe.
satakeyusuke19920527
1
260
platform engineering meetup wrapup
satakeyusuke19920527
0
380
Other Decks in Business
See All in Business
Vorsicht, Autopilot! Bewusste Produktführung im AI-Zeitalter
arnekittler
0
130
CREFIL Inc. / Company Profile
crefil
0
180
【UMed】Company Deck_250923
ryushu
0
120
freeeを軸に変えていく記帳代行の概念
yuki_yano
PRO
0
120
15 分で学ぶ Cloud Run のユースケースと代表的なアーキテクチャパターン
googlecloudjapan
3
500
Entrance Book ビジネスイノベーションサービス部
arisaiyou
0
2k
株式会社サイバーリンクス|カルチャーデック
cyberlinks
0
240
フルカイテン株式会社 採用資料
fullkaiten
0
75k
2025年10月副業制度運用者の実態調査
fkske
0
110
新規投資家向け資料
digitalgrid
0
1.2k
20251003-GENDA経営戦略チーム-Value-Upの全体像
geshi0820
0
1.4k
2025.10_中途採用資料.pdf
superstudio
PRO
2
83k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Site-Speed That Sticks
csswizardry
11
900
Git: the NoSQL Database
bkeepers
PRO
431
66k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
KATA
mclloyd
32
15k
The Language of Interfaces
destraynor
162
25k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Transcript
STATIC WEB APPS × DEVOPS × OPENAI で開発事始め .NETラボ8⽉ 佐⽵
祐亮
⾃⼰紹介 • ⼤阪でエンジニアとして働きながら、 学習塾とプログラミングスクールを経営してます。 • 趣味 ⿇雀(3⼈打ち) お酒 • Twitter(ゆうじろう@fe_js_engineer)
https://twitter.com/fe_js_engineer • LinkedIn(佐⽵祐亮) https://www.linkedin.com/in/satyus/
今⽇の⽬標 • .NETラボ8⽉号に参加していただいた皆様が Azure Static Web Apps×Azure DevOps×Azure OpenAIを使って 開発を始められる状態にすること
はじめに • 今回は実際にデモでアプリを作成していきます。 Azureを契約されている⽅は是⾮ご⼀緒にハンズオンしてみてくだ さい! • 詳細な⼿順やソースコードは以下に記載しております。 まだOpenAI使ったことないの?この記事で全員ハンズオンさせてやんよ! (Qiita)https://qiita.com/fe_js_engineer/items/4c11827906d38051ae51 (Zenn)https://zenn.dev/yusu29/articles/azure_openai_handson
今回作成するアプリの概要 • 使⽤する技術としては以下となります。 • Azure Static Web AppsでNext.jsのアプリをデプロ イ •
Azure OpenAIでネガティブ→ポジティブに変換 • ソースコードはAzure DevOpsのReposで管理し、 Pipelinesを⽤いてStaticWebAppsへデプロイ • 最後に動作確認して本⽇は完了
Azure OpenAIのセットアップ • Azure OpenAI Service https://learn.microsoft.com/ja-jp/azure/ai- services/openai/ • 今回のアプリではネガティブ→ポジティブの変換
の役割を果たします。 • AzureStaticWebAppsからAzureOpenAIへネガティ ブ→ポジティブへ変換するようなプロンプトを渡 し、変換した⽂字列を⽣成して AzureStaticWebAppsへReturnします。
Azure DevOps の Azure Repos をセットアップ • Azure DevOpsのプロジェクトの作成 今回は
[ dotnetlab ] とします。 • Next.jsのコードを格納するReposを作成します。
Next.js でフロントエンド構築 • Next.jsのコードを作成してローカルで動作確認し てみます。
Azure Static Web Apps へ Pipelines を⽤いて Deploy • Pipelinesを⽤いてCD/CI環境を構築してSWAにデ
プロイ
動作確認 • ネガティブなことを積極的に⾔ってみましょう!
参考資料 • 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/
動作確認 • ネガティブなことを積極的に⾔ってみましょう!