Laravel+Vercel+Neonを使って無料のデプロイ環境を構築

## 1. はじめに

どこかで**VercelでもNext.js以外のアプリをデプロイできる**という噂を聞いて、本当かなと思いつつ試してました。
**結論、動きます!** Laravelで実装したCRUD機能を含む管理画面をVercelにデプロイして実際に運用できています。
ただし、DBはVercelとは別に用意する必要があります。無料で長く使える**Neon**というPostgreSQLサービスと組み合わせることで、コスト効率の良い構成を実現しました！

この組み合わせにより、Laravelアプリケーションを無料で運用できる環境を構築できます。
（ただし、後述する制限があります）

## 2. 対象読者

- Laravelを使う方
- Vercelでアプリケーションをホスティングしたい方
- RDBを使用したい方
- Neonに興味がある方
- 無料または低コストでLaravelアプリケーションをデプロイしたい方

## 3. 目次
- [1. はじめに](#1-はじめに)
- [2. 対象読者](#2-対象読者)
- [3. 目次](#3-目次)
- [4. 環境](#4-環境)
- [5. サービスの紹介](#5-サービスの紹介)
  - [5-1. Vercelとは](#5-1-vercelとは)
  - [5-2. Neonとは](#5-2-neonとは)
- [6. 本編](#6-本編)
  - [6-1. Laravel側のデプロイ準備](#6-1-laravel側のデプロイ準備)
  - [6-2. Neonデータベースの接続情報](#6-2-neonデータベースの接続情報)
  - [6-3. Vercelの設定](#6-3-vercelの設定)
  - [6-4. Neonのマイグレーション実行](#6-4-neonのマイグレーション実行)
  - [6-5. 注意点](#6-5-注意点)
- [7. さいごに](#7-さいごに)
- [8. 参考サイト](#8-参考サイト)

## 4. 環境

本記事で紹介する環境は以下の通りです：

- アプリ側
  - PHP: 8.2
  - Laravel: 10.x

- ホスティング
  - Vercel

- データベース
  - Neon

## 5. サービスの紹介
### 5-1. Vercelとは

Vercelは、モダンなウェブアプリのためのクラウドプラットフォームです。
元々はNext.jsなどのJSフレームワーク向けだったらしいですが、今はPHPも使えるようになっています！
PHPだけではなく、GOやRubyなども使えるそうで、[ランタイム](https://vercel.com/docs/functions/runtimes)という機能を利用してサーバレス関数に変換しているそうです。

### 5-2. Neonとは

Neonは最近登場したサーバーレスPostgreSQLサービスです!
類似サービスで有名なのが**Supabase**があると思いますが、制限がSupabaseの方が厳しい印象でした。
そのため、今回は**Neon**を使うことに決めました。
比較に関しては[こちら](https://libproc.com/supabase-vs-neon/)のサイトを参考にしました！

## 6. 本編
### 6-1. Laravel側のデプロイ準備

Vercelのサーバーレス関数のエントリーポイントとして機能するためのファイル`api/index.php`を作成します。

```php
<?php
/**
* Here is the serverless function entry
* for deployment with Vercel.
*/
require __DIR__.'/../public/index.php';
```

次にVercelの設定ファイル`vercel.json`を作成します。

```json
{
    "version": 2,
    "regions": [
        "hnd1"
    ],
    "builds": [
        {
            "src": "api/index.php",
            "use": "vercel-php@0.6.2"
        },
        {
            "src": "public/**",
            "use": "vercel-php@0.6.2"
        }
    ],
    "routes": [
        {
            "src": "/build/(.*)",
            "dest": "/public/build/$1"
        },
        {
            "src": "/(.*)",
            "dest": "api/index.php"
        }
    ],
    "env": {
        "APP_NAME": "Laravel Vercel",
        "APP_DEBUG": "false",
        "APP_ENV": "production",
        "APP_URL": <VercelのURL>,
        "SESSION_SECURE_COOKIE": "true",
        "SANCTUM_STATEFUL_DOMAINS": <Vercelのドメイン>,
        "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"
    }
}
```

この設定ファイルでは以下の内容を指定しています。

- `regions`: デプロイするリージョン（この例では東京リージョン `hnd1`）
- `builds`: ビルド対象のファイル
  - `api/index.php`: サーバーレス関数のエントリーポイント
  - `public/**`: 静的ファイル（CSS、JavaScript、画像など）
- `routes`: リクエストのルーティング設定
  - 静的ファイルへのリクエストは `public` ディレクトリにルーティング
  - その他のリクエストはすべて `api/index.php` にルーティング
- `env`: 環境変数の設定
  - サーバーレス環境向けの最適化設定が含まれています

なお、データベース接続情報などの機密情報はVercelのダッシュボードで環境変数として設定しています。

また、Vercelにデプロイしないファイルやディレクトリを`.vercelignore`に設定します。

```bash
/vendor
/node_modules
/.env
```

このファイルでは、Vercelにアップロードしないファイルやディレクトリを指定します。


### 6-2. Neonデータベースの接続情報

Neonデータベースを構築する手順については省略します。
Neonデータベースに接続する下記の情報をVercelの環境変数に設定します。

- ホスト名
- データベース名
- ユーザー名
- パスワード

![cap2025_3_11_23_8_0_110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584089/48ac5900-4bd8-4df2-a5eb-7827aab6f028.png)


### 6-3. Vercelの設定

ここでは、VercelとGitHubを連携する手順については省略します。
プロジェクト設定と環境変数はLaravelに合わせる必要があるため、説明します。

まず、プロジェクト設定は下記としてください。

- Project Name: 任意の名前を入力
- Framework Preset: 「Other」を選択
- Root Directory: Laravelプロジェクトのルートディレクトリを指定
- Build Command: (空白)

次に、環境変数を設定します。
基本的にはLaravelプロジェクトの`.env`を入力します。

Neonデータベースに関連する情報は下記のように設定します。

```bash
DB_CONNECTION=pgsql
DB_HOST=<Neonホスト名>
DB_PORT=5432
DB_DATABASE=<Neonデータベース名>
DB_USERNAME=<Neonユーザ名>
DB_PASSWORD=<Neonパスワード>
```

また、他に下記の設定も必要です。

```bash
APP_KEY=<ローカルで生成したキーで問題なし>
```

### 6-4. Neonのマイグレーション実行

Vercelのサーバーレス環境では直接コマンドを実行できないため、以下の方法で対応しています。
(他に良い方法を知っている方がいれば教えてほしいです)

ローカル環境からNeonデータベースに接続するように `.env` ファイルを一時的に変更して、下記を実行します。

```bash
$ php artisan migrate
$ php artisan db:seed
```

以上で、VercelにデプロイしたLaravelアプリが動作します！！🎉

### 6-5. 注意点

Vercelにはサーバーレス関数の実行時間には[制限](https://vercel.com/docs/functions/configuring-functions/duration#duration-limits)があります。そのため、時間のかかる処理(例えば生成AIのAPIを利用する)は別のサービスを利用する、もしくは課金プランの利用を検討する必要があります。
また、無料プランの場合にはスケジュールタスクが1日1回だけしか利用できないことにも注意が必要です。

## 7. さいごに

やはり個人開発は無料でできることを重視しています。
無料で素晴らしいサービスを利用できることに感謝しています！
いくつか制限はありますが、個人で使用する分には十分すぎる性能だと思っています。

## 8. 参考サイト

- [Laravel10をVercelに簡単にデプロイ！外部公開までの手順(2023/9/26 更新) #PHP - Qiita](https://qiita.com/Masanarea_qiita/items/2e1616e4e18f6c8ee26d)
- [Vercel公式ドキュメント](https://vercel.com/docs)
- [Vercel PHP Runtime](https://github.com/vercel/vercel/tree/main/packages/php)
- [Neon - サーバーレスPostgreSQL](https://neon.tech/)
- [LaravelとNeonの連携方法](https://neon.tech/docs/guides/laravel)
- [Vercelのサーバーレス関数の制限](https://vercel.com/docs/functions/serverless-functions/runtimes#limits)