本番環境でAmplifyを3年くらい使ってみている弊社環境のご紹介

by Kazuki Miura

Slide 1

Slide 1 text

本番Amplify 環境のご紹介本番Amplify 環境のご紹介 HTB北海道テレビ放送三浦一樹

Slide 2

Slide 2 text

三浦一樹（37）北海道札幌市在住秋田→東京→札幌 1

Slide 3

Slide 3 text

#aws_carnival 〜秋の祭典スペシャル！〜 Startupだ！JAWS-UGだ！Amplifyだ！ 2023年11月4日(土) 2

Slide 4

Slide 4 text

お仕事紹介北海道を対象とした特定地上基幹放送事業者 3

Slide 5

Slide 5 text

テレビ見てます？電波 📡で 4

Slide 6

Slide 6 text

ちなみに我が家に視聴環境ないですw 5

Slide 7

Slide 7 text

お仕事紹介 BtoB事業 BtoC事業テレビのCMや番組提供番組関連のイベント事業放送収入番組の配信や関連グッズの販売などファンの方に直接お届けする放送外収入北海道を対象とした特定地上基幹放送事業者 01 02 6

Slide 8

Slide 8 text

お仕事紹介動画配信事業 EC事業 8人のチーム未経験から勉強したエンジニア3名 (＋SES 2名) ネットデジタル事業部 7

Slide 9

Slide 9 text

VPC LESS VPC LESS VPC LESS OS 　LESS OS 　LESS OS 　LESS 8

Slide 10

Slide 10 text

お仕事紹介動画配信事業 EC事業サーバレスじゃないとムリ！ネットデジタル事業部 9

Slide 11

Slide 11 text

動画配信事業 EC事業 Amplify Step Functions で大体できてます 10

Slide 12

Slide 12 text

OIDC OIDC OIDC DynamoDB DynamoDB S3 MediaConvert S3 DynamoDB AppSync Lambda API-GW Step Functions API-GW Amplify Amplify 担当者向け CMS 倉庫システム BFF Frontend Backend アーキテクチャ amplify-cli で作ってる 11

Slide 13

Slide 13 text

トピックス型ファイル FRONTEND と BACKEND が分離しているので。。。環境変数知らなくて損したこと技術的負債溜まってしまった技術的負債のご紹介 12

Slide 14

Slide 14 text

GraphQL の型ファイルの受け渡し 13

Slide 15

Slide 15 text

AppSync DynamoDB query 14

Slide 16

Slide 16 text

AppSync DynamoDB generated.tsx query 型ファイル 15 Code Generator

Slide 17

Slide 17 text

AppSync DynamoDB generated.tsx query ??? どこに置く？一致してないと 16

Slide 18

Slide 18 text

BFF frontend AppSync AppSync DynamoDB DynamoDB prod dev prod stg dev prod stg dev backend backend frontend frontend frontend generated.tsx generated.tsx wget wget ビルド前に wget で持ってくる 17

Slide 19

Slide 19 text

困ってたこと 18

Slide 20

Slide 20 text

環境変数ってどうやって管理してますか？ 19

Slide 21

Slide 21 text

環境変数諸事情により、90個くらいありまして、、 20

Slide 22

Slide 22 text

wiki から手動コピペ時代が長らく続き、、環境変数 21

Slide 23

Slide 23 text

環境変数 .env env.json aws cli 22

Slide 24

Slide 24 text

amplify cli に無いから諦めてた、、笑環境変数 .env env.json aws cli 23

Slide 25

Slide 25 text

困ってること 24

Slide 26

Slide 26 text

Slide 27

Slide 27 text

EpisodeGroup 1対多 1対多 DynamoDB AppSync Program Connection ConnectionEpisode Episode 1対多 1対1 1対1 初期ロード時に全てのデータを Recoil に格納番組情報は全部で10MB くらい amplify-cli で、どんどん増やしちゃった番組系のデータ Transformer v1 のままここまできちゃって @connection を気軽に使って繋げまくった乗り換えなり、DynamoDB のリファクタを考えたい 26

Slide 28

Slide 28 text

Merged API と Momento で解決 27

Slide 29

Slide 29 text

AppSync のトークン消費量がえらいことになってて、、なんとかなったお話です。 28

Slide 30

Slide 30 text

まとめ運用上の細かい使い方もコミュニティで共有していきましょう！ものすごいスピードで新規開発と機能追加できたのは Amplifyのおかげ！技術的負債の返済を滞ってきたのは我々の所為 Transformer v1 → v2 対応を放置＠connection ディレクティブをノリで使う Amplify Gen 2 でこれらを乗り越えていきたいです！ 29