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
好きなマンガ読める率100%にするために、AWS AmplifyでVueアプリをデプロイしてみた
Search
dublook
July 30, 2019
Programming
0
110
好きなマンガ読める率100%にするために、AWS AmplifyでVueアプリをデプロイしてみた
dublook
July 30, 2019
Tweet
Share
More Decks by dublook
See All by dublook
MangaTechエンジニアの日曜アプリ開発の勧め - AWS Amplify 時代の安くて 強いDB設計
dublook
4
1.5k
Other Decks in Programming
See All in Programming
エンターテイメント業界で利用されるAWS
demuyan
0
210
What We Can Learn From OSS
inouehi
0
420
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
970
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
290
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
VS Code をプロダクトにどう取り込むか
onomax
1
370
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Snowflakeで眠ったデータを起こそう!
estie
0
120
Fragment Composition of GraphQL
quramy
7
1k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.1k
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
422
63k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Making Projects Easy
brettharned
108
5.5k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
In The Pink: A Labor of Love
frogandcode
138
21k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Transcript
AWS AmplifyでVueアプリを デプロイしてみた #ginzajs 好きなマンガ読める率100%にするために @dublook
今日のゴール ◉ 新しいウェブアプリ作るとき、AWS Amplify使っ てみよ、と候補になる ◉ マンガ好きとつながる 2
今日やらないこと ◉ FirebaseとAmplifyどっちがいいの? 3
好きなマンガ読める率100%へ! スキ100! 1 4
5 自己紹介
6 じゃなくて ねこ紹介!
◉ スキ100!プロジェクトの公式キャラクター ◉ 普段はワインバーを経営 (ソムリエ有資格猫) ◉ マンガ好きが高じて、たまにお客さんに すっとオススメしてくれる ◉ 生みの親はレポ漫画家の伊佐坂みつほ先生
ソムねこ 7 伊佐坂イエローで おなじみ!
8 つまり アプリ作りが盛り上がって キャラまで作っちゃった マンガ好きの悩みを見かねた ソムねこが来てくれた!
自己紹介 9 マンガテック エンジニア! ふーん
“ Amazonのレコメンドもいいけど、 とにかく好きなマンガだけ オススメしてくれよ!!! 10 スキ100!のWhy
こんな人を助けたい! 常に自分の知 らない、ステキ な新刊を見つけ たい! マンガを毎月か なりの数を買っ ている Kindleで マンガを読んで
いる 11
こんな感じ 12
こんな感じ 13
本棚に入ってる作家の新刊を自動で通知 14
使ってみたい方はこちら 15 https:/ /app.suki100.com
“ 機能要望、わがまま言ってすいません笑 でも愛用しているが故です! 16 苅田 明史 (マンガ新聞創業者)
新規アプリ?? まずはAWS Amplifyに頼れ! スキ100!アプリで使い方をつかめ 2 17
AWS Amplifyってなに? 18 https://aws-amplify.github.io/docs/
19 いっぱいあり過ぎて どれ使えばいいかわかんない
AWS Amplifyってざっくりいうと、 20 親切な「お節介」 • Amplifyがないとできないことはない • 「単純なアプリ作るなら、これ使いなよ」 • 「どうせこういう使い方するだろうから、ちょっと便
利にしといたよ」
21 Storageは S3かDynamo 認証は Cognito! ホスティングは S3->CloundFront
ナイスおせっかい! 22 • AWSのサービス名を意識しなくていい ◦ (あとから意識することもできる) • 「単純なアプリ作るなら、これ使いなよ」 • 「どうせこういう使い方するだろうから、ちょっと便
利にしといたよ」
認証の追加 23 https://aws-amplify.github.io/docs/js/authentication
データベース (Storage) の追加 24 https://aws-amplify.github.io/docs/js/storage
ウェブアプリのホスティングを追加 25 https://aws-amplify.github.io/docs/cli/hosting?sdk=js
26 このコマンドたちを 打ってできた構成
Amplify Console 27 One more thing... 開発環境 本番環境
バージョンの切り戻しもワンクリックで 28
開発環境にはパスワードロックも 29
Amplifyで困ったこと シンプルに使えるようになっているゆえの・・ 3 30
ハマったポイント1 31 ◉ SPAのリダイレクトがうまくいかない ◦ ルート以外のURLにアクセスした時にちゃんと動かない ◦ ドキュメント通りにやったら、できた! https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
ハマったポイント2 32 ◉ Amplifyのプロジェクト内で一つのStackができる ◦ Serverless frameworkなどで共通のS3をいじった りできない ◦ 対策:
コンソール画面から手動で設定変更 ◦ (ほんとはymlでできると思うが手でやった方が早かった )
ハマったポイント3 33 ◉ Amplify SDKのAPI不足 ◦ 例: S3のlistメソッドで、1000件以上の値取れない ◦ ゆえにAWS
SDKを併用・・
ハマったポイント4 34 ◉ AWS SDKの認証がちょこちょこ切れる・・ ドキュメント通りにやったものの・・ https://aws-amplify.github.io/docs/js/start
ハマったポイント4: 現在のソース 35 facebookログインしか使っていないので、現状 federatedSignInだけでうまく動いている なんでこれでいいのかよくわかっていない・・・
AWSのSAさんに聞いてみた 36 ◉ Amplify SDK と AWS SDKの使い分けはどうすりゃいい? ◦ 確かにどっちも使えると迷うよね
◦ フロントは、Amplify SDKオンリーにして、それ以上複 雑なことはLambdaに逃すのがオススメ ◦ あとAppSync使って! オススメ! なるほど
37 好きなマンガ読める率 100%へ! https:/ /app.suki100.com