実際にホスティングしたもの
Vercel：https://alpine-vite.vercel.app/
Amplify：https://main.d1t4s66fikur1.amplifyapp.com/
S3・CloudFront：https://d2m5m5l1wi4ogl.cloudfront.net/
背景
S3 + CloudFrontを利用してのWebアプリデプロイは実施したことがあるが、VercelやAWS Amplifyなど、フロントエンドのデプロイや関連機能をまとめて扱えるサービスを使ったことがなかったので、AWSの復習も兼ねて触ってみよういう感じです！
ホスティングの全体像
雑にMermaid図作ってみましたが、アプリビルド後のフローをVercel、AWS（S3,CloudFront）で分ける感じですね。
前準備
-
Webアプリ
以前の記事で作成したAlpine.js + Viteアプリを利用します。
https://github.com/shiranaiHito999/alpine-vite -
WSL
-
Vercelアカウント
-
AWSアカウント
-
AWS CLI v2
Vercel
まず、個人的メインテーマであるVercelから試していきます。
とはいえ、簡単なデプロイや高速パフォーマンスを謳っているのもあり、手順は以下で完了でした。
- vercel.com でアカウント作成し GitHub 連携
- 「New Project」で対象リポジトリをインポート
- ビルド設定を確認・入力する（基本、Vercel は Vite を自動検出する）
Build Command: npm run build
Output Directory: dist
4.「Deploy」 → 数分で完了、自動的に *.vercel.app の URL が発行される。
ビルド設定に問題があるなど微妙にトラブルありつつ、連携自体はすぐに完了しました。Webアプリ初期表示プレビューなどもあり、UIもかっこいい感じで、個人的にはかなり気に入りました。
・正常完了したデプロイ画面
Amplify
次に、Amplifyを試してみます。こちらも初めて利用しますが、UIもわかりやすく、Vercelとほぼ同じ手順で完了しました。
- 「新しいアプリを作成」→ GitHubを選択してアカウントを連携
- リポジトリ・ブランチを設定
- アプリケーションのビルド・パス設定
- deploy
先のVercelデプロイで、ビルドの問題などを解消していたのもあり、こちらは本当に数分でリポジトリ連携→公開までたどり着けました。
・デプロイしたアプリの概要画面
S3・CloudFront
最後に、S3・CloudFrontでのデプロイを実施します。こちらはリポジトリを連携するのではなく、作成したAWSリソースにビルドしたアプリを配置する、という作業を自分で実施する感じです。手順は以下です。
※認証などの細かい手順まで説明すると、別記事が書けてしまうので、デプロイ作業以外は簡単な手順にします。
- IAM Identity Center (SSO)でデプロイ用ユーザー作成
- AWS CLI に SSO プロファイルの設定
- S3バケット作成
- CloudFront ディストリビューション作成
- Make コマンドでデプロイ
作業多いわりに説明が雑なので、このセクションは読み飛ばしていいです。
IAM Identity Center (SSO)でデプロイ用ユーザー作成
IAM Identity Centerを利用してみたかったので、選択しましたが、S3・CloudFrontへのフルアクセスを設定したIAMユーザーでも問題ないです。
AWS CLI に SSO プロファイルの設定
aws configure ssoで、以下を設定します。設定後に、~/.aws/configにプロファイルが追加されます。
対話形式で以下を入力する:
- SSO session name: `alpine-vite-session`
- SSO start URL: `https://<your-instance>.awsapps.com/start`
- SSO region: `ap-northeast-1`
- Default client Region: `ap-northeast-1`
- Default output format: `json`
認証画面
makeコマンド利用するため、WSLでプロファイル設定する or シンボリックリンクでWindows側を読むように設定します
S3バケット作成
ap-northeast-1に作成します。バケット名はグローバルにユニークである必要があるので、alpine-vite-<適当な文字列>で作成。バケット名はデプロイで利用します。
CloudFront ディストリビューション作成
手順が少し多いですが、あまりカスタマイズする箇所はないので、大体はデフォルト設定で作成。
- AWS コンソール → CloudFront → 「ディストリビューションを作成」
- オリジンドメイン: 作成した S3 バケットを選択
- S3 バケットアクセス: 「Origin access control settings (recommended)」 を選択
・「Create new OAC」でコントロールを作成 - Default root object:
index.html - ビューワープロトコルポリシー:
Redirect HTTP to HTTPS
Make コマンドでデプロイ
利用したMakefile：https://github.com/shiranaiHito999/alpine-vite/blob/main/Makefile
※細かいIDなどの環境設定は、ローカルで設定しています。
make login # SSO 認証（ブラウザ + MFA）
make whoami # 認証確認（ARN が表示される）
make deploy # ビルド + S3 アップロード + CloudFront キャッシュ破棄
# make deployがメインで、実コマンドは以下
# 1. npm run build
# 2. s3 sync
# 3. aws cloudfront create-invalidation
3つ触ってみた比較
感触としては、Vercel、Amplifyが手間の軽さや思想的なところが近く感じました。
S3 + CloudFront は設定項目が細かくあり敷居は高いですが、把握できれば、ブラックボックスになる部分を減らせる、という感じでした。
主観ベースですが、整理してみた比較表です。
| Vercel | Amplify | S3 + CloudFront | |
|---|---|---|---|
| 初回デプロイ速度 | ◎（最速） | ○ | △ |
| 設定の簡単さ | ◎ | ○ | △ |
| CI/CD | ◎（Git連携） | ◎（Git連携） | △（自前構築） |
| カスタマイズ性 | ○（フロント用途に限る） | ○ | ◎ |
| 運用の柔軟性 | ○（フロント用途に限る） | ○ | ◎ |
| AWSとの親和性 | △ | ◎ | ◎ |
| インフラ意識 | ほぼ不要 | やや必要 | 必須 |
| 学習用途 | △ | ○ | ◎ |
それぞれの適した場面
比較を踏まえて、適している場面などを整理してみました。
Vercel
- 個人開発でとにかく早く公開したい
- フロントエンド中心のアプリを開発したい
- インフラを意識せずに開発したい
GitHub連携だけで即デプロイできるため、Webアプリを学習し始めの初学者が「自分が作ったものを公開できた」など、達成感を得るのにはかなりいい気がしました。
（業務利用は、自分がまだまだ経験不足なのもあり、あまり具体的な場面は思いつきませんでした。。。）
Amplify
- バックエンドも含めたアプリを構築したい
- AWSサービスと連携しながら開発したい
- 手軽さと拡張性のバランスを取りたい
AWSアカウントは必要なものの、デプロイの簡単さを保ちつつAWSリソースとの統合もできるため、個人開発から業務寄りの構成まで対応しやすい印象です。
今回は、Vercelとほぼ変わらない扱いをしましたが、当然他のAWSリソースとの連携設定はあるので、フロント要件が複雑でなければ、業務でも十分対応できる場面があるんだろうな、となりました。
S3 + CloudFront
- AWSの仕組みを理解したい
- 業務に近い構成を試したい
- コストを抑えて静的配信したい
AWSアカウントに加え、ローカルからの認証設定など、構築の手間は他2つに比べるとかかりますが、それゆえの厳密さが強みですね。業務では、ブラックボックスになってしまう部分はやはり減らしたいので、個人的には安心感があります。
また個人学習としても、一から細かく設定してみる経験は良いものだと思うので、AWS資格の学習の際などに実施してもいい気もします。
感想・まとめ
（記事の構成が未だにわからず、各所で適当に感想言ってしまっているが、ここが感想です）
結論としては、次のように使い分けるのが良さそうだなという感想です。
- 個人開発アプリをサクッとホスティングしたい → Vercel、次いでAmplify
- バックエンドも欲しいアプリ → Amplify
- AWS学習目的、業務っぽい構成を作りたい → S3＋CloudFront（＋その他のAWSリソース）
とはいえ、こんなの触らなくてもわかるという感じなので、もう少し踏み込んだ感想だと、以下ですね。
Vercel は謳い文句通り、とても手軽に利用できてWebアプリ学習時のホスティング込みの成功体験を得やすそうで良かったです。
ただ自分は業務的な観点では、AWSリソースとの親和性を考えてしまうので、そういう意味では Amplify がデプロイ楽しつつ、カスタムドメインやバックエンド・DBなどを連携する拡張性があるように感じたため、こちらのほうが好みでした。
なので、次は Amplify を拡張して何かという感じで行きたいですね。