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
110
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
読もう! Android build ドキュメント
andpad
1
250
アンドパッドにおける CocoaPods ライブラリ群の SwiftPackageManager への移行戦略
andpad
0
81
Flutter は DCM が 9 割
andpad
1
110
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
andpad
0
79
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
450
本編では話さない Zig の話
andpad
2
300
"noncopyable types" の使いどころについて考えてみた
andpad
0
440
ANDPAD黒板のオフラインモード機能 リリースまでの軌跡
andpad
0
360
アンドパッドのマルチプロダクト戦略を支える SRE
andpad
1
300
Other Decks in Technology
See All in Technology
Recap of Next - Google Cloud で実践する クラウドネイティブ最前線 / The Frontlines of Cloud-Native with Insights from Google Cloud
aoto
PRO
1
100
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
230
フロントエンドも盛り上げたい!フロントエンドCBとAmplifyの軌跡
mkdev10
2
280
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
0
330
React ABC Questions
hirotomoyamada
0
160
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
140
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
720
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
6
5.8k
Dynamic Reteaming And Self Organization
miholovesq
3
500
ここはMCPの夜明けまえ
nwiizo
15
6.4k
Creating Awesome Change in SmartNews
martin_lover
1
280
AWSLambdaMCPServerを使ってツールとMCPサーバを分離する
tkikuchi
1
3k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Thoughts on Productivity
jonyablonski
69
4.6k
Being A Developer After 40
akosma
91
590k
Designing Experiences People Love
moore
141
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
550
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Side Projects
sachag
452
42k
Statistics for Hackers
jakevdp
798
220k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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/ 技術スタックや募集ポジションを 掲載してます!