はじめに

こちらの記事を拝見して、Vercelいいじゃん！って思って自分でもやろうとしたけどめちゃくちゃ詰まって、radditや海外の記事、果てはNeonの公式Discordまで色々探してどうにかうまくいったので備忘録としてまとめておきます。

対象者

なるべくGUIベースでわかりやすく行きたい人
従量課金が怖い人

Vercelのいいとこ

hobbyプランなら従量課金もなく完全無料（個人的かつ非営利な目的に限る）
SSLの自動設定
PostgresDBが無料で1つ使える
gitのリポジトリと連携して自動デプロイ

CI/CDがブラックボックス化していますが、シンプルでわかりやすく、SQLサーバーを別に用意しなくてもいいという点でとても楽だなと思います。

導入方法

Laravelのプロジェクトと、それを管理するリポジトリはあるものとします

1. パッケージ導入

まずVercelにLaravelをデプロイするためのパッケージを導入します。

Laravelのプロジェクトファイル以下で以下のコマンドを実行します。

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

すると諸々ファイルが追加されるので、その中でvercelの設定ファイルである vercel.jsonを編集します。

vercel.json

{
    "regions": [
        "hnd1"
    ],
    "functions": {
        "api/index.php": {
            "runtime": "vercel-php@0.6.2"
        }
    },
    "routes": [
        {
            "src": "/build/(.*)",
            "dest": "/public/build/"
        },
        {
            "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"
    }
}

自分はphpのバージョンが8.2なので、対応するvercel-php@0.6.2を記載していますが、以下を参考に対応するバージョンを記載してください

修正が終わったらmainブランチにプッシュしておきます。

2. Vercelの設定

2.1 Vercelのアカウント作成

GitHubからログインしておくと後が楽です。

2.2 プロジェクトの作成

Add NewからProjectを選択して、デプロイしたいGitのプロジェクトをImportします。

FrameworkはVite、Environment VariablesでLaravelプロジェクト.envにあるのAPP_KEYを入力、AddしてからDeployします。
※このDeployは失敗します

2.3 プロジェクトの設定

ProjectのSettingsを開き、以下2点を編集します

GeneralのOutput DirectoryをpublicにOverrideしてSave
Node.js Versionを18.xに変更してSave

変更が終わったらDeploymentsタブにある失敗したデプロイの三点リーダーからRedeployします。

終わったらVisitしてみて、こんな感じでLaravelっぽい画面が出てたら成功です。

3. DBの作成と接続

3.1 DBの作成

StorageタブのCreate DatabaseからPostgresを作成します。

作成したものをクリックすると、Quickstartのところにpsqlがあると思うのでそれをコピーしておきます

3.2 ローカルでDBに接続

ローカル環境で接続してmigrationを走らせます。

.envを編集します。

.env

DB_CONNECTION=pgsql
DB_HOST=ep-misty-snow-a14m8di4.ap-southeast-1.aws.neon.tech
DB_PORT=5432
DB_DATABASE=verceldb
DB_USERNAME=default
DB_PASSWORD=endpoint=ep-misty-snow-a14m8di4;{password}
DATABASE_URL=postgres://default:{password}@ep-misty-snow-a14m8di4-pooler.ap-southeast-1.aws.neon.tech?sslmode=require

それぞれの値は先ほどQuickstartでコピーした値を参考にして作成していきます。
URLは全体から、port番号とDB名を抜いておきます。


psql "postgres://default:************@ep-misty-snow-a14m8di4.ap-southeast-1.aws.neon.tech:5432/verceldb?sslmode=require"
                | user  |  passwprd  |                 DB HOST                           |port|database|
      |                                                     URL                                                        |

ローカルでphp artisan migrateして、DBに問題なく接続してmigrationが実行できることを確認します。

3.3 VercelでDBに接続

ProjectのSetting > Environment Variablesに先ほど.envに記載したものを追加していきます。

最終的にこんな感じです。

補足：Vercel Storageの方からprojectに紐づけすると、POSTGRES_URLなどの環境変数が追加されて自分はうまくいかなかったです。

4. 確認

環境変数を変えたのでRedeployしておきます。

自分はBleezeを入れておいたので、ユーザーを作成してみます。

無事ユーザーが作成でき、VercelのStorageタブからクエリを走らせてみても、DBに情報が入っていることが確認できました。

補足

実際にデプロイしてみて、500エラーは出るもののLogのstack trace見てもなんかよくわかんないってときは、この記事のLoggingの設定を真似したらいい感じに表示されるようになりました。

おわりに

vercel.jsonの書き方やNode.jsのバージョンあたりがなかなか正解にたどり着かず、途中Fly.ioやlightsail、GCPも試したりしてみたのですが、上手くいってしまえば一番Vercelがシンプルでした。

おすすめの無料PaaSがあれば教えてください。