Laravelの開発環境をWindows上につくる

LaravelはPHPのフレームワークです。ウェブ上にPHPを使って高度なアプリケーションを開発することができます。

必要なもの

Windows
Docker、エディタ(Visual Studio Code)、ブラウザーを動かす。
WSL (Windows Subsystem for Linxu)
Docker、Node.jsを動かす。
Docker Desktop
Dockerを簡単にインストールする。
Node.js
Laravelが使うAlpine.jsとかTailwindとかをインストールする。フロントエンド(HTML、CSS、Javascript)の開発を容易にするViteを動かす。

Docker Desktopをインストールする

  1. WSLが必要なので、インストールしていない場合はいれておく。
  2. https://www.docker.com/へいって、Products – Docker Desktopへすすんで、 Download Docker Desktop でWindows AMD64版をダウンロードする。
  3. ダウンロードしたファイルを実行し、Docker Desktopをインストールする。インストール後、PCの再起動を求められる。
  4. Windowsのメニューから、もしくはデスクトップ上のアイコンから、Docker Desktopを起動する。初回起動時は使用許諾を受け入れる(Accept)。
  5. たぶん、ログイン(アカウントの作成)は必要ない。もちろん、登録してもよい。

Node.jsをインストールする

wslにあるNode.jsは古いので、アップグレードする。やっていることはこちらを参照してください。

# curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - 
# sudo apt install -y nodejs

Hello World

定番の動作確認をする。

開発環境のディレクトリ構成

WSLを起動し、ホームディレクトリにproject_dirをつくる。
もし、WSLを起動したときのプロンプトがroot@になっているなら、su – user_name して一般ユーザーになっておく。

$ mkdir project_dir
$ cd project_dir

必要なディレクトリ構成

$ tree
.
├── docker-compose.yaml      ← dockerの設定
├── nginx/
│   └── default.conf         ← nginxの設定ファイル
├── php/
│   └── Dockerfile           ← phpコンテナの設定。composerをインストールする
└── src/                     ← Laravel 本体が置かれる。vendorだけコンテナ内にいれるようにする
    └── public/              ← nginx のroot
        └── index.php

dockerコンテナの構成

docker-compose.yaml

version: "3.9"

services:
  nginx:
    image: nginx:1.27-alpine
    container_name: app1_nginx
    ports:
      - "8080:80"
    volumes:
      - ./src/public:/var/www/html/public:ro
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php

  php:
    build: ./php
    container_name: app1_php
    volumes:
      - ./src:/var/www/html
      - /var/www/html/vendor
    environment:
      - TZ=Asia/Tokyo

php/Dockerfile

PHPのコンテナの設定。必要なファイルをインストールするようにする。

FROM php:8.2-fpm
# Composer を公式イメージからコピー
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html

nginx/default.conf

nginxの設定ファイル。

server {
    listen 80;
    server_name localhost;

    root /var/www/html/public;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass php:9000;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

コンテナを起動

$ sudo docker composer up -d

動作確認 (nginxとPHP)

src/public/index.php

<? php
echo "Hello world\n";
phpinfo();

ブラウザーで http://localhost:8080/ を開く

Laravelをインストール

動作確認でつくったpublicディレクトリを予め削除しておかないとエラーになる。

docker compose execの場合はdocker-compose.yamlで設定したservice名を指定する(上記の場合php)。docker execとすることもでき、その場合はcontainer_nameを指定する(上記の場合app1_php)。

$ sudo docker compose exec -it php composer create-project laravel/laravel .

最後の.はlaravelプロジェクトのディレクトリを指す。phpのdockerイメージでWORKDIR /var/www/htmlと設定しているので、docker execをしたときのデフォルトディレクトリが/var/www/htmlであり、.はここを指す。
docker-compose.yamlでvolumesの設定で、./src:/var/www/htmlとしているので、コンテナの/var/www/htmlはホストの./srcを指し、docker compose up -dが/project_dirで実行されるので、/project_dir/srcとなる。
結局、laravelのプロジェクトが/project_dir/srcとなる。

ひな形としてstarter kit (breeze/livewire)をインストール

$ sudo docker compose exec -it php composer require laravel/breeze --dev
$ sudo docker compose exec -it php php artisan breeze:install livewire

Node.jsのモジュールをインストール

breezeが必要とするNode.jsのモジュールをインストールする。artisan breeze:installによってpackage.jsonがつくられ、この内容に従ってNode.jsが動作する。

Node.jsのパッケージ管理ソフト(コマンド)がnpm。

$ cd /project_dir/src
# npm install

viteなどを動かす(ここから先はやっている意味をいまいち理解していない)。
npm runは/project_dir/srcにあるpackage.jsonのscriptを動かすということらしい。

$ npm run dev

ブラウザーで http://localhost:8080/ を開く

開発環境をバックアップ

gitのリポジトリを作成

$ git init --bare ~/app.git

バックアップ

$ cd /project_dir
$ git add .
$ git commit -m "Backup dev env"
$ git push ~/app.git master

新しい環境

別のパソコンに開発環境をクローンする。

$ git clone ssh://git.host/home/your_id/app.git app_dev