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
910
初心者が行く!サーバレスWebアプリ開発の道
NagaharuTogawa
March 22, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
300
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
230
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
3
250
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1k
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
Claude Codeから我々が学ぶべきこと
s4yuba
8
2k
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
170
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
430
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
230
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Scaling GitHub
holman
461
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
How to Ace a Technical Interview
jacobian
278
23k
It's Worth the Effort
3n
185
28k
Side Projects
sachag
455
43k
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