Amplify で SPA をホスティングする際の注意点

角井 暖 @cass7ius
SRE チーム マネージャ
2025 年 2 月 21 日
ゆるSRE勉強会 #9 〜最近始めた取り組み共有大会〜

Transcript

1. Copyright © 2025 ANDPAD Inc. All Rights Reserved. Amplify で SPA をホスティングする際の 注意点 株式会社アンドパッド 開発本部 SRE　角井 暖 2025/02/21 ゆるSRE勉強会 #9 〜最近始めた取り組み共有大会〜
2. Copyright © 2025 ANDPAD Inc. All Rights Reserved. 2 自己紹介 角井 暖 / Dan Kadoi • @cass7ius • ERP パッケージベンダーで DevOps を経験し、 2019年8月よりアンドパッドのSREに参画 • 急速に成長するバーティカル SaaS 、 拡大する開発組織ならではの課題を、 Platform / SRE 領域の技術で解決する • SREチームのマネージャー
3. アンドパッドの紹介
4. 現場の効率化から経営改善まで一元管理できる 建設DX プロジェクト管理サービス
5. Copyright © 2025 ANDPAD Inc. All Rights Reserved. 次々と新プロダクトをリリース 5
6. 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
7. AWS Amplifyについて
8. 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
9. Copyright © 2025 ANDPAD Inc. All Rights Reserved. Amplify Hostingは、便利で良い事ばかりではない • 最近S3のウェブサイトホスティングに対応したり、WAFを紐付けられるように もなり、めまぐるしく進化している • 一方で、マネージドサービスには 裏側で何が起きているか分からないことに由来する、使用感の「癖」がある • AWS Amplifyに限らず、この癖を理解して使いこなす必要がある 9
10. Copyright © 2025 ANDPAD Inc. All Rights Reserved. Amplify Hostingの「癖」に悩まされた事例を紹介 1. アプリをNuxt3に更新したら、ビルドできなくなった事例 2. アプリをNuxt3.14に更新したら、再度ビルドできなくなった事例 10
11. Amplify Hostingで ビルド出来なくなった事例
12. 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
13. 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
14. Copyright © 2025 ANDPAD Inc. All Rights Reserved. 教訓1：Amplify Hostingのリソースは、 ドリフトが分かるようにTerraformで宣言的に管理しよう • Terraformで宣言的に管理しておくと、コードに書いてない属性であっても最後 にapplyされた状態がstateに記録されている • terraform planすれば差分が出るので、最後にapplyされた状態に対して現在のリ ソースがドリフトしていることが分かる CLIで構成管理しているとドリフト検知できず、ビルド失敗の理由が分かりづらい 14
15. Copyright © 2025 ANDPAD Inc. All Rights Reserved. 教訓2：ある日突然ビルドできなくなっても慌てない • Amplify Hostingではビルドとデプロイが一気通貫しているため、 ビルド出来ないと継続的デリバリーが滞る • しかしビルドが出来ないだけで、デプロイ済の既存のコンテンツは壊れてない いま公開されているホスティングサイトは無事 関係各所にリリーススケジュールの温度感を確認して、落ち着いて調査をする 15
16. めでたしめでたし、とはいかず 数ヶ月後に別のアプリで再発
17. Copyright © 2025 ANDPAD Inc. All Rights Reserved. • SPAアプリをNuxt3.14に更新してから、ビルドの失敗が再発した ◦ platform属性が「WEB」から「WEB_COMPUTE」に変わっていたため • 開発チームと最近の変更内容やライブラリ依存関係を調査 調査が難航したため、AWSサポートに問い合わせをして支援を要請 Nuxt3.14に更新したら、再度ビルドできなくなった 17
18. 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
19. Copyright © 2025 ANDPAD Inc. All Rights Reserved. platform属性の意図しない変更を防ぐための設定 • この前後のトラシューも含めて、最終的に以下の設定を開発チームに展開し、再発が収束 19
20. Copyright © 2025 ANDPAD Inc. All Rights Reserved. • たとえ問題を再現可能な最小構成を共有する事ができなくても、AWSサポート に頼ることで原因調査が進む場合がある 遠慮せずにAWSサポートを頼ろう • また、類似の事象が報告されている場合があるので、Issuesもチェックする https://github.com/aws-amplify/docs/issues 教訓3：再現環境を作るのが難しくても、 AWSサポートを頼って問い合わせしてみよう 20
21. Amplify Hostingのビルドトラブル から得た教訓
22. Copyright © 2025 ANDPAD Inc. All Rights Reserved. これからAmplify Hostingを利用する人にアドバイスする としたら？ • アンドパッドでは、多くのプロダクトでAmplify Hostingを利用している • 様々なトラブルシュートを経験し、以下3つの教訓を得た 22 1 Amplify Hostingのリソースは、ドリフトが分かるように Terraformで宣言的に管理しよう 2 ある日突然ビルドできなくなっても慌てない。いま公開され ているホスティングサイトは無事 3 再現環境を作るのが難しくても、AWSサポートを頼って問い 合わせしてみよう
23. Copyright © 2025 ANDPAD Inc. All Rights Reserved. We are hiring! 23 https://engineer.andpad.co.jp/ 技術スタックや募集ポジションを 掲載してます！