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
290
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
Can't RAGs be cheaper?
satakeyusuke19920527
1
330
Implemented payment processing with Azure Functions and Stripe.
satakeyusuke19920527
1
190
platform engineering meetup wrapup
satakeyusuke19920527
0
260
Try to make a call center ver3
satakeyusuke19920527
0
3.3k
Try to make a call center
satakeyusuke19920527
1
240
コールセンターを作ってみた(1)
satakeyusuke19920527
0
410
Azure OpenAI ServiceのAdd your Dataで(出来る限り簡単に)企業の独自情報にも回答してくれるシステムをハンズオンで作ってみる
satakeyusuke19920527
0
230
Azure OpenAI ServiceのAdd your Dataで(出来る限り簡単に)企業の独自情報にも回答してくれるシステムを作ってみた
satakeyusuke19920527
0
220
【Azure OpenAI入門】Azure OpenAI Service × LangChainでクラウドネイティブなアプリ開発
satakeyusuke19920527
0
310
Other Decks in Business
See All in Business
株式会社ビズリーチ 会社概要資料 / Corporate Deck
bizreach_inc
1
460
依頼仕事の最適化 〜未完了をいかに完了にするか〜
katsuhisa91
PRO
16
8.5k
その失敗は多様性があれば解決していたかもしれない
sena2518
1
300
Datachainご紹介資料(2024年8月) / Company Deck
datachain
3
14k
公開版_モノ売りからコト売りへ 製造業が向き合うビジネスとアジャイル
junki
1
380
株式会社PICK COMPANY DECK
pick
0
1.2k
LP会社資料
lifepartnersinc
0
150
スクラムに必要な知的生産性を上げるソフトスキル / The Soft Skills Required to Enhance Productivity in Scrum
shinichi9987
2
270
コーポレートストーリー(新規投資家様向け会社説明資料)
gatechnologies
1
8.1k
株式会社CyberOwl_エンジニア向け会社紹介資料
cyberowl
0
330
エイチーム M&A方針説明会資料(2024年8月7日)
ateam
0
600
大規模プロダクトにおける組織作りと技術ポートフォリオマネジメント
recruitengineers
PRO
4
290
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
What's new in Ruby 2.0
geeforr
340
31k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Code Reviewing Like a Champion
maltzj
517
39k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Scaling GitHub
holman
458
140k
Producing Creativity
orderedlist
PRO
340
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
4 Signs Your Business is Dying
shpigford
179
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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/
動作確認 • ネガティブなことを積極的に⾔ってみましょう!