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