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
140
好きなマンガ読める率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.6k
Other Decks in Programming
See All in Programming
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
110
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
Outline View in SwiftUI
1024jp
1
120
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
570
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
Server Driven Compose With Firebase
skydoves
0
400
Java ジェネリクス入門 2024
nagise
0
600
Vue.js学習の振り返り
hiro_xre
2
130
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
It's Worth the Effort
3n
183
27k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Building Adaptive Systems
keathley
38
2.2k
Happy Clients
brianwarren
97
6.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Why Our Code Smells
bkeepers
PRO
334
57k
RailsConf 2023
tenderlove
29
880
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
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