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
LT中にデプロイする!Azure Web Apps
Search
kurikinton105
August 19, 2022
Programming
0
200
LT中にデプロイする!Azure Web Apps
2022/8/19に主催して行った「8/19 オンラインLT会」の発表資料です。
実際に10分間でデプロイまでを行うデモンストレーションを交えて発表を行いました。
kurikinton105
August 19, 2022
Tweet
Share
More Decks by kurikinton105
See All by kurikinton105
MS Tech CAMP #24はじめてのアプリ制作 ChatGPTのようなアプリを作ってみよう
kurikinton105
0
240
Microsoft Igniteで気になって技術@MS Tech Camp #23
kurikinton105
1
50
学び続けることが視野を広げる-中高や大学での学びを振り返って-
kurikinton105
0
220
おちゃのま!LT自己紹介スライド
kurikinton105
0
450
祝Cos5year約1周年🎉 スタートダッシュ LT
kurikinton105
0
1.2k
MorningKizunaAI
kurikinton105
0
250
Smoothie Slide @技育祭2021学生LT会
kurikinton105
0
1.2k
はじめてのハッカソンからこの夏の軌跡@技育展
kurikinton105
0
1.3k
Other Decks in Programming
See All in Programming
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
deka_morita
0
180
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
840
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
220
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.1k
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
実践AIチャットボットUI実装入門
syumai
7
2.4k
スマホで海難事故は防げるか?年間2000件以上の小型船舶の事故に挑むアプリ開発
atsuki_seo
0
120
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
980
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
110
クラシルを支える技術と組織
rakutek
0
190
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
GitHub's CSS Performance
jonrohan
1032
460k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Scaling GitHub
holman
463
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
YesSQL, Process and Tooling at Scale
rocio
173
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Transcript
LT中に デプロイする! Azure Web Apps @ 2022/8/19 オンラインLT会
今日覚えていって欲しいこと! 2 GUIぽちぽちで意外と作れる Azure Web Apps強い IDEACTIVE JAPAN PROJECT
自己紹介 yama 東京都立大学大学院 システムデザイン研究科 情報科学科域 修士1年 kurikinton105 y_a_m_a_y_a
https://yama-code.web.app 3
得意な技術・趣味 ◎ Python ◎ C/C++ ◎ OpenCV ◎ Flask ◎
Azure ◎ Firebase ◎ Vue.js … ◎ 作詞曲 (DTM) (即売会でCD売り黒字会計 3枚アルバム制作) ◎ 登山(ワンダーフォーゲル部主務) ◎ ギター (Unplugged 副代表) ◎ 旅行 (温泉とか) ◎ 音響音声信号処理(研究) 4
開発したプロダクト with Cos5year 5 写真あげMASKぁ〜?? Smoothie Slide MySactuary オンラインプレゼンを スムーズに!
簡単にモザイクをかけて 個人情報保護! 簡単にスタンプラリーを つくろう!
コロナ以降 7 2020年3月〜7月 ぷち技育祭・技育祭 2020年11月 オータム ハッカソン Smoothie Slide 2021年6月
技育CAMP ハッカソンvol6 MySanctuary 2020年9月 技育展登壇 2021年1月 技育祭LT登壇 未踏応募 ISUCON ディスカバリー ハッカソン コロナ前 ハッカソンどハマり期 試行錯誤期 楽しさ広げたい! 総合的になってく! 2020年8月 じめて ハッカソン 2020年9月 Open Hack U 2020年6月 LTにたくさん 呼 れる 2022年1月〜 IDEACTIVE 2020年12月 ウィンター ハッカソン コミュニケーション 部 優秀賞 2020年9月 夏インターン チーム開発で 最優秀チーム 2022/7/18 初対面LT
写真あげMASKぁ〜?? @ Open Hack U vol.3 8 簡単にモザイクをかけて個人情報保護! ◎ 旅行先とかでいい写真が撮れても顔など
個人情報が 載っていてあげられない ◎ 「どこどこなう〜」ってツイートする リスキー ◦ 個人情報保護とSNS ◎ 技術:OpenCV, Azure, Vue.js ◎ ユーザー目線で 開発、仕様追加で 最優秀賞! https://masker.smoothie-slide.com
MySactuary @ 2021/6 技育CAMPハッカソン 9 スタンプラリーwebアプリ ◎ コロナ禍で外に出なくなった→きっかけになるアプリ ◎ 自分
「聖地」を他 人にラリーしてもらえる! ◦ 現地で スタンプ設置準備なして簡単にラリーを作れる! ◦ ユーザー登録が不要! ◎ 技術: Vue ,Quasar,Firebase,TS,GoogleMapAPI https://mysanctuary.web.app/
Smoothie Slide @ オータムハッカソン&技育祭 10 複数人で オンラインプレゼン 画面共有問題を解決! ◎ 「次
ページお願いします」問題が大きかった ◎ ページ番号を同期させて表示することができる ◎ 技術: Vue.js ,Quasar.js , Firebase ◎ 技術的に作れる道筋が見えるようになってきた ◎ 作れる幅が以前と比べて広がっている! ◎ 10人に対しユーザーインタビューやUX調査も実施 ◦ 使ってもらうため ハードルや認知に課題 https://smoothie-slide.com/
本LTの目的と対象 目的 ◎ AzureでGUIぽちぽちでWEBアプリケーション作ろう! ◦ Azure Web Appsで じめるFlask入門 Qiita記事
対象 ◎ Pythonちょっとわかる ◦ サンプルコード 写経したことある ◎ GitHubでプッシュができる ◎ Azureに登録してる 11
今日覚えていって欲しいこと! 12 GUIぽちぽちで意外と作れる Azure Web Apps強い IDEACTIVE JAPAN PROJECT
こんなこと思ったことありませんか? 13 プログラミング 本買ってfor文かけるようになった! 便利コード作って他 人にも使って欲しいけど コード渡す なー WEBアプリ作るに ...
「ドメイン」「Apache」「Nginx」....読み方わからん.... Azure Web Appsを使え 簡単に作れる!!
完成想定図 名前をformに入れると出力に名前が出てくるアプリ (バックエンドで作るよ...) 14
Azure Web Appsで何ができるの? ◎ 一言でいうと...サーバーを貸してくれるよ! ◦ ほんとざっくり 15
今回作るアプリを大雑把にいうと 16 • FlaskというPython フレームワークを使うよ • POSTで名前を送ると名前が入っているHTMLを表示するよ! サーバー 「yama」 と入力
「yama」 が入った 処理結果 HTMLを返す
HTMLをかく 17 フォーム 部分 出力結果 {{text}}に処理した結果が入る
Flask (Pythonをかく) 18 GET 時 text = “ここに結果が出力さ れます” POST
時 text = “こんにち ” + name + “さん”
pythonを実行 19 $ python3 application.py http://127.0.0.1:5000/ にアクセスすると実行されている が見れる!
ファイル構成 20 こ 構成にする が大事!! application.py をメインファイルとして見てくれる! requirements.txt 使っているライブラリ バージョンを記
載
Webアプリの作成 21
Webアプリの作成 22
デプロイ待ち 23
デプロイが終わると.... 24
デプロイセンターからさっき書いたコードをデプロイ 25
デプロイ間に合った?
こんなの作れます 参考文献を自動生成してくれるチートツールを 作りたかった 27 https://yama-code.azurewebsites.net/scraping
写真あげMASKぁ〜?? @ Open Hack U vol.3 28 簡単にモザイクをかけて個人情報保護! ◎ 旅行先とかでいい写真が撮れても顔など
個人情報が 載っていてあげられない ◎ 「どこどこなう〜」ってツイートする リスキー ◦ 個人情報保護とSNS ◎ 技術:OpenCV, Azure, Vue.js ◎ ユーザー目線で 開発、仕様追加で 最優秀賞! https://masker.smoothie-slide.com
今日覚えていって欲しいこと! 29 GUIぽちぽちで意外と作れる Azure Web Apps強い IDEACTIVE JAPAN PROJECT
yamaでした!!! https://yama-code.dev Presentation template by SlidesCarnival