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
初心者が行く!サーバレスWebアプリ開発の道
Search
NagaharuTogawa
March 22, 2024
Technology
0
770
初心者が行く!サーバレスWebアプリ開発の道
NagaharuTogawa
March 22, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
220
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
870
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
200
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
520
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
250
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
130
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
AGIについてChatGPTに聞いてみた
blueb
0
130
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
380
Featured
See All Featured
Faster Mobile Websites
deanohume
305
30k
What's in a price? How to price your products and services
michaelherold
243
12k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Teambox: Starting and Learning
jrom
133
8.8k
Site-Speed That Sticks
csswizardry
0
25
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Navigating Team Friction
lara
183
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
The Invisible Side of Design
smashingmag
298
50k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Transcript
初心者が行く! サーバレスWebアプリ開発の道 AWS事業本部 コンサルティング部 戸川 永陽 1
2 自己紹介 ・名前 戸川 永陽(とがわ ながはる) ・所属 AWS事業本部 コンサルティング部 ・経歴
都内のSES系の会社に新卒で入社 銀行系のインフラ保守やアプリ開発を4年ほど転々 2024年1月からクラスメソッドにジョイン ・ブログ https://dev.classmethod.jp/author/togawa/ ・好きなAWSサービス AWS Cloud9
3 アジェンダ 1. はじめに 2. 今回作ったWebアプリ 3. 個々の技術に対する開発前の印象 4. スタートダッシュ
5. 詰まったところ 6. やり残したこと 7. 個々の技術に対する開発後の印象 8. 学びと感想
4 1. はじめに - 前提 ※私は初心者です!
5 1. はじめに - 今回お話しすること、しないこと お話しすること • 新しいことに取り組む上で意識したこと • どんな道のりを歩んだか •
気づきや学び お話ししないこと • 個々のサービス、フレームワーク、ライブラリの深掘り • パラメータ設定など細かい部分 • コードの細かい説明
6 2. 今回作ったWebアプリ - サインイン画面 サインイン画面はCognitoのhosted UIを使用
7 2. 今回作ったWebアプリ - アプリ画面 マイク入力した音声の文字起こし。画面からデータの編集が可能
8 2. 今回作ったWebアプリ - 構成図
9 2. 今回作ったWebアプリ - なぜ作ったか • 今回のHibiya.Techは「初心者歓迎!使ってみた技術LT大会」 → 使ったことないけど触ってみたかったサービス、技術だけを使って何か 作ってみたい →
リアルタイム文字起こしの機能を持ったアプリって最近あるし、自分 にもできそう → 自分で作った環境なら今後自分好みにカスタマイズできるだろう から夢が広がる → 取り敢えずやってみる
10 3. 個々の技術に対する開発前の印象 React: なんかSPAが作れる。AngularとVueはちょっとだけ触ったことあるから多分あ んな感じでやれる Amazon Cognito: 遥か昔にちょっと使った記憶。サーバレスシステムに認証機能を持たせたい時 に便利なサービスという認識 Amazon
Transcribe: 音声を文字起こしできるやつ。それをWebアプリからどうやってリアルタイムで やるのかは知らん
11 3. 個々の技術に対する開発前の印象 S3 静的ウェブサイトホスティング: Cognitoと同じで使ったことあるとは思うけど幾星霜の月日の中で細かいこ とは忘れた。別に難しくなかったはず Amazon CloudFront: S3でホスティングしたサイトをhttpsで繋ぎたい時に使える。今回はスモール スタートだし要らない?
12 4. スタートダッシュ - ChatGPT様に頼る とりあえず聞いてみた
13 4. スタートダッシュ - ChatGPT様に頼る なんかできそうな雰囲気だけど、構成に余分な箇所もありそう 作りながら細かく聞きまくることに
14 4. スタートダッシュ - 公式ドキュメントを探す 必要な技術が大まかにわかったので、公式ドキュメントを探して読む ・Amazon Transcribe開発者ガイド - AWS SDKでの文字起こし
https://docs.aws.amazon.com/ja_jp/transcribe/latest/dg/getting-started-sdk.html
15 4. スタートダッシュ - 手を動かしてReact基礎を学ぶ 「React 初心者」で検索 超基礎的なコーディングから雰囲気に慣れる
16 5. 詰まったところ - Cognito サインイン画面に使用したhosted UIのコールバックURLの記載 • 開発中は「http://localhost:3000/」とすべきだったが末尾の「/」を外して 「http://localhost:3000」としていたためエラー ◦
GPTは「URL間違ってませんか?」とは言ってくれたが「末尾の/抜けて ませんか?」とまでは流石に言ってくれなかったので自分で気づく必要 があった
17 5. 詰まったところ - ブラウザマイク入力 ブラウザの保護設定との兼ね合いで、httpではマイク入力を許可できなかった • 本番環境はCloudFront経由でhttps接続することにより解決 ◦ 開発環境ではpackage.jsonをいじって騙すことで回避 ◦
他にいい感じの方法ありそうだったが手っ取り早さを重視
18 6. やり残したこと • AWS Amplifyを試してみたか ◦ https://aws.amazon.com/jp/amplify/ • Transcribeの文字起こしと画面入力による編集を両立させたかった ◦
現状は画面入力で編集した後に文字起こしを行うと、編集した内容が上 書きされ戻ってしまう ◦ コードをもう少し弄れば実現できそう
19 7. 個々の技術に対する開発後の印象 React: JSX(TSX)まだまだよくわからんからしっかり良さを理解できるようになりた い! Amazon Cognito: ちょっとしたアプリが作りたい気分の時には結構便利 Amazon Transcribe:
思ってた以上に簡単に使える ストリーミングが簡単だったので多分バッチも簡単(想像)
20 7. 個々の技術に対する開発後の印象 S3 静的ウェブサイトホスティング: 簡単 Amazon CloudFront: ブラウザでマイク入力する為に必要になった そもそもCognitoのhosted UI使う以上必要だった?
簡単に使えるし、別にhttpにこだわって選択肢から外す必要も無いのかもし れない
21 8. 学びと感想 • 動くものを作るのは楽しい • よく知らない技術でも、必要な情報は簡単に手に入る • ざっくりとした印象しかなかった技術でも、使ってみるとやはり解像度が上が る •
取り敢えずまずは「やってみる」!
22