laravel-sail(docker)でlaravel+vue環境を作る方法

Windows環境でlaravel+vue開発環境をサクッと作るための方法です。

事前準備

まずは下記が使える環境を作る必要があります。

  • WSL2が使える環境を準備
  • Docker Desktopをインストール
  • Visual Studio Codeに拡張機能として「Remote – WSL」インストール

ひな形作成

Windows TerminalをWSL2(例：Ubuntu-20.04)で起動し、アプリを作りたいディレクトリに移動
※ /mnt/c/…だと動作が遅いので、/home/username/…に作るのがおすすめ
※devフォルダの下にmyappを作りたい場合は、devフォルダで下記を実行

curl -s https://laravel.build/<アプリ名> | bash

https://qiita.com/kai_kou/items/0e773aaf50698dd5a93f#windows
https://laravel.com/docs/8.x/installation#getting-started-on-windows

不要なサービス停止＆phpMyadminを有効化

docker-compose.ymlを編集します。Visual Studio Code(以下、code)を起動し、左下の「WSL」をクリックして上記で作成したアプリフォルダを開きます。その中にあるdocker-compose.ymlを下記のように編集します。

# For more information: https://laravel.com/docs/sail
version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.1/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            # - redis
            # - meilisearch
            # - 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'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s
    # 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'
    #     volumes:
    #         - 'sail-meilisearch:/data.ms'
    #     networks:
    #         - sail
    #     healthcheck:
    #         test: ["CMD", "wget", "--no-verbose", "--spider",  "http://localhost:7700/health"]
    #         retries: 3
    #         timeout: 5s
    # mailhog:
    #     image: 'mailhog/mailhog:latest'
    #     ports:
    #         - '${FORWARD_MAILHOG_PORT:-1025}:1025'
    #         - '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025'
    #     networks:
    #         - sail
    # selenium:
    #     image: 'selenium/standalone-chrome'
    #     volumes:
    #         - '/dev/shm:/dev/shm'
    #     networks:
    #         - sail
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - ${MYADMIN_PORT:-8080}:80
        environment:
            MYSQL_USERNAME: '${DB_USERNAME}'
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            PMA_HOST: mysql
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

上記の例では、redis・meilisearch・mailhog・seleniumをストップし、phpMyadminをいれています。そのあと、codeのターミナルでdockerを動かせばOKです。phpmyAdminへのログイン情報は.envに記載されているDB_USERNAME、DB_PASSWORDを参照。

cd <該当アプリフォルダ>
./vendor/bin/sail up -d

割と時間かかります(/home/username/…であれば割と速い)
他にsailで稼働させているcontainerがあるとポートバッティングで動作しないので、他をsail downさせておく。

バックグラウンドで起動しているので、止める場合は下記コマンド。

./vendor/bin/sail stop

laravel起動テスト

この状態でもlaravelの基本ページは表示できるように名ているので、「http://localhost/」 へアクセスすると立ち上がっていることが確認できます。

Windows上からWSL2で作成したファイルを見る場合は「\\wsl$\Ubuntu-20.04」を開ければ、開けばいいのだがエラーでうまく開けない場合はネットワークドライブに割り当てることで開くことが可能(https://github.com/microsoft/WSL/issues/5718)

毎回./vendor/bin/sail と記載するのが面倒なのでエイリアス設定をして短縮することができます！

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

https://readouble.com/laravel/8.x/ja/sail.html

Vue3 & vue-routerインストール

最新Vue3をインストールして進めます。

sail npm install vue@next

webpack.mix.jsを下記のように編集します。(codeでctrl+p→webpack.mix.js)

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue();

npmでビルドします。

sail npm run dev

この処理の中でpackage.jsonにvue-loaderが追加されるので再度npmでビルドします。

sail npm run dev

ここまででvue3がインストールされたので続いて、vue3に対応したvue-routerをインストールします。

sail npm install vue-router

resource/jsにroutes.jsを作成します。

import HomeComponent from './components/Home.vue';
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    {
        path: "/",
        component: HomeComponent,
        name:'home',
    },
];

const router = createRouter({
    routes, // short for `routes: routes`
    history: createWebHistory(),
  })

export default router;

ルーティング先のvueファイルをresource/js/componentsに配置するようにしたいので、resource/jsにcomponentsフォルダを作成します。そのフォルダの中にHome.vueを作成します。

<template>
	<h1>Home Page</h1>
</template>

app.jsを下記のように修正します。

require('./bootstrap');
import router from "./routes";
import { createApp } from 'vue';

const app = createApp({}).use(router).mount('#app');

この状態ではlaravelのweb.phpによりルーティングされて、welcome.blade.phpが呼び出されるのでvueが表示できるように修正します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Example</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>

    <div id="app">
        <div id="nav">
          <router-link to="/">Home</router-link>
        </div>
        <router-view/>
        </div>
    </div>

<script src="{{ mix('js/app.js') }}"></script> 
</body>
</html>

https://chigusa-web.com/blog/laravel-vue3/

vue起動テスト

sail npm run dev

エラーがなければ、ブラウザから「http://localhost/」でアクセスしてみて表示されればOKです！

Xdebugによるデバッグ環境構築

codeで拡張機能「PHP Debug」をインストールします。
最新のsailにはすでにXdebugが組み込まれているので、そのまま使うことが可能です！

codeの「実行とデバッグ」で「lanch.sonファイルを作成」をクリックし、PHPを選択し、下記のように修正してください。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "stopOnEntry": true,
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            },
            "hostname": "localhost",
            "xdebugSettings": {
                "max_data": 65535,
                "show_hidden": 1,
                "max_children": 100,
                "max_depth": 5
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 0,
            "runtimeArgs": [
                "-dxdebug.start_with_request=yes"
            ],
            "env": {
                "XDEBUG_MODE": "debug,develop",
                "XDEBUG_CONFIG": "client_port=${port}"
            }
        },
        {
            "name": "Launch Built-in web server",
            "type": "php",
            "request": "launch",
            "runtimeArgs": [
                "-dxdebug.mode=debug",
                "-dxdebug.start_with_request=yes",
                "-S",
                "localhost:0"
            ],
            "program": "",
            "cwd": "${workspaceRoot}",
            "port": 9003,
            "serverReadyAction": {
                "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
                "uriFormat": "http://localhost:%s",
                "action": "openExternally"
            }
        }
    ]
}

続いてSailのデバッグ設定として、.envファイルに下記の一行を追加します。

SAIL_XDEBUG_MODE=develop,debug

.envを編集後にsailを再スタートさせます。

laravelで実装したAPI等のテストをする場合は、URLパラメータに下記を付ける必要があります。

「?XDEBUG_SESSION_START=session_name」

実際に使う場合は、codeでブレークポイントを設定し、F5を押してデバッグ状態にします。

https://chigusa-web.com/blog/laravel-sail-xdebug/
ttps://qiita.com/nnaoi/items/7f21623de61fa612ba97

データベースを作る

  1. sail artisan make:migration create_users_table
    ※Usersテーブルを作る場合のマイグレーションファイル作成
  2. 既にあるやつはいったん消す（他のマイグレーションファイル）
  3. 0から新規作成→ sail artisan migrate:fresh

参考：https://readouble.com/laravel/5.3/ja/migrations.html　(数とかいろいろあって便利）
参考：https://qiita.com/rope19181/items/c7862f9a0a22443ddb48
参考：https://qiita.com/somebody_gp/items/c41a2fc68205a850ff96

マイグレーションでカラムを追加する場合は、マイグレーションファイルのcreateをtableに変更

初期データを作る

参考URLの内容で各コマンドにsailを付けて実行

sail artisan make:seeder xxxxTableSeeder

database/seeders/の中に、xxxxTableSeeder.phpが作成されるので、下記を追加。

上部に

use Illuminate\Support\Facades\DB;

run()内に

DB::table('xxxx')->insert([ ["カラム名"=>"値"] ]);

DatabaseSeeder.phpに新規作成したやつを追加する。

$this->call(xxxxTableSeeder::class);

そのあとは下記のコマンドで、データベースと初期データが作成されます。

sail artisan migrate:fresh
sail artisan db:seed

参考リンク

全般的なところ

  • 初期化したり、データを作ったタイミングでコミットしておきたい
  • Laravelのバージョンを確認する➡sail artisan –version

モデルでデータベース操作

読み出し方法は下記を参考に。モデルを使うときは設定が必要。

mixhostでlaravelを動かす

お試しであれば下記の方法でもよいかも。。ただし、時間がかかる。

mixhostにLaravelアプリケーションをデプロイして動かしてみる！

laravelでスケジューラを設定してcron処理

コマンドを作成して、スケジューラを設定することでlaravelでcron処理をしました。laravelにたいして、サーバー上でcronからlaravelに設定する必要あり。スケジューリングはlaravel側で実施。

また、タイムゾーン設定によっては0時きっかりに処理等がされないため、タイムゾーンを設定する必要あり。

https://reffect.co.jp/laravel/laravel-task-schedule-cron

ローカル環境でスケジューラ動作を試す際には、Laravel Sailのコンテナ内でcronを設定するよりlaravel8から追加された「php artisan schedule:work」を使うとフォアグラウンドで実行されます。Laravel Sailで使うのであれば↓になります。

sail artisan schedule:work

https://laravel.com/docs/8.x/scheduling#running-the-scheduler-locally

TwitterのOAuthでログイン認証

TwitterOAuthでログイン認証をおこなう[OAuth]