はじめに
Angularで作成したToDoアプリをVercelでデプロイしようとしたところ、いくつかつまずきやすいポイントがあったのでまとめます。
Angular × Vercel は公式に強く推されている組み合わせではない分、事前に知っておくとスムーズだと思いました。
そもそもVercelとは？
Vercel はもともと Next.js 向けに最適化されたホスティングサービスです。
Angular は Vercel の「公式対応フレームワーク」ではないので、Presetの自動設定を信じると誤った推測設定が行われる可能性が高くなるとのことでした。
1.Vercel の Framework Preset では Other を選ぶのが正解
Vercel の Preset は：
「このフレームワークならビルドコマンド・出力先・ルーティング全部こっちで決めとくよ」
👉️Next.js等で作業している場合、このPresetを使うのがすごく便利なんですが、Angularの場合だと素で設定したほうがデプロイがスムーズにいくことが多いようです。
その他設定
- Root Directory：空欄
- Build Command：ng build
- Output Directory：dist/プロジェクト名
index.html が入っているフォルダ
2.vercel.jsonの作成
リポジトリ直下に以下ファイルを作成
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
おわりに
Vercel は Next.js 向けのイメージが強いですが、設定を正しく行えばAngular のホスティングにも十分対応できます。
Angular × Vercel で詰まっている方の参考になれば幸いです。