アドベントカレンダー5日目は、エンジニアの髙木です！
今回の記事は、Laravelで構築した静的ページをVercelでデプロイし、表示する方法についてまとめました。
Vercelには、Gitのブランチごとにデプロイを行える「ブランチプレビュー」機能があり、レンタルサーバーへデプロイする場合と比べてテストサイトを手軽に準備できるのが魅力です。
LaravelをVercelでデプロイして表示したい方のヒントになると嬉しいです。
▽neccoのアドベントカレンダーはこちらから
VercelでLaravelをデプロイしようと思ったきっかけ
納品後、Laravelへの組み込みを希望されるプロジェクトに携わることがあり、Laravel / Bladeで構築した静的ページを、プレビューで確認できるようにVercelでデプロイしました。
LaravelをVercelでデプロイするという記事が数記事ありましたが、今回のデプロイで設定が必要となるvercel.jsonファイルの内容を参考記事と同じように設定し検証しても、私の環境では再現できず、少々苦戦しました。
▽当時、参考にした記事はこちら
Bladeとは
Bladeは、Laravelに標準搭載されているテンプレートエンジンです。レイアウトの共通化やコンポーネントの再利用を可能にします。
ローカル環境のセットアップ
はじめに、ローカル環境のセットアップを行います。
前提
- Composerがインストールされていること
- Gitアカウントがあること
- Vercelアカウントがあること
Composerは、ターミナルで composer -V を実行すると、インストールされているか確認できます。インストールしていない場合は、公式ドキュメントの手順に従ってインストールしてください。
Gitアカウントは、Vercelにインポートしてデプロイするために必要です。
検証した環境
今回は、以下で検証を行いました。
- Laravel Framework 12.26.2
Laravelをセットアップする
1. アプリケーションを作成する
以下のコマンドを実行し、新規のアプリケーションを作成します。
composer create-project laravel/laravel my-laravel-app
2. サーバーを起動する
アプリケーションを作成したら、作成したディレクトリに移動し、以下のコマンドを実行してサーバーを起動します。
php artisan serve
3. Laravelのウェルカムページを開く
サーバーを起動すると、ターミナルにローカルのURLが表示されます。
表示されたURLをクリックすると、Laravelのウェルカムページを開くことができます。
ウェルカムページが表示されれば、アプリケーションのセットアップは完了です。
Bladeを用いて表示用のファイルを作成する
Bladeでレイアウトコンポーネントを作成し、表示用のファイルを作成します。
以下のコマンドを実行し、レイアウトコンポーネントを作成します。
php artisan make:component Layout
コマンドを実行すると、resources/viewsディレクトリ内に、componentsディレクトリとlayout.blade.phpが生成されます。
layout.blade.phpを編集する
以下のようにレイアウトコンポーネントとして使用できるように内容を書き換えておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LaravelをVercelでデプロイする</title>
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
</head>
<body>
<header>
<h1>necco Laravel Sample</h1>
</header>
<hr>
<main>
{{ $slot }}
</main>
<hr>
<footer>
© 2025 necco.inc
</footer>
</body>
</html>上記のサンプルコードでは {{ $slot }} を利用しています。
{{ $slot }} を使うとコンポーネントを呼び出したときに「中に書いたコンテンツ」が、{{ $slot }} の部分に差し込まれます。
welcome.blade.php の内容を書き換える
resources/views/welcome.blade.phpの内容をlayoutコンポーネントを使用した形に書き換えます。
コンポーネントは、<x-component-name> タグを利用して、インポートします。
<x-layout>
<div>
<h2>Hello World!</h2>
<p>LaravelをVercelでデプロイしてみよう✨</p>
</div>
</x-layout>表示することができました。
ローカルで表示した、こちらの静的ページをVercelでデプロイします。
Vercelのセットアップをする
まずは、LaravelをVercelのServerless Functions上で動かせるように、必要なパッケージを導入します。
以下のコマンドを実行します。
composer require revolution/laravel-vercel-installer --dev
コマンドを実行すると、composer.jsonに以下の内容が追加されます。
"require-dev": {
"revolution/laravel-vercel-installer": "^1.3"
},次に以下のコマンドを実行します。
php artisan vercel:install
このコマンドは Vercel で Laravel アプリを動かすために必要な以下のファイルが自動生成されます。
- api/index.php
- vercel.json
- .vercelignore
- そのほか Vercel 専用の補助ファイル
vercel.jsonをセットアップ
vercel.jsonの内容を以下に書き換えます。
{
"regions": ["hnd1"],
"functions": {
"api/index.php": {
"runtime": "vercel-php@0.7.3"
}
},
"routes": [
{
"src": "/build/(.*)",
"dest": "/public/build/"
},
{ "src": "/images/(.*)", "dest": "/public/images/$1" },
{
"src": "/(.*)",
"dest": "/api/index.php"
}
],
"env": {
"APP_NAME": "Laravel Vercel",
"APP_DEBUG": "false",
"APP_CONFIG_CACHE": "/tmp/config.php",
"APP_EVENTS_CACHE": "/tmp/events.php",
"APP_PACKAGES_CACHE": "/tmp/packages.php",
"APP_ROUTES_CACHE": "/tmp/routes.php",
"APP_SERVICES_CACHE": "/tmp/services.php",
"CACHE_DRIVER": "array",
"CACHE_STORE": "array",
"LOG_CHANNEL": "stderr",
"SESSION_DRIVER": "cookie",
"VIEW_COMPILED_PATH": "/tmp"
}
}
書き換えのポイント✍️
Vercel の現行仕様に寄せた設定に変更しています。
- 生成されるデフォルトの設定にbuildsプロパティが含まれていますが、公式で非推奨となっているためfunctionsプロパティへ変更します
- 静的ファイルをbuildsで/public/**を丸ごと指定するのではなく、routesで/build, /imagesを個別指定
- favicon, robots.txtを直書きを省略し、代わりに/imagesを追加
GitHubにリポジトリを作成する
GitHubにリポジトリを作成し、今までの設定をマージします。
Vercel でデプロイする
設定にはデプロイ後のURLが必要となるため、一度デプロイします。まだ設定が全て完了していないため、デプロイは「失敗」します。ここで失敗しても問題ありません。
Vercel のダッシュボードから Output Directory を設定
General > Build & Development Settingsから Output Directory を設定します。Output Directory に public を入力して、Overrideします。
Vercel のダッシュボードから環境変数を設定
ダッシュボードから以下の環境変数を設定します。
- APP_KEY：（例）base64:XXXXXXXXXXXXXXXX
- ASSET_URL：（例）laravel-vercel-app.vercel.app
APP_KEY
Laravelを構築した時に生成される.envから取得します。
ASSET_URL
デプロイ後のURLを使用します。アセット（CSS、JavaScript、画像など）のURLを生成する際に使用されます。
Vercelで再度デプロイを実施
Vercelの設定が完了したら、再度 Redeploy をクリックしてデプロイを行います。
デプロイが成功したら設定完了です🎉
デプロイのURLで表示を確認する
表示の確認ができたら全ての作業が完了です✨
さいごに
これまでは、Next.jsやAstroを採用したプロジェクトでのみVercelを利用していました。
今回は、お客さまのご要望もあり Laravel / Blade で作成した静的なページをVercelでデプロイする方法について検証しました。
LaravelをVercelでデプロイする記事はいくつか見つかったものの、記事によってvercel.jsonの記載内容が異なり、同じ手順ではデプロイが成功せず、試行錯誤しながらの検証となりました。
本記事が、私と同じようにVercelでのデプロイを再現できずに困っている方にとって、少しでもヒントになれば嬉しいです。
neccoのアドベントカレンダーは以下のリンクからご覧いただけます。ぜひ、他のメンバーの記事もご覧いただけると嬉しいです。
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
- アシスタントデザイナー
- フロントエンドエンジニア
- アシスタントフロントエンドエンジニア
🗒 会社案内資料もご活用ください。
会社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
2025年12月3日更新
