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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Copyright © 2025 ANDPAD Inc. All Rights Reserved. 2 自己紹介角井暖 / Dan Kadoi ● @cass7ius ● ERP パッケージベンダーで DevOps を経験し、 2019年8月よりアンドパッドのSREに参画 ● 急速に成長するバーティカル SaaS 、拡大する開発組織ならではの課題を、 Platform / SRE 領域の技術で解決する ● SREチームのマネージャー

Slide 3

Slide 3 text

アンドパッドの紹介

Slide 4

Slide 4 text

現場の効率化から経営改善まで一元管理できる建設DX プロジェクト管理サービス

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

AWS Amplifyについて

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Copyright © 2025 ANDPAD Inc. All Rights Reserved. Amplify Hostingは、便利で良い事ばかりではない ● 最近S3のウェブサイトホスティングに対応したり、WAFを紐付けられるようにもなり、めまぐるしく進化している ● 一方で、マネージドサービスには裏側で何が起きているか分からないことに由来する、使用感の「癖」がある ● AWS Amplifyに限らず、この癖を理解して使いこなす必要がある 9

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Amplify Hostingでビルド出来なくなった事例

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Copyright © 2025 ANDPAD Inc. All Rights Reserved. 教訓1：Amplify Hostingのリソースは、ドリフトが分かるようにTerraformで宣言的に管理しよう ● Terraformで宣言的に管理しておくと、コードに書いてない属性であっても最後にapplyされた状態がstateに記録されている ● terraform planすれば差分が出るので、最後にapplyされた状態に対して現在のリソースがドリフトしていることが分かる CLIで構成管理しているとドリフト検知できず、ビルド失敗の理由が分かりづらい 14

Slide 15

Slide 15 text

Copyright © 2025 ANDPAD Inc. All Rights Reserved. 教訓2：ある日突然ビルドできなくなっても慌てない ● Amplify Hostingではビルドとデプロイが一気通貫しているため、ビルド出来ないと継続的デリバリーが滞る ● しかしビルドが出来ないだけで、デプロイ済の既存のコンテンツは壊れてないいま公開されているホスティングサイトは無事関係各所にリリーススケジュールの温度感を確認して、落ち着いて調査をする 15

Slide 16

Slide 16 text

めでたしめでたし、とはいかず数ヶ月後に別のアプリで再発

Slide 17

Slide 17 text

Copyright © 2025 ANDPAD Inc. All Rights Reserved. ● SPAアプリをNuxt3.14に更新してから、ビルドの失敗が再発した ○ platform属性が「WEB」から「WEB_COMPUTE」に変わっていたため ● 開発チームと最近の変更内容やライブラリ依存関係を調査調査が難航したため、AWSサポートに問い合わせをして支援を要請 Nuxt3.14に更新したら、再度ビルドできなくなった 17

Slide 18

Slide 18 text

Copyright © 2025 ANDPAD Inc. All Rights Reserved. なぜplatform属性は勝手に書き換わる？ ● nitropackの最新版で、nuxt.conﬁg.tsでpresetが指定されていない場合の deploy-manifest.jsonの生成結果が変更されたことが原因だった ● presetに値が設定されていない場合にデプロイ先のplatformを検出し、それに応じた presetを選択する挙動になる（※未指定だとpresetにSSRが選択される） nuxt.conﬁg.tsにnitropack用の設定を追記することで、ビルドが成功するようになった🎉 18

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Copyright © 2025 ANDPAD Inc. All Rights Reserved. ● たとえ問題を再現可能な最小構成を共有する事ができなくても、AWSサポートに頼ることで原因調査が進む場合がある遠慮せずにAWSサポートを頼ろう ● また、類似の事象が報告されている場合があるので、Issuesもチェックする https://github.com/aws-amplify/docs/issues 教訓3：再現環境を作るのが難しくても、 AWSサポートを頼って問い合わせしてみよう 20

Slide 21

Slide 21 text

Amplify Hostingのビルドトラブルから得た教訓

Slide 22

Slide 22 text

Copyright © 2025 ANDPAD Inc. All Rights Reserved. これからAmplify Hostingを利用する人にアドバイスするとしたら？ ● アンドパッドでは、多くのプロダクトでAmplify Hostingを利用している ● 様々なトラブルシュートを経験し、以下3つの教訓を得た 22 1 Amplify Hostingのリソースは、ドリフトが分かるように Terraformで宣言的に管理しよう 2 ある日突然ビルドできなくなっても慌てない。いま公開されているホスティングサイトは無事 3 再現環境を作るのが難しくても、AWSサポートを頼って問い合わせしてみよう