【初心者】Laradockで別のプロジェクト（コンテナ）を立ち上げる場合

Laradockを使うと割と簡単にlaraveの開発環境を用意することができます。
ときには、勉強用とマジ開発用となど、複数のLaravel環境を用意したいことがあると思います。その方法を記します。
と、いってもすることは単純で

- プロジェクトのディレクトリを分ける
- 環境ファイル（.env）の一部を変更する

だけです。

<font color="blue">
※本記事では、Laradock内の `workspace` `nginx` `mysql` `phpmyadmin`のみの使用について記載しています。
</font>

# 関連記事
Laradockを利用してLaravelを入れる方法を記載した記事です。
本記事はリンク先の記事の続きとなります。

- [【初心者】LaradockでLaravelの開発環境を簡単構築 - Qiita](https://qiita.com/tomokei5634/items/53d817c14bcfd5953824)

# リスペクトな記事
この記事を作成するにあたり、参考にした記事です。

- [Laradockでプロジェクトごとに環境構築する - Qiita](https://qiita.com/shuntakeuch1/items/87cd20aa2e1a00a0fb21)

- [LaradockでLaravel開発環境構築 - Qiita](https://qiita.com/MasanoriMT/items/98775f96dcc23f5e5d18)

- [【3分で把握】ポート番号とは？と代表的なポート番号まとめ](https://eng-entrance.com/network-port)

- [LaradockのworkspaceからbrowserSyncを動かす](https://qiita.com/hbsnow/items/c95e5a0671dabb7b6344)

# 前提条件
Laradockを利用したLaravel環境が１つ以上入っている

# 1）プロジェクトのディレクトリを分ける
既存のLaravelプロジェクトが入っているディレクトリとは、異なるディレクトリを作成し、そちらへLaradockを `$ git clone` してください。
Laradockの入れ方は [コチラ](https://qiita.com/tomokei5634/items/53d817c14bcfd5953824)

# 2）環境ファイル（.env）の一部を変更する
ココからは`laradock`ディレクトリ内の`.env`ファイルを変更していきます。

## `DATA_PATH_HOST`の変更
デフォルトではデータベースなどがホームディレクトリへ保存されます。それをプロジェクトディレクトリ下へ変更します。

データパス `DATA_PATH_HOST` を`~/.laradock/data`から`.laradock/data`へ変更。

```config:laradock/.env
# DATA_PATH_HOST=~/.laradock/data
# my change ↓
DATA_PATH_HOST=.laradock/data
```

## コンテナ名の変更
デフォルトで`$ docker-compose up`すると、`laradock_***`という名称のコンテナが起動します。上記工程で、プロジェクトのディレクトリは分けていますが、そのまま`$ docker-compose up`すると、既存プロジェクトのコンテナが（同じ名称のコンテナが）立ち上がってしまいます。

任意の名称のコンテナが（既存とは異なるコンテナが）立ち上がるようにします。

プロジェクト名 `COMPOSE_PROJECT_NAME` を`laradock`から`laradock_2`へ変更。
（`laradock_2`は例です。任意の名称に...）

```config:laradock/.env
# COMPOSE_PROJECT_NAME=laradock
# my change ↓
COMPOSE_PROJECT_NAME=laradock_2
```

## ポート番号の変更
コンテナ名と同様にデフォルトの設定のまま立ち上げてしまうと、既存プロジェクトの各機能のポート番号と重複するため、コンテナが立ち上がりません。ポート番号を任意のものへ変更します。

※既存プロジェクトと並行してコンテナを起動する場合の話です。
※既存プロジェクトを立ち上げない場合は、ポート番号を変更する必要はありません。

### （余談）どんなポート番号にするべきか
ちゃんと接続できれば、どんなポート番号でもいいとは思いますが、ちょっとポート番号について調べてみました。[参照サイト](https://eng-entrance.com/network-port)

- ポート番号は0から65535まで存在する
- 0から1023までを「ウェルノウンポート番号」という（80がHTTP、22がSSH、みたいな）
- 1024から49151までを「レジスタードポート番号」という（特定のアプリケーションなどが使用する）
- 49152から65535までは「その他のポート番号」でユーザーが自由に使える

つまりは49152以上であれば、他のポートとは重複しにくいと言えると理解し進めることにします。本記事では、元のポート番号を50000番代に変更しようと思います（例：80→50080、8080→58080）

### WORKSPACE のポート番号の変更
`WORKSPACE_SSH_PORT` を`2222`から`52222`へ変更

```config:laradock/.env
# WORKSPACE_SSH_PORT=2222
# my change ↓
WORKSPACE_SSH_PORT=52222
```

### NGINX のポート番号の変更
`NGINX_HOST_HTTP_PORT` を`80`から`50080`へ変更

```config:laradock/.env
# NGINX_HOST_HTTP_PORT=80
# my change ↓
NGINX_HOST_HTTP_PORT=50080
```

`NGINX_HOST_HTTPS_PORT` を`443`から`50443`へ変更

```config:laradock/.env
# NGINX_HOST_HTTPS_PORT=443
# my change ↓
NGINX_HOST_HTTPS_PORT=50443
```

### MYSQL のポート番号の変更
`MYSQL_PORT` を`3306`から`53306`へ変更

```config:laradock/.env
# MYSQL_PORT=3306
# my change ↓
MYSQL_PORT=53306
```

<font color="red">アプリケーション側の`.env`ファイル内の`DB_PORT`も変更することを忘れないこと！</font>

```config:(アプリ側ディレクトリ)sampleapp/.env
# DB_PORT=3306
# my change ↓　laradock側に合わせて変更
DB_PORT=53306
```

### PHP MY ADMIN のポート番号の変更
`PMA_PORT` を`8080`から`58080`へ変更

```config:laradock/.env
# PMA_PORT=8080
# my change ↓
PMA_PORT=58080
```

<font color="blue">
※本記事では、Laradock内の `workspace` `nginx` `mysql` `phpmyadmin`のみの使用について記載しています。他の機能を用いる場合は、上記同様に変更してください。
</font>

# 3）コンテナを立ち上げて確認
既存プロジェクトおよび、今回に作成した新規プロジェクトの、それぞれのコンテナを立ち上げて、両方ともにちゃんと起動したら成功です。

## （ポート番号も変更している場合は...）
ブラウザから、既存プロジェクトは`http://localhost`でアクセスでき、新規プロジェクトは`http://localhost:50080`でアクセスできるはずです。

同様に、既存プロジェクトは`http://localhost:8080`で、新規プロジェクトは`http://localhost:58080`で、それぞれのphpmyadminへアクセスできるはずです。

## $ docker ps
最後に上記工程でコンテナを起動させてる状態の`$ docker ps`を記載します。

```terminal
$ docker ps
CONTAINER ID        IMAGE                     COMMAND                  CREATED             STATUS              PORTS                                           NAMES
583d03ceec0d        laradock_phpmyadmin       "/docker-entrypoint.…"   2 hours ago         Up 28 seconds       0.0.0.0:8080->80/tcp                            laradock_phpmyadmin_1
d785adb26f64        laradock_mysql            "docker-entrypoint.s…"   2 hours ago         Up 29 seconds       0.0.0.0:3306->3306/tcp, 33060/tcp               laradock_mysql_1
b810c5acca4c        laradock_2_nginx        "/bin/bash /opt/star…"   2 hours ago         Up 7 seconds        0.0.0.0:50080->80/tcp, 0.0.0.0:50443->443/tcp   laradock_2_nginx_1
dd22fa6c131d        laradock_2_php-fpm      "docker-php-entrypoi…"   2 hours ago         Up 8 seconds        9000/tcp                                        laradock_2_php-fpm_1
4ad6674e09f6        laradock_2_phpmyadmin   "/docker-entrypoint.…"   2 hours ago         Up 8 seconds        0.0.0.0:58080->80/tcp                           laradock_2_phpmyadmin_1
a9d899b29e81        laradock_2_workspace    "/sbin/my_init"          2 hours ago         Up 9 seconds        0.0.0.0:52222->22/tcp                           laradock_2_workspace_1
83b9c20f4bca        laradock_2_mysql        "docker-entrypoint.s…"   2 hours ago         Up 9 seconds        33060/tcp, 0.0.0.0:53306->3306/tcp              laradock_2_mysql_1
bc37904c95eb        laradock_php-fpm          "docker-php-entrypoi…"   38 hours ago        Up 27 seconds       9000/tcp                                        laradock_php-fpm_1
976a01ae3fef        laradock_workspace        "/sbin/my_init"          38 hours ago        Up 28 seconds       0.0.0.0:2222->22/tcp                            laradock_workspace_1
c46bc02028e9        docker:dind               "dockerd-entrypoint.…"   38 hours ago        Up 29 seconds       2375-2376/tcp                                   laradock_docker-in-docker_1
2b7a59dc1253        docker:dind               "dockerd-entrypoint.…"   38 hours ago        Up 9 seconds        2375-2376/tcp                                   laradock_2_docker-in-docker_1
```

既存プロジェクトの起動に加え、コンテナの名称やポート番号が任意のものへ変更された新規プロジェクトの起動も確認できます。

# ポート番号を変更した場合で、browserSyncも使うとき
下記の記事が非常に参考になりました。

- [LaradockのworkspaceからbrowserSyncを動かす](https://qiita.com/hbsnow/items/c95e5a0671dabb7b6344)

具体的には...

`laradock/docker-compose.yml`にポートを追加

```yml:laradock/docker-compose.yml
services:
  ### Workspace Utilities ##################################
  workspace:

  # 省略 #

    extra_hosts:
      - "dockerhost:${DOCKER_HOST_IP}"
    ports:
      - "${WORKSPACE_SSH_PORT}:22"
      - "53000:53000" #　←追加
      - "53001:53001" #　←追加
    tty: true
```

そして、アプリ側の`webpack.mix.js`を下記のように

```js:sampleapp/webpack.mix.js
const mix = require("laravel-mix");

mix.browserSync({
    proxy: "nginx", // ←追加
    port: 53000, // ←追加
    ui: { port: 53001 } // ←追加
})
    .js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .version();
```

これでブラウザから`http://localhost:53000/`へアクセスした場合に、ちゃんと変更したファイルの自動リロードがかかります。