Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for dublook dublook
July 30, 2019
Programming
0
150

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

Avatar for dublook

dublook

July 30, 2019
Tweet

More Decks by dublook

See All by dublook
MangaTechエンジニアの日曜アプリ開発の勧め - AWS Amplify 時代の安くて 強いDB設計
Avatar for dublook dublook
4
1.9k

Other Decks in Programming

See All in Programming
Ruby x Terminal
Avatar for Akira Matsuda a_matsuda
7
600
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
140
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜
Avatar for kuro kuro_kurorrr
3
1.9k
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
110
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
Avatar for Arthur arthur1
2
550
grapheme_strrev関数が採択されました（あと雑感）
Avatar for てきめん tekimen youkidearitai
PRO
1
220
encoding/json/v2のUnmarshalはこう変わった：内部実装で見る設計改善
Avatar for Hiroki Kurasawa kurakura0916
0
410
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
260
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
Avatar for ハゲワシ hagevvashi
0
470
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
120
CDIの誤解しがちな仕様とその対処TIPS
Avatar for futokiyo futokiyo
0
210
The Ralph Wiggum Loop: First Principles of Autonomous Development
Avatar for Ryuichiro Semba sembayui
0
3.7k

Featured

See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
480
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.2k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
52k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
150
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
220
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
100
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
170
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
770

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