好きなマンガ読める率100％にするために、AWS AmplifyでVueアプリをデプロイしてみた

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

好きなマンガ読める率100％にするために、AWS AmplifyでVueアプリをデプロイしてみた

好きなマンガ読める率100％にするために、AWS AmplifyでVueアプリをデプロイしてみた

More Decks by dublook

Other Decks in Programming

Featured

Transcript