Laravel、Next.jsでWeb回覧システム設計、Docker Sail Laravel 12 TinyMCE

ブログ・Web回覧サイト構築の要点まとめ

技術選択：

  • Laravel：管理画面重視、複数人管理向け
  • Next.js：デザイン・高速表示重視、個人向け

管理画面の差：

  • Laravel：Filament等のパッケージで簡単構築
  • Next.js：自作が必要で工数2-3倍

構成・費用：

  • Laravel：VPS + MySQL + S3 = 月1,500円程度
  • Next.js：Vercel + Supabase = 小規模なら無料
  • 最小構成：VPS + SQLite = 月500円

開発工数：

  • 管理画面含めて2-3ヶ月（最小構成なら1-2ヶ月）

結論： 管理のしやすさ重視 → Laravel コスト・モダンUI重視 → Next.js

プロジェクト流れ

  1. 開発環境
  2. 要件洗い出し
  3. DBスキーマ
  4. コーディング
  5. テスト

Laravel + Docker（Sail）構築手順 – Windows版

前提確認

環境状態確認方法
Docker Desktop起動してる？右下のクジラアイコン
WSL2（推奨）wsl -l -v で確認（Ubuntuなど）
Windows Terminal / CMDどちらでも可
Git Bash（推奨）Bashの方がLinuxコマンド使える

構築手順ステップ

composer create-project laravel/laravel web-circular
  • Laravel Sailというパッケージを開発環境用の依存関係としてインストール
composer require laravel/sail --dev

–devオプションについて

composer.json の構造 composer.json “require”: { “laravel/framework”: “^10.0”, “guzzlehttp/guzzle”: “^7.0” } “require-dev”: { “laravel/sail”: “^1.0”, “phpunit/phpunit”: “^10.0”, “laravel/pint”: “^1.0” } 本番環境でも必要 （アプリ動作に必須） 開発時のみ必要 （テスト、デバッグ用） インストール時の動作： 開発環境 composer install → 全てのパッケージインストール 本番環境（レンタルサーバー） composer install –no-dev → require のみインストール（require-dev は無視）
  • Sailを導入
php artisan sail:install

  Which services would you like to install? [mysql]
  None ............................................................................................................. 0  
  mysql ............................................................................................................ 1  
  pgsql ............................................................................................................ 2  
  mariadb .......................................................................................................... 3  
  mongodb .......................................................................................................... 4  
  redis ............................................................................................................ 5  
  valkey ........................................................................................................... 6  
  memcached ........................................................................................................ 7  
  meilisearch ...................................................................................................... 8  
  typesense ........................................................................................................ 9  
  minio ........................................................................................................... 10  
  mailpit ......................................................................................................... 11  
  rabbitmq ........................................................................................................ 12  
  selenium ........................................................................................................ 13  
  soketi .......................................................................................................... 14  
❯ 1

選択肢リスト、Laravel Sail の「どのサービス（コンテナ）を含めるか」を選べるようです。

無駄なサービスを入れすぎるとDockerコンテナが激重に

表示されるリストから Ubuntu (WSL) を選ぶ

  • SailコマンドでDockerコンテナ起動
    1. Docker Desktopを起動
    2. Ubuntu（WSL）に切り替える
      VSCodeターミナル右上の + 横の 下矢印ボタン ⏷ をクリック

sailコマンドはUbuntuでしか使えない（≒ Linux環境（bash）じゃないと動かない）

/mnt/c/web-circular# vendor/bin/sail up -d

Laravel Sail の正体は、Laravel開発用にチューニングされたDockerラッパースクリプト

処理内容自動化されてる？実際の挙動
Dockerイメージの取得✅laravelsail/php82-composer とか mysql:8 をPull
docker-compose.yml生成✅sail:install 実行時に .docker と docker-compose.yml を作成
コンテナ起動✅sail up -d で Laravel（PHP）と MySQL の2コンテナが起動
ネットワーク/ボリューム作成✅LaravelとDBが同一ネットワークで通信できるように設定

先ほどのコンテナ起動でMySQLも一緒に起動されてます

./vendor/bin/sail up Laravel (PHP) + MySQL (DB) + その他 (Redis等) 1つのコマンドで複数のコンテナが同時起動
  • データベースが生きてるか確認
vendor/bin/sail artisan migrate

   INFO  Preparing database.  

  Creating migration table ...................................................... 308.69ms DONE

   INFO  Running migrations.  

  0001_01_01_000000_create_users_table .......................................... 586.27ms DONE
  0001_01_01_000001_create_cache_table .......................................... 171.50ms DONE
  0001_01_01_000002_create_jobs_table ........................................... 400.70ms DONE

※Laravelの初期DBスキーマ（テーブル）をMySQLコンテナ上に作成

Laravelのマイグレーションは「データベースのバージョン管理システム」Gitみたいなもの

以上でブラウザでウェルカムページが確認できます

Laravel Let’s get started Laravel has an incredibly rich ecosystem. We suggest starting with the following. Read the Documentation → Watch video tutorials at Laracasts → Deploy now http://localhost

xserverのような共用サーバーではvendor/bin/sail artisan~のようなsailコマンドが使用できない？？ので下記の方法がいいかも

XserverにそのままアップできるLaravelプロジェクトをローカルで開発する

Xserver上では原則「composer は使えない」

※Xserverは共用サーバー。つまり、root権限はないし、OSレベルで自由にツールをインストールすることもできない。

→ローカルで composer install を済ませて vendor/ をUPする、npm run buildも

つまりLaravel + Vite構成で開発してる場合、開発サーバーは実質2つ

（開発中はnpm run devでTailwind CSSとか見た目の確認はできます）

項目内容
ComposerはXserverで使える？❌ ローカルで完了させて vendor/ をアップ
npm run build は必要？✅ public/build/ に出力してアップ必須
artisanコマンドはXserverで？❌ 基本ローカルで済ませておく
public_html/ の中身は？index.php, .htaccess, build/, css/, etc
Laravel本体はどこに？public_html/ の外に laravel_project/ として設置

docker-compose.yml

laravel-xserver-dev/
├── docker/
│   ├── php/
│   │   └── Dockerfile
│   └── mysql/
├── docker-compose.yml
├── .env
└── laravel/        ← Laravel本体（後で Composer で生成）
services:
  app:
    build:
      context: .
      dockerfile: docker/php/Dockerfile
    container_name: laravel-app
    volumes:
      - ./laravel:/var/www
    ports:
      - "8000:8000"
    depends_on:
      - db
    working_dir: /var/www

  db:
    image: mysql:8.0
    container_name: laravel-db
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: laravel
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_USER: laravel
      MYSQL_PASSWORD: secret
    ports:
      - "3306:3306"
    volumes:
      - dbdata:/var/lib/mysql

volumes:
  dbdata:

Dockerfile

FROM php:8.2-fpm

RUN apt-get update && apt-get install -y \
    git curl zip unzip libonig-dev libxml2-dev \
    && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath

# Composer install
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www

Laravelをインストール（コンテナ内で）

docker compose up -d
docker compose exec app bash
# コンテナ内で以下を実行
composer create-project laravel/laravel .
exit

結構時間かかります

タイムアウトしてしまったらcomposer config –global process-timeout 900

どの.env？

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=secret
.env のキー反映される場所
APP_ENVconfig/app.php の 'env' => env('APP_ENV')
APP_DEBUGconfig/app.php の 'debug' => env('APP_DEBUG')
DB_*config/database.php で使用される
MAIL_*config/mail.php で使用される

※Laravelは、起動時に環境変数を読み込んで設定クラスにバインドします

コンテナ内でLaravelがHTTPサーバーを立てる
→ホスト側（ブラウザ）から http://localhost:8000 でアクセス可能になる。

docker compose exec app php artisan serve --host=0.0.0.0 --port=8000

FTPでxservernのサブディレクトリにデプロイする場合、本番サーバーでもローカルと同じ構成にするのが、ベストプラクティス

vendor/ は 1万ファイル以上あるからFTPクライアント（WinSCPやFileZilla）でアップするのに時間かかります。

Xserver/public_html/
└── laravel-xserver/
    ├── app/
    ├── public/（中身あり）
    ├── .env
    ├── index.php      ← public/index.phpを書換コピペ
    ├── .htaccess      ← public/.htaccessをコピー
    └── ... その他Laravel一式
  • public/index.php → laravel-xserver/index.php にコピーして、以下のように修正：
require __DIR__.'/vendor/autoload.php';
$app = require_once __DIR__.'/bootstrap/app.php';
  • public/.htaccess → laravel-xserver/.htaccess にそのままコピー

環境変数を編集してデプロイ

ローカルと本番のDBは「違って当然」、だからマイグレーションで定義する。

XserverはMySQLをサービスとして提供している

┌─────────────┐           ┌────────────┐
│ ローカルPC  │           │   Xserver  │
│ Docker(MySQL)│          │  MySQL提供  │
│ Laravel dev │           │ Laravel prod │
└────┬────────┘           └────┬───────┘
     │ DB接続 → localhost       │ DB接続 → mysql1234.xserver.jp
     │                         │
     │ migrate                 │ 手動インポート（phpMyAdmin）
     ▼                         ▼
  OK                          OK
内容ローカル本番
DBサーバーDockerで構築したMySQLXserverのMySQL（管理画面で作成）
接続情報.env に DB_HOST=127.0.0.1.env に DB_HOST=mysql1234.xserver.jp
DB中身（データ）開発用のサンプル／テストデータ本番の実データ
DB構造（テーブル定義）Laravelのマイグレーションで定義する← 同じマイグレーションで生成される

構造（スキーマ）をマイグレーションで共通化し、
中身（データ）は環境に応じて分ける

https://github.com/idw-coder/laravel-xserver

XserverでMySQLデータベースのデータ構造を反映する手段

  • SSH接続でphp artisan migrate
  • phpMyAdminでインポート

phpMyAdminでインポート方法

レンタルサーバーではDB接続はSSHでなくphpMyAdminからインポートはあり

むしろXserverのような共有ホスティングでは、SSHやCLIよりphpMyAdminの方が標準手段。

ローカルMySQLコンテナから .sql ファイルをエクスポートする

ローカルDBをダンプ

docker exec [DBコンテナ名] mysqldump -u root -p laravel > /tmp/laravel.sql

コンテナからホストにコピー

docker cp laravel-db:/tmp/backup.sql ./backup.sql

「phpMyAdmin」をクリック

データベース MySQL設定 MySQLバックアップ MySQL復元 phpMyAdmin(MySQL5.7)