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
250
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
Try to make a call center
satakeyusuke19920527
1
100
コールセンターを作ってみた(1)
satakeyusuke19920527
0
340
Azure OpenAI ServiceのAdd your Dataで(出来る限り簡単に)企業の独自情報にも回答してくれるシステムをハンズオンで作ってみる
satakeyusuke19920527
0
200
Azure OpenAI ServiceのAdd your Dataで(出来る限り簡単に)企業の独自情報にも回答してくれるシステムを作ってみた
satakeyusuke19920527
0
160
【Azure OpenAI入門】Azure OpenAI Service × LangChainでクラウドネイティブなアプリ開発
satakeyusuke19920527
0
270
【超入門から応用まで】 Azure OpenAI Service × LangChain
satakeyusuke19920527
2
1.1k
【AI実運用事例】Azure OpenAI×LINEで文字認識→評価を自動化しよう
satakeyusuke19920527
0
40
Azure Bot Service×Azure OpenAIを用いて AI chatbot を作成してみる
satakeyusuke19920527
1
260
学習塾にAzureを組み込んでDX化
satakeyusuke19920527
2
520
Other Decks in Business
See All in Business
ふりかえり勉強会のためのスライド (初稿書き殴りver)
komassy
0
160
インキュデータ会社紹介資料
okitsu
1
20k
新卒向けふりかえり研修
viva_tweet_x
10
2.4k
Стратегия решает проблемы на всех уровнях компании
alexanderbyndyu
0
150
TECH HIRE |「大胆なポジションの開発」によって ハイクラス人材を直接応募で4名採用できた話
trackrecords
PRO
0
370
データ分析基盤構築に役立つAWSマネージドサービス紹介
ryo5043617
0
200
Delivering More With Less: An Introduction to Value Streams
helenjbeal
3
330
Findy PEOPLE BOOK
findyinc
1
53k
grabss会社案内 / grabss careerdeck
grabss
0
510
カジュアル面談って、もっとカジュアルに していいの / informal session #jasstnano
pineapplecandy
0
130
アプリビジネスとプラットフォーム規制の最新動向20240411
kenjisugiura
1
190
エンジニア向け会社説明資料
staffrecruiter
2
380
Featured
See All Featured
Clear Off the Table
cherdarchuk
85
310k
Web development in the modern age
philhawksworth
203
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Building Adaptive Systems
keathley
32
1.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Six Lessons from altMBA
skipperchong
22
3k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
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/
動作確認 • ネガティブなことを積極的に⾔ってみましょう!