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
RubyLSPのマルチバイト文字対応
notfounds
0
120
CSC509 Lecture 13
javiergs
PRO
0
110
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
ヤプリ新卒SREの オンボーディング
masaki12
0
130
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
Outline View in SwiftUI
1024jp
1
330
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
Quine, Polyglot, 良いコード
qnighy
4
640
Arm移行タイムアタック
qnighy
0
320
Featured
See All Featured
Writing Fast Ruby
sferik
627
61k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Faster Mobile Websites
deanohume
305
30k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Automating Front-end Workflow
addyosmani
1366
200k
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