Docker+Laravel8+MySQL5+phpmyadmin+Vue.jsの開発環境を構築 (Windows)

# 【開発環境】
Windows 10 HOME

phpmyadmin 5

```
docker --version
Docker version 20.10.7, build f0df350

docker-compose --version
docker-compose version 1.29.2, build 5becea4c

php artisan --version
Laravel Framework 8.49.2

npm list vue
vue@2.6.14

mysql --version
mysql  Ver 14.14 Distrib 5.7.34, for Linux (x86_64) using  EditLine wrapper

```

# はじめに
Docker+Laravel+MySQL+phpmyadmin+Vue.jsでSPAのWebアプリ作成の勉強をしたくて、Dockerで開発環境構築をしました。

phpmyadminも含んだWindows版の記事が意外となかったので
備忘録を兼ねて構築手順を記載します
記載内容に誤り等ございましたら、ご指摘お願いいたします。

また対象はDocker初心者、
[Docker Desktop](https://www.docker.com/products/docker-desktop)は用意できている前提です。

# コンテナ、ディレクトリ構成

docker-laravel-vue - プロジェクト名 (フォルダ名)

```
docker-laravel-vue 
├ docker-compose.yml
│- nginx
│ 　└ nginx.conf
│- php
│ 　└ Dockerfile
│　 ├ php.ini
│　 
└ server

```


# 1. ファイルを準備


docker-compose.yml
Dockerfile
php.ini
nginx.conf

[【Github】](https://github.com/silversink8888/docker-laravel-vue)にソースを上げています。

```docker-laravel-vue/dockerfile-compose.yml
version: '3'
services:
  nginx:
    image: nginx:latest
    ports:
      - 8080:80
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    #  - ./www/html:/var/www/html
      - ./server:/var/www
    depends_on:
      - php

  php:
    build: ./php
    volumes:
    #  - ./www/html:/var/www/html
        - ./server:/var/www
    depends_on:
      - db

  db:
    image: mysql:5.7
    container_name: db-host
    ports:
      - 13306:3306
    volumes:
      - ./mysql/data:/var/lib/mysql
    environment:
        MYSQL_DATABASE: laravel_db
        MYSQL_ROOT_PASSWORD: password

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:5
    ports:
      - 8888:80
    depends_on:
      - db


```
docker-compose.ymlについては
下記の記事が非常にあざっすでした。

[docker-compose.ymlの書き方について解説してみた](https://qiita.com/yuta-ushijima/items/d3d98177e1b28f736f04)



```docker-laravel-vue\nginx\nginx.conf
server {
  listen 80;
  server_name _;

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

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  location / {
    root /var/www/laravel/public;
    index  index.html index.php;
    try_files $uri $uri/ /index.php$query_string;
  }

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

```




```docker-laravel-vue\php\Dockerfile. 

FROM php:7.4.1-fpm
COPY php.ini /usr/local/etc/php/

RUN apt-get update \
  && apt-get install -y zlib1g-dev libzip-dev zip mariadb-client-10.3 libpng-dev libjpeg-dev curl wget \
  && docker-php-ext-install zip pdo_mysql

# nodejs install
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get install -y nodejs

# Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php -r "if (hash_file('SHA384', 'composer-setup.php') === '$(wget -q -O - https://composer.github.io/installer.sig)') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin
WORKDIR /var/www
RUN composer global require "laravel/installer"

```

```docker-laravel-vue\php\php.ini
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

```



# 2. dockerコンテナのビルドと起動

```
docker-compose build
docker-compose up -d
```


下記のような文言がターミナル内に表示されたら、起動は成功です。

```
Creating db-host ... done
Creating laravel-vue_php_1        ... done
Creating laravel-vue_phpmyadmin_1 ... done
Creating laravel-vue_nginx_1      ... done
```

# 3. phpコンテナに入ってlaravelプロジェクトを作成

```
docker-compose exec php bash
composer create-project --prefer-dist laravel/laravel laravel "8.*"
```
laravel というプロジェクト名で作成。
バージョンは「8」を指定。

# 4. dockerコンテナ停止

```
docker-compose down
```

# 5. laravelの.envファイルを編集

```server\laravel\.env
DB_CONNECTION=mysql
DB_HOST=db-host
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=root
DB_PASSWORD=password
```

# 6. コンテナ起動

```
docker-compose up -d
```

dockerはどこのファイルを修正するかで
流すコマンドが異なっており
下記の記事が大変参考になりました。

[・初心者向けdocker-composeコマンド逆引き](https://qiita.com/okyk/items/a374ddb3f853d1688820)


# 7. ローカルホスト接続

ここでlocalhostに接続しても
下記のようなエラーが出ると思います。
[http://localhost:8080/](http://localhost:8080/)

![localhost-error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/30d1d5c1-69e8-4d79-ab1d-ed8e522c8f3d.png)

```
The stream or file "/var/www/laravel/storage/logs/laravel.log" could not be opened in append mode: failed to open stream: Permission denied 
```
phpコンテナに入って
「storage」フォルダの権限を変更します。

```
docker-compose exec php bash

chmod -R 777 laravel/storage
```

![localhost-ok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/638cffd7-a255-d9e6-0f4c-6e2a08e3f67e.png)

laravelの画面が無事表示されました。



そしてlaravel配下で
php artisan migrate　を行います。

```
cd laravel/
php artisan migrate
```
phpmyadminに接続し
laravel_db　のデータベース中にテーブルが4つ作成されます。

>id : root
ps: password

[http://localhost:8888](http://localhost:8888)
![phpMyAdmin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/48e41b12-ea6e-2c81-af98-26b07f85e30d.png)

![phpMyAdmin-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/4f413e27-7142-bcdc-7ef7-0b309dbb2220.png)


![phpMyAdmin-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/00486dee-dba6-c088-f1d2-ecd20b3cc284.png)

# 9. Vue.jsの導入

```
docker-compose exec php bash
npm install
npm install -D vue
```

これで開発構築手順は以上です。

# VSCodeでDockerのおすすめの拡張機能

・vscode-docker
ImageやContainerの管理

・Remote Development
リモート環境に接続して接続先のソース・リソースで開発・実行

・Remote-Containers
Conrainerに接続（RemoteSSHと組み合わせ、上記のvscode-dockerと組み合わせも可能）

・Japanese Language Pack for Visual Studio Code
VSCodeが日本語化



# 参考

[・Laravel+MySQL+Vue.jsの開発環境をDockerで構築](https://qiita.com/3no3_tw/items/25cb7c0c09d51b56eb5a)
[・Dockerを使ってLaravel開発環境構築](https://qiita.com/A-Kira/items/1c55ef689c0f91420e81)
[・初心者向けdocker-composeコマンド逆引き](https://qiita.com/okyk/items/a374ddb3f853d1688820)
[・DockerでPHP環境を作る（mac）](https://qiita.com/yamaking/items/b9d44b979a6d4abf438f)