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

Transcript

1. AWS AmplifyでVueアプリを デプロイしてみた #ginzajs 好きなマンガ読める率100％にするために @dublook
2. 今日のゴール ◉ 新しいウェブアプリ作るとき、AWS Amplify使っ てみよ、と候補になる ◉ マンガ好きとつながる 2
3. 今日やらないこと ◉ FirebaseとAmplifyどっちがいいの? 3
4. 好きなマンガ読める率100%へ! スキ100！ 1 4
5. 5 自己紹介
6. 6 じゃなくて ねこ紹介!
7. ◉ スキ100！プロジェクトの公式キャラクター ◉ 普段はワインバーを経営 (ソムリエ有資格猫) ◉ マンガ好きが高じて、たまにお客さんに すっとオススメしてくれる ◉ 生みの親はレポ漫画家の伊佐坂みつほ先生 ソムねこ 7 伊佐坂イエローで おなじみ!
8. 8 つまり アプリ作りが盛り上がって キャラまで作っちゃった マンガ好きの悩みを見かねた ソムねこが来てくれた!
9. 自己紹介 9 マンガテック エンジニア！ ふーん
10. “ Amazonのレコメンドもいいけど、 とにかく好きなマンガだけ オススメしてくれよ!!! 10 スキ100！のWhy
11. こんな人を助けたい! 常に自分の知 らない、ステキ な新刊を見つけ たい！ マンガを毎月か なりの数を買っ ている Kindleで マンガを読んで いる 11
12. こんな感じ 12
13. こんな感じ 13
14. 本棚に入ってる作家の新刊を自動で通知 14
15. 使ってみたい方はこちら 15 https:/ /app.suki100.com
16. “ 機能要望、わがまま言ってすいません笑 でも愛用しているが故です！ 16 苅田 明史 (マンガ新聞創業者)
17. 新規アプリ?? まずはAWS Amplifyに頼れ! スキ100！アプリで使い方をつかめ 2 17
18. AWS Amplifyってなに? 18 https://aws-amplify.github.io/docs/
19. 19 いっぱいあり過ぎて どれ使えばいいかわかんない
20. AWS Amplifyってざっくりいうと、 20 親切な「お節介」 • Amplifyがないとできないことはない • 「単純なアプリ作るなら、これ使いなよ」 • 「どうせこういう使い方するだろうから、ちょっと便 利にしといたよ」
21. 21 Storageは S3かDynamo 認証は Cognito! ホスティングは S3->CloundFront
22. ナイスおせっかい! 22 • AWSのサービス名を意識しなくていい ◦ (あとから意識することもできる) • 「単純なアプリ作るなら、これ使いなよ」 • 「どうせこういう使い方するだろうから、ちょっと便 利にしといたよ」
23. 認証の追加 23 https://aws-amplify.github.io/docs/js/authentication
24. データベース (Storage) の追加 24 https://aws-amplify.github.io/docs/js/storage
25. ウェブアプリのホスティングを追加 25 https://aws-amplify.github.io/docs/cli/hosting?sdk=js
26. 26 このコマンドたちを 打ってできた構成
27. Amplify Console 27 One more thing... 開発環境 本番環境
28. バージョンの切り戻しもワンクリックで 28
29. 開発環境にはパスワードロックも 29
30. Amplifyで困ったこと シンプルに使えるようになっているゆえの・・ 3 30
31. ハマったポイント1 31 ◉ SPAのリダイレクトがうまくいかない ◦ ルート以外のURLにアクセスした時にちゃんと動かない ◦ ドキュメント通りにやったら、できた! https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
32. ハマったポイント2 32 ◉ Amplifyのプロジェクト内で一つのStackができる ◦ Serverless frameworkなどで共通のS3をいじった りできない ◦ 対策: コンソール画面から手動で設定変更 ◦ (ほんとはymlでできると思うが手でやった方が早かった )
33. ハマったポイント3 33 ◉ Amplify SDKのAPI不足 ◦ 例: S3のlistメソッドで、1000件以上の値取れない ◦ ゆえにAWS SDKを併用・・
34. ハマったポイント4 34 ◉ AWS SDKの認証がちょこちょこ切れる・・ ドキュメント通りにやったものの・・ https://aws-amplify.github.io/docs/js/start
35. ハマったポイント4: 現在のソース 35 facebookログインしか使っていないので、現状 federatedSignInだけでうまく動いている なんでこれでいいのかよくわかっていない・・・
36. AWSのSAさんに聞いてみた 36 ◉ Amplify SDK と AWS SDKの使い分けはどうすりゃいい? ◦ 確かにどっちも使えると迷うよね ◦ フロントは、Amplify SDKオンリーにして、それ以上複 雑なことはLambdaに逃すのがオススメ ◦ あとAppSync使って! オススメ! なるほど
37. 37 好きなマンガ読める率 100%へ! https:/ /app.suki100.com