Dockerfileとdocker-composeについて

Docker Composeを利用して仮想サーバを管理します。
どちらのファイルも以下のGitHubから取得可能です。

今回のディレクトリ構成は、以下のような感じです。

Docker buildからlaravelを動かすまで

イメージのビルド

docker-compose.ymlファイルがあるディレクトリへ移動し、以下のコマンドでイメージのビルト、コンテナの起動を行います。

$ docker-compose build
$ docker-compose up -d

litespeed管理画面へのログイン

コンテナが無事に起動したら、コンテナにログインし、初期パスワードを確認します。

$ winpty docker-compose exec web bash
[root@6c71de6daed0 lsws]# cat /usr/local/lsws/adminpasswd

初期パスワードを確認したら、以下のURLから管理画面にログインします。
https://localhost:7080/login.php

初回アクセス時、SSL証明書の警告が表示されますが、自身の開発サーバなので構わずアクセスします。

php7.4のインストール、バーチャルホスト、リスナーの設定

デフォルトでphp7.3が入っていましたが、せっかくなのでphp7.4のバイナリをインストールします。
Dockerfileでは、php7.4バイナリのインストールに必要なパッケージも同時にインストールしています。
具体的な手順は、下記画像を参照してください。

phpのコンパイルシェルはセキュリティの関係でターミナルから実行してくれとのこと。
といっても、親切に実行シェルがフルパスで書いてあるので、コンテナに接続後、コピペしてエンターを押せばよいだけです。

上記表示になればコンパイル終了です。画面的にはあと1ステップ残ってそうですが、作業はこれで終わりです。

バーチャルホストの作成

laravel実行用にバーチャルホストを作成します。下記画像を参照してください。

画面に映っている部分以外はすべてデフォルトです

保存時にファイルがないエラーが出ますが、CLICK TO CREATE をクリックしファイル作成後に再度保存すれば大丈夫です。

リスナーの作成

ユーザーからのアクセスを受け付けるためのリスナーを作成します。設定は画像をば・・・

バーチャルホストで利用するphpバージョンを指定

デフォルトでphp7.4を利用するように設定を変更します。

設定を保存し、以下のURLにアクセス。
http://localhost:8088/

Test PHPでバージョンが7.4.3になっていることが確認できます。

Laravelを動かす

設定ファイル系をlaravel用に書き換えます。
(GUIからの変更方法がわからなかったので、ターミナルから直接編集しました)

Example バーチャルホストを参考に、以下の設定を挿入
編集ファイルは「/usr/local/lsws/conf/vhosts/laravel/vhconf.conf」です。

docRoot $VH_ROOT/public

context / {
  allowBrowse 1
  location $DOC_ROOT/
  rewrite  {
    RewriteFile .htaccess
  }
}

.htaccessにlaravel公式のリライト設定を挿入します。
ファイルの場所は「/var/www/laravel/public/.htaccess」ですね。
litespeedはapacheのリライトと互換性があるとのことで、apache用の設定がそのまま使えます。

Options +FollowSymLinks -Indexes
RewriteEngine On

RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

ファイル設定後はGUIから再起動を行います。

後は、laravelプロジェクトを作成し、ホスト側のlaravelアプリケーションディレクトリにファイルを設置します。
今回はlaravel 配下に設置すればOK

やっとLaravelのデフォルト画面が拝めます

以上の設定でlitespeedでlaravelアプリが動くはずです。以下のURLにアクセスし、画面が表示されるか確認します。
http://localhost:8080/

やっとlaravelアプリが動きました！　隙間時間とはいえ、調査に1週間、この記事を書くのに3時間・・・長かった。

でも、使うかどうかはわかりません

まだ解決していない問題として、「サーバ設定の永続化」が残っています。
Dockerはご存じの通り、コンテナを破棄すれば内部のデータは消えてしまいます。そのためにVolumeなどを設定しデータの永続化を行いますが、litespeedはどこを永続化すればよいのかいまだにわからず・・・
今回行った設定も、コンテナを破棄したときに一緒に消えてしまうのです。
もうしばらく調べて、わからなかったらnginx続投かな・・・

投稿 DockerでLiteSpeed Webサーバを構築してLaravelを実行する は Sheltie's Garage に最初に表示されました。

[Composer\Exception\NoSslException]                                           
  The openssl extension is required for SSL/TLS protection but is not available. 
If you can not enable the openssl extension, you can disable this error, 
at your own risk, by setting the 'disable-tls' option to true.

原因はphpのアップデート作業でした

phpはwindows環境で実行しています。
phpのアップデートのため、一度phpディレクトリの中をすべて削除し、新しいバージョンを上書きしました。
その際「php.ini」も消してしまい、結果としてopensslのエクステンションも無効になってしまっていました。

OpenSSLの有効化

php.iniを以下の通り編集しました

; Directory in which the loadable extensions (modules) reside.
; http://php.net/extension-dir
;extension_dir = "./"
; On windows:
extension_dir = "ext"　←この行のコメントを外し、有効化

;extension=bz2
・・・省略・・・
;extension=odbc
extension=openssl ←この行のコメントを外して有効化

以上

以上の設定でComposerが動くようになりました。

投稿 ComposerでNoSslExceptionが発生したときの対応方法 は Sheltie's Garage に最初に表示されました。

プログラム改修やサーバ増強でアプローチしていたが

PHPアプリの負荷を下げつ方法として、プログラム改修を主に行っていた。
作られたプログラムで効率的にキャッシュを利用していなかったり、場合によっては数千レコード単位で結果を返し、それを配列でぐるぐるしているようなプログラムがあったからだ。
このあたりのプログラムを見直して、若干負荷を下げることはできた。

nginx, php-fpmの設定も見直す

nginxやphp-fpmの設定に関しても、以下の情報をもとチューニングを行った。
が、ミドルウェアのチューニングでは、それほど大きな効果が出なかった気がする。
チューニング方法が悪かったのか、もしくはこれらのミドルウェアのデフォルト値が割と優秀なのかも。
参考：
https://qiita.com/qiita_masaharu/items/29ec160c4e830c138132

一応、上記の対応で以前よりも負荷を抑えることが出来、安心していました。

再び発生した高負荷問題

新規で作成したLaravelアプリで再び高負荷問題が発生。
こちらもキャッシュ利用の見直しや、コードの最適化である程度負荷を下げることができた。
だが、それでも負荷が完全に下がり切らず、アクセス集中の時間帯はひやひやするレベルで負荷がかかっていた。

同僚の気づきと原因判明

ある日、フロントエンドに強い同僚が一言「対応します！」と言って何かを行ったところ、

負荷がぱったりと収まりました

いったい何を行ったのか聞いたところ

xdebugのモジュールを削除しました

とのこと。
どうやら本番環境にもx-debugが入っており、これがかなりの負荷をかけていた模様。
x-debug削除後は今までの負荷が嘘のようで、アクセス集中の時間帯でも安定して稼働するようになりました。

ちなみに、なんでx-debugが高負荷の原因になっているのか突き止めることができたのか理由を聞いたところ

負荷対策を行ったプログラムをリリースしたのに、全く負荷が下がらないため、プログラム以外の部分に問題があることが分かった。

とのこと。
うーん、素晴らしい・・・

XDebug負荷の似たような事例として、以下のようなケースもある様です。
https://www.marineroad.com/staff-blog/14210.html

yumに頼りすぎた弊害か・・・

環境構築時、yumで「とりあえずphp関連のもの入れてしまえ！」の勢いで構築したので、それ以降全く環境の見直しがかかっていなかった模様。
yumでの環境構築は便利だけど、何がインストールされるのか、ちゃんと把握していないとダメですね。
それ以前に、インフラ周りに強い人間が全くいないのも問題ですが・・・
アプリばっかりじゃなく、インフラ周りも勉強しないといけないですな。

カバー画像
Mylene2401によるPixabayからの画像

投稿 PHPアプリ高負荷の原因は？ は Sheltie's Garage に最初に表示されました。

主な改修内容は

• アダルト除外フラグの追加
• レイアウト修正

となります

これでPCで見てもある程度耐えられるはず。

ちなみにアダルト除外フラグですが、Amazon側でのアダルト判定が甘い?ようで、
これってアダルトだよね？　と思われる本に対して、アダルトフラグが立っていなかったりします。
要約すると、アダルト除外にしていても、アダルト商品が表示される可能性があるのでお気を付けください。

ちなみに、このアプリはAmazon内でKindleUnlimited対象の商品が探し辛いため作成したものですが、最近やっと対象書籍を一覧で見れるリンクを見つけました。

ここにありましたね・・・
アプリの表示結果も、ここと同じ内容になります

投稿 KindleUnlimitedSearchをバージョンアップしました は Sheltie's Garage に最初に表示されました。

GitHubにいろいろな方のボイラーテンプレートが準備されているのですが、最新かつシンプルということで、以下のボイラーテンプレートを使用しました
https://github.com/adenvt/laravel-coreui-vue

インストール方法はGitHubのReadMeに記載があるので、その通りに作成すればOK

プロジェクト作成後に作成したプロジェクトにアクセスすれば、CoreUIが適用済みの画面が表示されます

終わりに

これできれいなUIが設定されたプロジェクトが簡単に作成できますね
まずは内部がどうなっているのか解析していきます

投稿 Laravel + CoreUI設定済み　ボイラーテンプレートを使う は Sheltie's Garage に最初に表示されました。

タイトルの環境でSPAを作ろうとして、意外とはまったのでメモ
多分、メモしながら作業しないと、2回目作るときも同じ失敗をしそう・・・

Laravelプロジェクト作成

これはいつも通りの手順で・・・

$ laravel new VueEnv

Bootstrup-Vue

ここがはまったポイントのひとつ目
すでにLaravelに入っていると思ったけど、npmで新規インストールする必要があった

$ cd VueEnv
$ npm i bootstrap-vue

Vue-Router

こちらもnpmでインストールできます

$ npm install vue-router

以上でフレームワークのインストールは完了です。

Laravelアプリの変更

\VueEnv\resources\js\app.jsapp.js
Bootstrup-vueとVue-Routerの公式サイトにあるサンプルコードを貼り付ける。
サンプルコードはそれぞれ
Vue-Router
https://router.vuejs.org/ja/installation.html
https://router.vuejs.org/ja/guide/#javascript

Bootstrup-Vue
https://bootstrap-vue.js.org/docs/
を、使いました。
全体像はこんな感じになります。

// Vue-Routerの設定
import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(VueRouter);
Vue.use(BootstrapVue);

// 0. モジュールシステムを使っている場合 (例: vue-cli 経由で)、Vue と VueRouter をインポートし、`Vue.use(VueRouter)` を呼び出します。

// 1. ルートコンポーネントを定義します
// 他のファイルからインポートすることもできます
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. ルートをいくつか定義します
// 各ルートは 1 つのコンポーネントとマッピングされる必要があります。
// このコンポーネントは実際の `Vue.extend()`、
// またはコンポーネントオプションのオブジェクトでも構いません。
// ネストされたルートに関しては後で説明します
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. ルーターインスタンスを作成して、ルートオプションを渡します
// 追加のオプションをここで指定できますが、
// この例ではシンプルにしましょう
const router = new VueRouter({
  routes // `routes: routes` の短縮表記
})

// 4. root となるインスタンスを作成してマウントします
// アプリケーション全体がルーターを認知できるように、
// ルーターをインジェクトすることを忘れないでください。
const app = new Vue({
  router
}).$mount('#app')

// これで開始です!

Laravelコントローラなどの作成

Laravelコントローラを作成して、とりあえず動くようにします。
この手順については、以前の記事「LARAVELでSPAアプリケーションページを作成する」と同様になるため、省略します。
RestfulAPI用のコントローラと、エントリポイントとなるView「app.blade.php」を作成します。

app.blade.phpの編集

コントローラとビューが出来たら、app.blade.phpの内容をこれまたそれぞれの公式ページをもとに、内容を変更してみます。
テンプレートの中身は、「Starter Templates」をベースにカスタマイズしてみます。
全体像はこんな感じ

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>My first Bootstrap-Vue app</title>
    <link href="{{asset('css/app.css')}}" rel="stylesheet">
  </head>

  <body>
    <!-- Our application root element -->
    <div id="app">
      <b-container>
        <b-jumbotron header="Bootstrap Vue"
                     lead="Bootstrap 4 Components for Vue.js 2"
        >
          <p>For more information visit our website</p>
          <b-btn variant="primary" href="https://bootstrap-vue.js.org/">More Info</b-btn>
        </b-jumbotron>

      </b-container>

      <b-container>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>

        <router-view></router-view>
      </b-container>
    </div>

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

ビルドして動作確認

以上で、Laravel + Vue + Vue-Router + Bootstrup-Vueの環境ができたはずです。
WebPackにてリソースをビルド後、動作を確認してみましょう。
プロジェクトディレクトリで、以下のコマンドでビルドします

npm run watch

メモ
初回のnpm run watch実行時に以下のエラーが発生した

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sheltie\AppData\Roaming\npm-cache\_logs\2018-10-10T22_08_22_834Z-debug.log

npm installでパッケージをインストールしたら直った

$ npm install

動作確認

実際に動きを確認します。以下のURLにアクセス
http://vue-env.test/

「Go to Foo」「Go to Bar」のリンクをそれぞれクリックすると、URLと画面表記が変わることが確認できるかと思います。

終わりに

これでLaravel + Vue + Vue-Router + Bootstrup-Vueの環境ができました。
今回取り入れたかった要素はすべてそろったので、やっとこさアプリ開発に取り組むことができそうです。

投稿 Laravel + Vue + Vue-Router + Bootstrup-Vueの環境を作る は Sheltie's Garage に最初に表示されました。

経緯

最近Kindle Unlimitedに加入してみました。
が、Kindle Unlimitedの本って、Amazon公式サイトだとなんか検索しにくいと感じていまして、それなら、自分で、自分が使いやすい検索画面を作ってしまおうということで調査を開始しました。

Laravel用 AmazonAPIモジュールのインストール

探せばあるものですね。
laravel用のAmazon APIモジュールがあったので、プロジェクトに組み込みます。
https://github.com/kawax/laravel-amazon-product-api

コマンドは以下の通り。作成したLaravelプロジェクトのフォルダに移動して実行します。

composer require revolution/laravel-amazon-product-api
php artisan vendor:publish --provider="Revolution\Amazon\ProductAdvertising\Providers\AmazonProductServiceProvider"

.envファイルの編集

Laravelの.envファイルにAPI用の設定を追加。
COUNTRYは日本の場合、co.jpを指定することになります。

AMAZON_API_KEY=
AMAZON_API_SECRET_KEY=
AMAZON_ASSOCIATE_TAG=
AMAZON_COUNTRY=co.jp

とりあえず動かす

RESTApiコントローラを作成し、アマゾンAPIを読みだしてみます。

\routes\api.php

Route::resource('search', 'KindleSearchApiController');

\app\Http\Controllers\KindleSearchApiController.php

use AmazonProduct; // 追加

public function index()
{
    //
    $response = AmazonProduct::search('All', 'amazon' , 1);

    return $response;
}

URLにアクセスしてみる

とりあえずレスポンスが取得できます

http://kus.test/api/search

Kindle Unlimitedの商品に絞ってみる

AmazonAPIでは、Node(分類のようなもの？)で商品を絞ることができます。
以下の記事で、AmazonAPIのnode一覧が確認できるので、Kindle Unlimitedのノード番号「4486610051」を得ることができます。
https://qiita.com/kobake@github/items/88001f62983211027f63

\app\Http\Controllers\KindleSearchApiController.php

public function index() {
    // 
    // $response = AmazonProduct::search('All', 'amazon' , 1); 
    $response = AmazonProduct::browse('4486610051');

    return $response;
}

終わりに

ひとまずAmazonAPIを利用してKindle Unlimitedに絞った商品を取得することができました。
Vue.jsと組み合わせれば、読み放題に特化した検索サイトが作れそうですね。

投稿 Laravel用AmazonAPIモジュール は Sheltie's Garage に最初に表示されました。

SinglePageApplicationの略で、画面遷移が発生せず、javaScriptなどを駆使して画面の内容を書き換えて動作するアプリケーションのことみたいです。
LaravelにはSPAを作成するための一式が組み込まれているようなので、簡単なSPAを作成してみたいと思います。

参考にしたのは、以下の記事になります。
<https://qiita.com/acro5piano/items/f33381fc60408abe9865>

Laravelプロジェクト作成

まずはLaravelプロジェクトを作成します。
いつものコマンドで作成

laravel new SPA

laradockの設定

開発環境のlaradockに先ほど作成したSPAプロジェクトを追加します。
nginxの設定を新規追加します

既存ファイルをコピーして作成
laradock\nginx\sites\spa.conf
中身の下記の部分を編集
server_name spa.test;
root /var/www/spa/public;
index index.php index.html index.htm;

以下のファイルを編集
C:\Windows\System32\drivers\etc\hosts
設定を追加
127.0.0.1 spa.test

laradockを起動し、とりあえずサイトにアクセスできるか確認します

docker-compose.exe up -d nginx mysql

サイトにアクセス
http://spa.test/

いつもの画面が出てくれば、とりあえずOK

RestAPIの作成

コントローラの作成

artisanコマンドを利用してRest用コントローラを作成します。

php artisan make:controller SPAController --resource

コントローラを編集します。
とりあえず、メソッド名を返却する処理を追加します。

\SPA\app\Http\Controllers\SPAController.php

/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
    //
    return ['data' => 'index'];
}

ルートの設定

Rest用のルートを追加します。

\SPA\routes\api.php

Route::resource('spa', 'SPAController');

ここまで設定していかにアクセスすると、簡単なJsonが帰ってくることが確認できると思います。 http://spa.test/api/spa

SPAのベースページの作成

ルートの設定

/api/* 以外のURLにアクセスが来た時に応答するルートを設定する

\SPA\routes\web.php

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

これで、api以外にアクセスが来たときは、app.blade.phpが応答されるようになる。

クライアントサイドのルーティングライブラリ取得

vue-routerを使用するため、プロジェクトフォルダ内にあるpackage.jsonを編集

"vue-router": "^3.0.0"

npmコマンドでインストール

npm install

WebPack起動

npm run watch

が、起動したところ、いろいろエラーが出たので対処
エラー：Module build failed: Error: Cannot find module ‘babel-core’
対処：https://github.com/babel/gulp-babel/issues/124 の記事にあった、以下のコマンドを実行

npm install --save-dev babel-core babel-preset-env

エラー: Error: Can’t resolve ‘css-loader’, Module not found: Error: Can’t resolve ‘postcss-loader’
対処：https://github.com/webpack/webpack/issues/1470の記事の以下のコマンドを実施

npm install --save-dev css-loader
npm install --save-dev postcss-loader

エラー: Module build failed: Error: Cannot find module ‘node-sass’
対処：過去のコマンドを利用してインストール

npm install --save-dev node-sass

以上でWebpackのビルドがうまくいくようになりました

Ajax通信ライブラリ「axios」

axiosを利用し、ajax通信を行います。

\SPA\resources\js\bootstrap.js

window.axios = require('axios')

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
}

Vue.prototype.$http = window.axios

メインのjsファイルに処理を追加します。

\SPA\resources\js\app.js

window.Vue = require('vue');

import Vue from 'vue'
import VueRouter from 'vue-router'

require('./bootstrap')

Vue.use(VueRouter)

Vue.component('navbar', require('./components/Layouts/Navbar.vue'))

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: require('./components/Articles/Index.vue') },
        { path: '/about', component: require('./components/About.vue') },
    ]
})

const app = new Vue({
    router,
    el: '#app'
})

※npm run watch を起動していると、jsの編集に応じて自動ビルドが動く。今回は、まだ作成していない Index.vue About.vue を指定しているためエラーが表示されるが、気にしない。

Viewを作成

Laravelが返却する唯一のビューとなる「app.blade.php」を作成します。

\SPA\resources\views\app.blade.php    

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link rel="stylesheet" href="{{ mix('css/app.css') }}"></script>

        <script>
            window.Laravel = {
                csrfToken: "{{ csrf_token() }}"
            };
        </script>
    </head>
    <body>
        <div id="app">
            <navbar></navbar>
            <div class="container">
                <router-view></router-view>
            </div>
        </div>
    </body>
    <script src="{{ mix('js/app.js') }}"></script>
</html>

Vue Component作成

以下の2つのコンポーネントをそれぞれ作成します。

\SPA\resources\js\components\Layouts\Navbar.vue

<template>
    <nav class="navbar navbar-default">
        <li>
            <router-link  to="/about">About</router-link>
        </li>
    </nav>
</template>


\SPA\resources\js\components\About.vue

<template>
    <div>
        This page describe who we are.
    </div>
</template>

ajax通信を行う

VueからLaravelへajax通信を行います。
apiにアクセスしてメソッド名を取得するだけの処理となります。

\SPA\resources\js\components\Articles\Index.vue

<template>
    <div>
        <p>
            {{ name }}
        </p>
    </div>
</template>

<script>
    export default {
        created() {
            this.getApiName()
        },
        data() {
            return {
                name: ''
            }
        },
        methods: {
            getApiName() {
                this.$http.get('/api/spa')
                .then(res =>  {
                    this.name = res.data.data
                })
            }
        }
    }
</script>

実行してみる

以上で、LaravelとVueを使用したSPAが完成したはずなので、サイトにアクセスしてみます。
http://spa.test/

http://spa.test/about

かなり不格好ではありますが、ひとまずVue + axios でSPAのひな型を作成することができました。

終わりに

今回はLaravel + VueでSPAのひな型を作成してみました。
初めて使う技術ばかりなので、いろいろ躓きそうですが、今後はこれをもとに小さなWebアプリを作っていけたらなぁという感じです。
javaScriptもきちんと勉強しないと、すでに構文が意味不明ですねぇ・・・ (´・ω・｀)

投稿 LaravelでSPAアプリケーションページを作成する は Sheltie's Garage に最初に表示されました。

・Laradockの設定確認

自分の環境では以下の設定になっています

laradockの.env設定

### MYSQL #################################################

MYSQL_VERSION=latest
MYSQL_DATABASE=default
MYSQL_USER=default
MYSQL_PASSWORD=secret
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d

上記の設定より、ユーザー:default, パスワード:secretとなります

Laravelアプリの設定

Laravelの.env設定は以下の通り

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret

DB_HOSTには、docker-compose.xmlのサービス名を指定します

MySQL Workbench

ホストから、DockerコンテナのMysqlに接続する設定は以下の通り

php artisan migrateコマンド

dockerコマンドでコンテナ内に入る必要があります

GitBashから以下のコマンドを実行
$ winpty docker-compose exec workspace bash

その後、目的のプロジェクトフォルダ内でartisanコマンドを実行
root@9dbe7ec65ea8:/var/www# php artisan migrate

Laradockは便利ですが、環境構築後はいろいろ戸惑ってしまいますね。

投稿 LaradockのDBアクセス設定まとめ は Sheltie's Garage に最初に表示されました。

エラーメッセージは「ERR_EMPTY_RESPONSE」というもの。

解決方法
以下のサイトを参考にしました。
https://qiita.com/spiderx_jp/items/fa8d5ffe298759df9e06

自分の環境でもカスペルスキーを使用しており、何かの拍子にネットワーク設定を変更してしまったようです。
カスペルスキーの設定画面で「プロテクション」>「ファイアーウォール」>「ネットワーク」の順に選択し、DockerNATのネットワークを「許可するネットワーク」に変更。

これで無事にローカル環境に接続できるようになりました。

投稿 Windows10 Laradockでローカル開発環境につながらなくなったお話 は Sheltie's Garage に最初に表示されました。