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
Amplify で SPA をホスティングする際の注意点
Search
ANDPAD inc
February 21, 2025
Technology
1
270
Amplify で SPA をホスティングする際の注意点
角井 暖
@cass7ius
SRE チーム マネージャ
2025 年 2 月 21 日
ゆるSRE勉強会 #9 〜最近始めた取り組み共有大会〜
ANDPAD inc
February 21, 2025
Tweet
Share
More Decks by ANDPAD inc
See All by ANDPAD inc
プロダクト開発を支えるデータ利活用:中央集権から「民主化」までの軌跡
andpad
0
100
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
350
読もう! Android build ドキュメント
andpad
1
420
アンドパッドにおける CocoaPods ライブラリ群の SwiftPackageManager への移行戦略
andpad
0
200
Flutter は DCM が 9 割
andpad
1
330
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
andpad
0
130
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
570
本編では話さない Zig の話
andpad
2
380
"noncopyable types" の使いどころについて考えてみた
andpad
0
540
Other Decks in Technology
See All in Technology
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
140
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
150
Claude Codeから我々が学ぶべきこと
s4yuba
9
2.2k
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
1
260
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
520
OPENLOGI Company Profile for engineer
hr01
1
37k
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
120
AWS DDoS攻撃防御の最前線
ryutakondo
1
130
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
o11yツールを乗り換えた話
tak0x00
1
280
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Fireside Chat
paigeccino
38
3.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
Building an army of robots
kneath
306
45k
Visualization
eitanlees
146
16k
Side Projects
sachag
455
43k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building Adaptive Systems
keathley
43
2.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Transcript
Copyright © 2025 ANDPAD Inc. All Rights Reserved. Amplify で
SPA をホスティングする際の 注意点 株式会社アンドパッド 開発本部 SRE 角井 暖 2025/02/21 ゆるSRE勉強会 #9 〜最近始めた取り組み共有大会〜
Copyright © 2025 ANDPAD Inc. All Rights Reserved. 2 自己紹介
角井 暖 / Dan Kadoi • @cass7ius • ERP パッケージベンダーで DevOps を経験し、 2019年8月よりアンドパッドのSREに参画 • 急速に成長するバーティカル SaaS 、 拡大する開発組織ならではの課題を、 Platform / SRE 領域の技術で解決する • SREチームのマネージャー
アンドパッドの紹介
現場の効率化から経営改善まで一元管理できる 建設DX プロジェクト管理サービス
Copyright © 2025 ANDPAD Inc. All Rights Reserved. 次々と新プロダクトをリリース 5
Copyright © 2025 ANDPAD Inc. All Rights Reserved. システム構成 •
Rubyの会社と思われがちだが、最近はGoで開発されるプロダクトも多い ◦ 詳細は https://engineer.andpad.co.jp/ を参照のこと • システムの大部分はAWS上に構成 ◦ Google CloudやElastic Cloudを部分的に活用 • バックエンドはコンテナ化されており、Kubernetesを利用している ◦ コンテナの大半はAmazon EKS上で動作するが、ECS on Fargateも一部利用 ◦ 昔からあるモノリスとマイクロサービスが併存、サービスメッシュはLinkerdを採用 • フロントエンドは、多くのプロダクトでAmplify Hostingを利用 ◦ 多くのプロダクトはNuxt.jsを利用し、SPAを配信 ◦ 要件に応じて一部はコンテナを利用し、ReactやNext.js、SSRを利用 6
AWS Amplifyについて
Copyright © 2025 ANDPAD Inc. All Rights Reserved. AWS Amplifyとは
• 「クラウドベースのWebアプリケーションおよびモバイルアプリケーションを 開発するための、高機能な宣言型 JavaScriptライブラリ」として登場 ◦ フロントエンド開発の加速・DX改善を謳っている ◦ Amplify CLI, Amplify Studio, Amplify Libraryなどのツールチェーンも提供 • Amplify Hosting(旧:Amplify Console)は、簡単に静的サイトをホスティング するためのフルマネージド型サービス ◦ 多くのフレームワークをサポート • ビルド環境を含む、自動化された CI/CDを提供 ◦ GitHubリポジトリを接続して、プッシュトリガでアセットのビルド ◦ SSL を使用したカスタムドメイン設定 ◦ リダイレクト ◦ カスタムヘッダー 8
Copyright © 2025 ANDPAD Inc. All Rights Reserved. Amplify Hostingは、便利で良い事ばかりではない
• 最近S3のウェブサイトホスティングに対応したり、WAFを紐付けられるように もなり、めまぐるしく進化している • 一方で、マネージドサービスには 裏側で何が起きているか分からないことに由来する、使用感の「癖」がある • AWS Amplifyに限らず、この癖を理解して使いこなす必要がある 9
Copyright © 2025 ANDPAD Inc. All Rights Reserved. Amplify Hostingの「癖」に悩まされた事例を紹介
1. アプリをNuxt3に更新したら、ビルドできなくなった事例 2. アプリをNuxt3.14に更新したら、再度ビルドできなくなった事例 10
Amplify Hostingで ビルド出来なくなった事例
Copyright © 2025 ANDPAD Inc. All Rights Reserved. Nuxt3に更新したら、ビルドできなくなった •
Amplify Hostingにはplatformという属性がある • TerraformでAmplify Hostingを構築する際に、この属性は指定せずにいた • この属性は、ビルドするアプリがSPA,SSGなら「WEB」を、 やSSRなら「WEB_COMPUTE」を指定するのが正しい(※諸条件あり SPAのつもりで実装しているアプリのビルドが、メジャーバージョンをNuxt3に更新してか ら失敗するようになった...!! 原因は、platform属性が「WEB」から「WEB_COMPUTE」に変わっていたため 12
Copyright © 2025 ANDPAD Inc. All Rights Reserved. なぜplatform属性は勝手に書き換わる? •
platform属性とは、アプリをホストする際にどのような環境で実行するかを指定するもの • Amplify Hostingのサービスバックエンドでは、ビルドするアプリの実装や設定に応じて、 platform属性とframework属性を自動判定し書き換える仕組みがある • SPAアプリをNuxt3に更新してから、amplify.ymlで定義しているビルドコマンドが npm run buildのままだと「WEB_COMPUTE」に変更されてしまうことが分かった ビルドコマンドをnpm run generateに変更して、platform属性をTerraformでWEBを明示 指定して戻した結果、ビルドが成功するようになった🎉 https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/deploy-nextjs-app.html 13
Copyright © 2025 ANDPAD Inc. All Rights Reserved. 教訓1:Amplify Hostingのリソースは、
ドリフトが分かるようにTerraformで宣言的に管理しよう • Terraformで宣言的に管理しておくと、コードに書いてない属性であっても最後 にapplyされた状態がstateに記録されている • terraform planすれば差分が出るので、最後にapplyされた状態に対して現在のリ ソースがドリフトしていることが分かる CLIで構成管理しているとドリフト検知できず、ビルド失敗の理由が分かりづらい 14
Copyright © 2025 ANDPAD Inc. All Rights Reserved. 教訓2:ある日突然ビルドできなくなっても慌てない •
Amplify Hostingではビルドとデプロイが一気通貫しているため、 ビルド出来ないと継続的デリバリーが滞る • しかしビルドが出来ないだけで、デプロイ済の既存のコンテンツは壊れてない いま公開されているホスティングサイトは無事 関係各所にリリーススケジュールの温度感を確認して、落ち着いて調査をする 15
めでたしめでたし、とはいかず 数ヶ月後に別のアプリで再発
Copyright © 2025 ANDPAD Inc. All Rights Reserved. • SPAアプリをNuxt3.14に更新してから、ビルドの失敗が再発した
◦ platform属性が「WEB」から「WEB_COMPUTE」に変わっていたため • 開発チームと最近の変更内容やライブラリ依存関係を調査 調査が難航したため、AWSサポートに問い合わせをして支援を要請 Nuxt3.14に更新したら、再度ビルドできなくなった 17
Copyright © 2025 ANDPAD Inc. All Rights Reserved. なぜplatform属性は勝手に書き換わる? •
nitropackの最新版で、nuxt.config.tsでpresetが指定されていない場合の deploy-manifest.jsonの生成結果が変更されたことが原因だった • presetに値が設定されていない場合にデプロイ先のplatformを検出し、それに応じた presetを選択する挙動になる(※未指定だとpresetにSSRが選択される) nuxt.config.tsにnitropack用の設定を追記することで、ビルドが成功するよう になった🎉 18
Copyright © 2025 ANDPAD Inc. All Rights Reserved. platform属性の意図しない変更を防ぐための設定 •
この前後のトラシューも含めて、最終的に以下の設定を開発チームに展開し、再発が収束 19
Copyright © 2025 ANDPAD Inc. All Rights Reserved. • たとえ問題を再現可能な最小構成を共有する事ができなくても、AWSサポート
に頼ることで原因調査が進む場合がある 遠慮せずにAWSサポートを頼ろう • また、類似の事象が報告されている場合があるので、Issuesもチェックする https://github.com/aws-amplify/docs/issues 教訓3:再現環境を作るのが難しくても、 AWSサポートを頼って問い合わせしてみよう 20
Amplify Hostingのビルドトラブル から得た教訓
Copyright © 2025 ANDPAD Inc. All Rights Reserved. これからAmplify Hostingを利用する人にアドバイスする
としたら? • アンドパッドでは、多くのプロダクトでAmplify Hostingを利用している • 様々なトラブルシュートを経験し、以下3つの教訓を得た 22 1 Amplify Hostingのリソースは、ドリフトが分かるように Terraformで宣言的に管理しよう 2 ある日突然ビルドできなくなっても慌てない。いま公開され ているホスティングサイトは無事 3 再現環境を作るのが難しくても、AWSサポートを頼って問い 合わせしてみよう
Copyright © 2025 ANDPAD Inc. All Rights Reserved. We are
hiring! 23 https://engineer.andpad.co.jp/ 技術スタックや募集ポジションを 掲載してます!