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
230
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
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
読もう! Android build ドキュメント
andpad
1
390
アンドパッドにおける CocoaPods ライブラリ群の SwiftPackageManager への移行戦略
andpad
0
180
Flutter は DCM が 9 割
andpad
1
270
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
andpad
0
110
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
530
本編では話さない Zig の話
andpad
2
350
"noncopyable types" の使いどころについて考えてみた
andpad
0
500
ANDPAD黒板のオフラインモード機能 リリースまでの軌跡
andpad
0
620
Other Decks in Technology
See All in Technology
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.4k
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
380
Wasm元年
askua
0
100
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
130
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
280
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
170
Definition of Done
kawaguti
PRO
6
460
AIのAIによるAIのための出力評価と改善
chocoyama
0
510
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
360
Model Mondays S2E02: Model Context Protocol
nitya
0
190
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
9.5k
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
2
340
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Practical Orchestrator
shlominoach
188
11k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Balancing Empowerment & Direction
lara
1
340
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimizing for Happiness
mojombo
379
70k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Bash Introduction
62gerente
614
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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/ 技術スタックや募集ポジションを 掲載してます!