⚡️

WSL環境で爆速! Dockerを活用したLaravel Sailのセットアップ方法

2023/12/23に公開

はじめに

WSL 環境で Laravel-Sail を使って開発していると遅くて困ることがありました。そこで、解決策を調査しパフォーマンス向上を実現する方法を見つけました。その手順をご紹介します。また、phpMyAdmin の環境構築についても触れています。

結論

Windows 上でなく、Linux 環境(WSL)に Laravel プロジェクトを設置し動作させることで、問題を解決しました。この方法により、リソースの効率的な利用や遅延の軽減を実現できました。

前提条件

WSL のバージョンと Docker のバージョンは次の通りです。

WSL バージョン

wsl --list --verbose
# 出力
  NAME                   STATE           VERSION
* Ubuntu-22.04           Running         2
  docker-desktop         Running         2
  docker-desktop-data    Running         2

Docker のバージョン

docker --version
# 出力
Docker version 20.10.17, build 100c701

1.プロジェクトの作成

必ず Ubuntu 内で作業を行ってください。以下はプロジェクトの作成手順です。

ubuntu 環境のホームディレクトリ(home)に移動

  root@user:~# cd /home/Laravel-Project

WSL 内で Laravel プロジェクトを作成

「example-app」はプロジェクト名です。お好みで変更してください。

  curl -s https://laravel.build/example-app | bash

2. WSL 内で VSCode を起動してプロダクトを立ち上げる

Laravel-Project ディレクトリ内の example-app ディレクトリに移動し、VS Code で開きます。これにより、VS Code を WSL 環境内で使用しながら、example-app プロジェクトをエディタで編集できます。

root@user:~/Laravel-Project# cd example-app
root@user:~/Laravel-Project/example-app# code .

3. phpMyAdmin docker-compose.yml 追記

以下がカスタマイズされた docker-compose.yml ファイルです。phpMyAdmin の追加により、MySQL データベースの管理を簡単に行えます。

docker-compose.yml
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
            - meilisearch
            - mailpit
            - selenium
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: '%'
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - mysqladmin
                - ping
                - '-p${DB_PASSWORD}'
            retries: 3
            timeout: 5s
    #  追記-------------------------------
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8080:80
        environment:
            PMA_USER: "${DB_USERNAME}"
            PMA_PASSWORD: "${DB_PASSWORD}"
            PMA_HOST: mysql
        networks:
            - sail
    #  -----------------------------------
    redis:
        image: 'redis:alpine'
        ports:
            - '${FORWARD_REDIS_PORT:-6379}:6379'
        volumes:
            - 'sail-redis:/data'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - redis-cli
                - ping
            retries: 3
            timeout: 5s
    meilisearch:
        image: 'getmeili/meilisearch:latest'
        ports:
            - '${FORWARD_MEILISEARCH_PORT:-7700}:7700'
        environment:
            MEILI_NO_ANALYTICS: '${MEILISEARCH_NO_ANALYTICS:-false}'
        volumes:
            - 'sail-meilisearch:/meili_data'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - wget
                - '--no-verbose'
                - '--spider'
                - 'http://localhost:7700/health'
            retries: 3
            timeout: 5s
    mailpit:
        image: 'axllent/mailpit:latest'
        ports:
            - '${FORWARD_MAILPIT_PORT:-1025}:1025'
            - '${FORWARD_MAILPIT_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail
    selenium:
        image: selenium/standalone-chrome
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

4. Laravel のタイムゾーンを日本に変更

Laravel のタイムゾーンを日本に設定することで、日本時間での正確な日付と時刻を取得できます。
以下、config/app.php ファイルを以下のように設定してください。

config/app.php
  'timezone' => 'Asia/Tokyo',
  'locale' => 'ja',

5.Laravel Sail の起動と停止

起動コマンド

./vendor/bin/sail up -d

Laravel へアクセス

http://localhost/

Permission エラー解決

Permission エラーが発生したので解決策を残させて頂きます。

permission

エラーログ

The stream or file "/var/www/html/storage/logs/laravel.log" could not be opened in append mode: Failed to open stream: Permission denied The exception occurred while attempting to log: The stream or file "/var/www/html/storage/logs/laravel.log" could not be opened in append mode: Failed to open stream: Permission denied The exception occurred while attempting to log: The stream or file "/var/www/html/storage/logs/laravel.log" could not be opened in append mode: Failed to open stream: Permission denied The exception occurred while attempting to log:
file_put_contents(/var/www/html/storage/framework/views/19d1ca22cd8db231f88e0685e9c3a20e.php): Failed to open stream: Permission denied Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}} Context: {"exception":{}}

権限を追加 して 解決

  chmod -R 775 storage bootstrap/cache

index

phpMyAdmin へアクセス

http://localhost:8080/

phpMyAdmin

停止コマンド

./vendor/bin/sail down

6. まとめ

お疲れ様でした!! 私はこの開発手順でサクサク動くようになりました。
ここからは、自由にカスタマイズしながら楽しく Laravel 開発を進めていきましょう!!

GitHubで編集を提案

Discussion