Qiita Engineer Festa20242024年7月17日まで開催中！

VercelでLaravel10をデプロイしてVercel Strage(DB)を繋ぐ

Last updated at 2024-07-13Posted at 2024-07-13

はじめに

こちらの記事を拝見して、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が実行できることを確認します。