laracel sail + breeze, Github Actions, vercelでCI/CDを行う

Continuous Integration/Continuous Deliveryの略。
ソフトウェアの変更を常にテストし、自動で本番環境に適用できる状態へしておく開発手法です。

laracel sail + breeze, Github Actions, vercelで勉強できないか試してみました。

CI/CDのメリット

エラーの早期発見や迅速な修正が可能になる
開発速度と品質の向上が実現する
ユーザーと顧客の満足度の向上
アフターケアの手間の削減
安定して納期を守る
デベロッパーの作業時間を削減する

CI/CDの仕組み

CI（継続的インテグレーション）：開発者がコードを作成しているときに実行される一連のプラクティス
CD（継続的デリバリー）：CIで統合されたソフトウェアを本番に対応できる環境へ届ける手法
CI/CDを導入する際には、ビルドスクリプトやテストコードなどの自動化のための準備作業が必要になります。また、一度作成したら終了ではなく、メンテナンスも必要です

CI/CDについて学ぶ

No	項目	概要
1	テストプロジェクト	laravelのテストプロジェクトを用意します
2	CI	github actionsにてCIを行います
3	CD	無料サーバーへCDをします

laravel sail project

laravle sailのプロジェクトを用意

curl -s "https://laravel.build/vercel-laravel-test-app" | bash

cd vercel-laravel-test-app

sail up

sail composer require laravel/breeze --dev

sail artisan breeze:install

Blade with Alpine
No
PHPUnit

と選択します。
DBの準備をしましょう

sail artisan migrate:fresh --seed

ローカルでテストコードの実行

sail test

sail artisan optimize実行後にbreezeのテストコードでエラーが出る
この解決策を記載しているブログが少なくて苦労しました。
下記のコマンドを全て実行しましょう。

sail artisan cache:clear
sail artisan config:clear
sail artisan route:clear
sail artisan view:clear

これでローカル環境のテストが確認できました。

Githubのアカウントを作成
Githubでリポジトリを作成
Githubへプロジェクトをプッシュする

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:RubyLrving/vercel-laravel-test-app.git
git push -u origin main

CI

github actions

GitHub Actions は、ビルド、テスト、デプロイのパイプラインを自動化できる継続的インテグレーションと継続的デリバリー (CI/CD) のプラットフォームです。リポジトリに対するすべての pull request をビルドしてテストしたり、マージされた pull request を運用環境にデプロイしたりするワークフローを作成できます。

ビルドファイルの作成
phpunit.ymlを下記のパスのフォルダ内に作成します。

root/.github/workflows

phpunit.ymlを編集します

name: Laravel

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

env:
  DB_USERNAME: sail
  DB_PASSWORD: password
  MAIL_FROM_ADDRESS: info@example.com

jobs:
  laravel-tests:

    runs-on: ubuntu-latest

    services:
      mysql.test:
        image: 'mysql/mysql-server:8.0'
        ports:
          - 3306:3306
        env:
          MYSQL_DATABASE: 'laravel'
          MYSQL_USER: '${{ env.DB_USERNAME }}'
          MYSQL_PASSWORD: '${{ env.DB_PASSWORD}}'
          MYSQL_ALLOW_EMPTY_PASSWORD: 1
        options: >- 
          --health-cmd "mysqladmin ping"
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

    steps:
    - uses: actions/checkout@v2
    - name: Setup PHP
      uses: shivammathur/setup-php@v2
      with:
        php-version: '8.4'
        tools: composer:v2
    - name: Copy .env
      run: cp .env.example .env.testing
    - name: Install Dependencies
      if: steps.cache.outputs.cache-hit != 'true'
      run: composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist
    - name: Install Node.js dependencies
      run: npm ci
      working-directory: ./ 
    - name: Build assets with Vite
      run: npm run build
      working-directory: ./ 
    - name: Generate key
      run: php artisan key:generate --env testing
    - name: Directory Permissions
      run: chmod -R 777 storage bootstrap/cache
    - name: Set hostname
      run: sudo echo "127.0.0.1 mysql.test" | sudo tee -a /etc/hosts
    - name: Execute tests (Unit and Feature tests) via PHPUnit
      run: vendor/bin/phpunit

laravel 10.x、breezeのテストコードを実行させる際に、
Vite のマニフェストファイル（manifest.json）を作成する必要があります。
下記のコマンドで作成します。

    - name: Install Node.js dependencies
      run: npm ci
      working-directory: ./ 
    - name: Build assets with Vite
      run: npm run build
      working-directory: ./

実行結果

プッシュする度に、phpunit.ymlが実行されビルド、テストコードの実行が行われています。

45sでテストが完了してプッシュ時にテストコードの実行が成功しています。

CD

vercelを使用します。
デプロイには、

laravelとlaravel sail
DBとpostgreの知識
composer
ファイルの書き込み権限
session, cacheの知識
環境変数の知識

が必要になります。
順番にやっていきましょう。

vercelのアカウントを作成、Githubと連携

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

これを参考にvercelとneonのDB, envファイルを用意してください。

vercel webサーバー

output directory
publicを入力します。

node.js
18.xを指定します。

neon postgre sql

singapore
リージョンはシンガポールを設定しています。
後の設定はデフォルトです。

laravel sail

vercelのモジュールをインストール

sail composer require revolution/laravel-vercel-installer --dev

sail artisan vercel:install

.env.productionの作成
本番環境用の.envを作成します。

.env

APP_NAME=Laravel
APP_ENV=production
APP_KEY=
APP_DEBUG=false
APP_TIMEZONE=UTC
APP_URL=
ASSET_URL=

DB_CONNECTION=
DB_HOST=
DB_PORT=
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=
DATABASE_URL=

LOG_CHANNEL=stderr
CACHE_DIRECTORY=/tmp/laravel/cache
SESSION_DRIVER=cookie
APP_STORAGE=/tmp

APP_URL
laravelで設定されるURLに影響します。
ASSET_URL
viteが生成するリソースのURLに影響します。
CACHE_DIRECTORY, SESSION_DRIVER
laravel sailだとradiesのキャッシュサーバーなどを使っているので、vercelのwebサーバー用に設定しましょう。

.env.production
vercelのdashboard, setting, Environment Variablesからenv importの機能でenvファイルを読み込みできます。
毎回手動で入力するのは大変なので、この機能を使いましょう。
composer.jsonの編集
scriptsの項目に以下を追加しましょう。

composer.json

        "vercel-build": [
            "composer install --no-dev --optimize-autoloader",
            "chmod -R 777 bootstrap/cache",
            "php artisan config:cache",
            "php artisan route:cache",
            "php artisan view:cache"
        ]

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"
    }
}

フロントエンドのvite、DBへの接続もできています。
breezeのアカウントの作成もできています。

最後に

laravel sailのプロジェクトの設定、環境変数を理解しました。
またGithub Actionsでのテストコードのチェック、ビルドファイルへの理解が深まりました。
vercelというサーバーレスアーキテクチャに触れ、本番サーバーとローカルサーバーの差分を理解しました。
この勉強はよかったと思います。