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
320
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
Completely Understanding AutoGen
satakeyusuke19920527
0
220
deep dive to voice rag
satakeyusuke19920527
0
260
Microsoft for Startups Founders Hub
satakeyusuke19920527
0
33
Cram school DX - Tried to Make English Conversation Application
satakeyusuke19920527
0
240
Can't RAGs be cheaper?
satakeyusuke19920527
1
380
Implemented payment processing with Azure Functions and Stripe.
satakeyusuke19920527
1
230
platform engineering meetup wrapup
satakeyusuke19920527
0
300
Try to make a call center ver3
satakeyusuke19920527
0
3.5k
Try to make a call center
satakeyusuke19920527
1
250
Other Decks in Business
See All in Business
Theoria technologies:About Us
theoriatec2024
1
5.8k
株式会社ispec 会社紹介資料
emikamihara
0
5.9k
CData 製品を使って不動産API を可視化!実際に注文住宅を買ってみるまでの話
cdataj
2
240
Digital Experience, Inc. - Company Deck
sprasiainc
0
18k
NEXERA inc. | Company Deck
nexera
0
8k
メドピアグループ紹介資料
medpeer_recruit
10
120k
デジタルツールを活用した収用委員会運営プロジェクト
tokyo_metropolitan_gov_digital_hr
1
350
Works Human Intelligence
whisaiyo
1
81k
「定性」から「定量」へ 〜明日からできる定量化。時間の魔法編〜
natty_natty254
2
140
Creating Creators in the age of Generative AI - In SIGGRAPH ASIA 2024
o_ob
0
140
EM、会計を学ぶ
yigarashi
0
250
よいPM定例はPM組織を強くする ~ 共有から共創へ、悩みを共に解決する場づくり ~
jouykw
3
7.1k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
The World Runs on Bad Software
bkeepers
PRO
66
11k
A Philosophy of Restraint
colly
203
16k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Building Your Own Lightsaber
phodgson
104
6.1k
Mobile First: as difficult as doing things right
swwweet
222
9k
Statistics for Hackers
jakevdp
796
220k
Navigating Team Friction
lara
183
15k
Writing Fast Ruby
sferik
628
61k
Agile that works and the tools we love
rasmusluckow
328
21k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
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/
動作確認 • ネガティブなことを積極的に⾔ってみましょう!