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
0
15
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
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
andpad
0
57
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
390
本編では話さない Zig の話
andpad
2
250
"noncopyable types" の使いどころについて考えてみた
andpad
0
380
ANDPAD黒板のオフラインモード機能 リリースまでの軌跡
andpad
0
250
アンドパッドのマルチプロダクト戦略を支える SRE
andpad
1
240
Introduction of Cybersecurity with OSS (RDRC2024)
andpad
1
69
開発チームとともに進めるインフラセキュリティの継続的な改善
andpad
2
110
ANDPAD and Ruby
andpad
1
800
Other Decks in Technology
See All in Technology
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
210
分解して理解する Aspire
nenonaninu
2
480
The Future of SEO: The Impact of AI on Search
badams
0
240
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
140
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
220
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
130
Windows の新しい管理者保護モード
murachiakira
0
170
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
130
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
170
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.1k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
250
デスクトップだけじゃないUbuntu
mtyshibata
0
540
Featured
See All Featured
RailsConf 2023
tenderlove
29
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Making the Leap to Tech Lead
cromwellryan
133
9.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
4 Signs Your Business is Dying
shpigford
182
22k
Faster Mobile Websites
deanohume
306
31k
The Language of Interfaces
destraynor
156
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
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/ 技術スタックや募集ポジションを 掲載してます!