こんにちは、かつコーチです。
前回まではテスト編として、VitestやVue Test Utilsを使ったテストの書き方を解説してきました。
今回からはデプロイ・インフラ連携編に入り、作ったVueアプリを実際にインターネット上に公開する方法を扱います。
最初のテーマは、無料で始められて初心者にも扱いやすいNetlifyへのデプロイです。
Netlifyとは？
静的サイト・SPAのホスティングサービス
Netlifyは、Vueのようなフロントエンドアプリを簡単に公開できるホスティングサービスです。
GitHubなどのリポジトリと連携するだけで、コードをプッシュするたびに自動でビルド・公開まで行ってくれます。
サーバーの構築やSSL証明書の設定を自分で行う必要がなく、無料プランでも個人開発やポートフォリオサイトの公開には十分な機能が揃っています。
Vercelとの違い
同じようなサービスにVercelがありますが、どちらもVueやReactのようなSPA（シングルページアプリケーション）のホスティングに強いという点は共通しています。
Netlifyは、フォーム送信機能やリダイレクト設定など、静的サイト寄りの機能が手厚いのが特徴です。
「どちらを使うべきか迷う」という場合は、まずは片方を触ってみて、必要になったタイミングでもう一方も試してみるくらいの気軽さで問題ありません。
デプロイの準備
ビルドコマンドを確認する
Netlifyにデプロイする前に、ローカルで正しくビルドできることを確認しておきます。
npm run build
Viteで作ったVueプロジェクトの場合、このコマンドでdistフォルダに本番用のファイルが出力されます。
ここでエラーが出る場合、Netlify上でも同じエラーでビルドが失敗するため、先にローカルで解消しておくのが確実です。
GitHubにリポジトリをプッシュしておく
Netlifyとの連携にはGitHub（またはGitLab、Bitbucket）のリポジトリが必要です。
git add .
git commit -m "Netlifyデプロイ用に準備"
git push origin main
リポジトリの中身が最新の状態になっていることを確認してから、次のステップに進みます。
Netlifyでデプロイする
サイトの新規作成
Netlifyにサインアップし、ダッシュボードから「Add new site」→「Import an existing project」を選択します。
連携先としてGitHubを選び、対象のリポジトリを選択すると、ビルド設定の入力画面に進みます。
ビルド設定の入力
Vue（Vite）プロジェクトの場合、以下の設定を入力します。
| 項目 | 値 |
|---|---|
| Build command | npm run build |
| Publish directory | dist |
「Publish directory」は、ビルド後に生成される静的ファイルが置かれるフォルダを指定する項目です。
Viteのデフォルト設定であればdistを指定すれば問題ありません。
入力が終わったら「Deploy site」をクリックすると、ビルドとデプロイが自動で始まります。
数十秒〜数分ほど待つと、https://ランダムな文字列.netlify.appのようなURLでサイトが公開されます。
つまずきやすいポイント：ページ遷移で404になる
私が実際にハマった「リロードすると404」問題
VueアプリでVue Routerのhistoryモード（URLに#が付かないモード）を使っている場合、Netlifyの初期設定のままだと特有のエラーに遭遇します。
トップページからリンクをクリックして画面遷移する分には問題なく動くのに、/mypageのようなURLに直接アクセスしたり、その画面でリロードしたりすると「Page Not Found」が表示されてしまう現象です。
私自身、公開直後に知人からURLを直接送ってもらったところ「404になる」と指摘され、最初は原因が分からず焦った経験があります。
原因は、Netlifyのサーバーが/mypageというURLに対応する実ファイルを探しに行ってしまい、Vue Router側でルーティングを処理する前に「ファイルが見つからない」と判断してしまうことでした。
❌ Before：リダイレクト設定を何も用意していない
# プロジェクトに何も設定ファイルがない状態
dist/
index.html
assets/
SPAでは、本来すべてのURLへのアクセスをindex.htmlに集約し、そこからVue Routerがブラウザ側でルーティングを解決する仕組みになっています。
Netlifyにその仕組みを教えてあげないと、index.html以外のURLへの直接アクセスがすべて404になってしまいます。
✅ After：_redirectsファイルですべてのURLをindex.htmlに集約する
# public/_redirects
/* /index.html 200
publicフォルダに_redirectsという名前のファイルを作成し、この1行を記述します。
publicフォルダの中身はビルド時にそのままdistフォルダにコピーされるため、ビルド後もdist/_redirectsとして配置される仕組みです。
/*はすべてのパスにマッチする指定で、どんなURLへのアクセスもindex.htmlを200（成功）として返すように設定しています。
これにより、index.htmlが読み込まれた後はVue Router側で正しい画面に振り分けられるようになり、直接アクセスやリロードでも404にならなくなります。
応用：独自ドメインとカスタムビルド設定
独自ドメインの設定
Netlifyの「Domain settings」から、取得済みの独自ドメインを接続できます。
DNS設定でNetlifyが指定するレコードを追加するだけで、無料のSSL証明書も自動的に発行・更新されます。
netlify.tomlでの設定管理
ダッシュボード上でビルド設定を入力する代わりに、プロジェクト直下にnetlify.tomlというファイルを置いて設定をコードとして管理することもできます。
[build]
command = "npm run build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
_redirectsファイルの内容もnetlify.tomlにまとめて書けるため、設定をリポジトリ内で一元管理したい場合はこちらの方法がおすすめです。
まとめ
この記事のポイント
- Netlifyは、GitHubと連携するだけで自動ビルド・自動デプロイができる無料のホスティングサービス
- Vite製Vueプロジェクトでは、Build commandに
npm run build、Publish directoryにdistを指定する - Vue Routerの
historyモードを使う場合、_redirectsファイルがないと直接アクセスやリロードで404になる public/_redirectsに/* /index.html 200と書くことで、すべてのURLをindex.htmlに集約できる- 設定をコード管理したい場合は
netlify.tomlにビルド設定・リダイレクト設定をまとめられる
次に読むべき記事
次回は「環境ごとの環境変数管理（.env）」を解説します。
→ 次の記事：環境ごとの環境変数管理（.env）