VercelにLaravel11をデプロイ！詰まった点の備忘録

今回はAWSではなく、 「すぐにデプロイしたい！」「費用を抑えたい！」
そんな希望から調べた結果、Vercelという「GitHubと連携することで簡単にデプロイが始められる」サービスを発見しました。
実際に試してみると、予想以上に詰まる場面があり、特に仕組みの理解や設定に時間がかかりました。
ここでは、その過程で学んだことを備忘録としてまとめます。

参考にした記事

以下の記事を参考にデプロイ作業を進めました。貴重な情報をありがとうございます！

Vercelとは？

Vercelは、以下の特徴を持つデプロイサービスです。

• 無料で利用可能
• GitHubなどのリポジトリと連携し、アプリケーションを簡単にデプロイ可能
• プッシュするだけで自動ビルド＆デプロイ

前提

今回のデプロイ環境の前提条件は以下の通りです。

• Vercelアカウント作成済み（GitHubとの連携も完了）
• GitHubリポジトリ作成済み
• Gitインストール済み
• ローカルでLaravelがインストール済み
• バージョン情報：
  　- PHP version 8.3.10
  　- Laravel Framework 11.34.2

操作方法

まず、ローカルのLaravelプロジェクトのルートディレクトリで以下を実行します

composer require revolution/laravel-vercel-installer --dev
php artisan vercel:install

この操作で複数のファイルが追加されます。
その中で、 vercel.json の編集が必要です。
ここで私は詰まりました。

詰まった点(その後の操作手順)

vercel.jsonの編集

このファイルは環境に合わせた設定が重要です。
公式ドキュメントやサンプルを参考にすることをお勧めします！

vercel.jsonの公式推奨サンプル

ちなみに私の環境では以下のように設定しました。

{
    "version": 2,
    "regions": [
        "hnd1"
    ],
    "builds": [
        {
            "src": "/api/index.php",
            "use": "vercel-php@0.6.2"
        },
        {
            "src": "/public/**",
            "use": "@vercel/static"
        }
    ],
    "routes": [
        {
            "src": "/(css|js|image)/(.*)",
            "dest": "public/$1/$2"
        },
        {
            "src": "/favicon.ico",
            "dest": "/public/favicon.ico"
        },
        {
            "src": "/robots.txt",
            "dest": "/public/robots.txt"
        },
        {
            "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"
    }
}

環境変数の設定

リポジトリを連携してDeploy!だけではうまくいきません。
環境変数の設定が必要です。

手順

1. ローカル上で.env.exampleをコピーして、新しく.env.productionを作成
2. 以下2点書き加える

• APP_KEY（ローカルの.envファイルからコピー）
• APP_ENV=production

その後、Vercelの設定画面で環境変数を一括インポート(.env.productionをインポート)しました。
この方法は非常に効率的で、メンターさんからも推奨されました。
以下の画像のように進めます。

インポート後、ひとまずSAVEする。
ひとまずReDeploy。(この時はHTMLだけデプロイされた状態になっています)

CSSや画像もデプロイする

環境変数の設定で以下2つを修正します。

• APP_URL：デプロイ後のURLを設定（最後のスラッシュは削除）
• ASSET_URL：同上

その他の設定

Build & Development Settings

• OutPut Directoryを public に変更
• Node.js Versionを 18.X に設定

これでReDeploy！成功！

感想

Vercelのシンプルさは魅力的ですが、vercel.jsonや環境変数の設定に手こずりました。特にLaravel特有の設定が必要な部分は、事前に知識を持っているとスムーズです。
AWSと比較すると設定作業は少なく、費用面でも抑えられるため、小規模なプロジェクトや簡単なデモには最適だと感じました。