【使いまわし】Dockerでプロジェクト名とサービス名を被らせてみる

# はじめに

- Dockerで、Dockerfileとかdocker-compose.ymlを使いまわしていると、どこまでプロジェクト名やサービス名を変える必要があるのだろうと不安になりました。
- なので、プロジェクト名やサービス名を被らせて、どこまでちゃんと動くか調べました。
- Reactプロジェクトを使っています。
- プロジェクト名とサービス名については、以下を参考
 
https://qiita.com/satodoc/items/188a387f7439e4ec394f

# 異なるプロジェクト名の場合

プロジェクト名を、react-app1とreact-app2でそれぞれ作成

![プロジェクト名１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/0f50db96-f4f6-ff7b-70ba-86b0511e5fed.png)

![プロジェクト名２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/84d898eb-6595-23ad-6934-badf703759c6.png)

`docker compose up --build -d`すると以下の結果に

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/2407f359-35db-27cd-e9f3-38d6f86fb23c.png)

- プロジェクト名を変えると、完璧に動く
- ちゃんと違うプロジェクトとしてDockerが認識してくれる
- ただ、ホスト側のポート番号は変える必要がある
    - ports: "3000:3000" と　ports: "3002:3000"
- サービス名を同じにしても大丈夫

# 同じプロジェクト名・同じサービス名の場合

- 次は、同じプロジェクト名で、同じサービス名で実験しました。
- 「あプロジェクト」「いプロジェクト」を作ります。
- サービス名は、docker-compose.ymlで定義するものです。
- プロジェクト名を、react-appにしました。

↓あプロジェクトのフォルダ構成
![プロジェクト名.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/e4bea18a-efb3-74ab-ede6-a927871f2d2e.png)

↓いプロジェクトのフォルダ構成
![プロジェクト名.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/e4bea18a-efb3-74ab-ede6-a927871f2d2e.png)
あプロジェクト

```yml
# docker-compose.yml
version: "3"

services:
  react-app: #同じサービス名！！！！
    build: .
    volumes:
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3000:3000"
```

```js

<div className="App">
    <h1>「あ プロジェクト」</h1>
</div>

```

いプロジェクト

```yml
# docker-compose.yml
version: "3"

services:
  react-app: #同じサービス名！！！！
    build: .
    volumes:
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3002:3000"
```

```js

<div className="App">
    <h1>「い プロジェクト」</h1>
</div>

```

### 「あプロジェクト」を立ち上げる
- `docker compose up --build -d`
→コンテナの立ち上がり成功
- localhost:3000→「あプロジェクト」が表示された

↓「あプロジェクト」立ち上げ時のコンテナ状況
![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/3b3641ae-a7ec-0ace-6979-20a1c421c665.png)


### 「いプロジェクト」を立ち上げる
- `docker compose up --build -d`
→「いプロジェクト」は立ち上がったが、「あプロジェクト」が廃棄された
- localhost:3000→アクセス不可
- localhost:3002→「いプロジェクト」が表示された
- イメージは、`<none>`と、`react-app-react-app:latest` が作成された
- 「あプロジェクト」のイメージ名は、`<none>`に変更されていた

↓「あプロジェクト」「いプロジェクト」を続けて立ち上げたときのコンテナ状況
![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/d3800dd9-cce2-2b07-32a5-85098d8a3e38.png)

### 結論
- イメージもコンテナも、後からビルドした「いプロジェクト」に乗っ取られた
- 同じプロジェクト名で、同じサービス名は一つしか作成できない

# 同じプロジェクト名・異なるサービス名の場合
今度は、同じプロジェクト名で、違うサービス名にしてみました。

↓あプロジェクトのフォルダ構成
![プロジェクト名.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/e4bea18a-efb3-74ab-ede6-a927871f2d2e.png)
↓いプロジェクトのフォルダ構成
![プロジェクト名.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/e4bea18a-efb3-74ab-ede6-a927871f2d2e.png)

あプロジェクト

```yml
# docker-compose.yml
version: "3"

services:
  a-app: #サービス名をa-app
    build: .
    volumes:
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3000:3000"
```

いプロジェクト

```yml
# docker-compose.yml
version: "3"

services:
  i-app: #サービス名をi-app
    build: .
    volumes:
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3002:3000"
```

`docker compose up --build -d`で、あプロジェクトを立ち上げる

↓コンテナ状況
![Untitled (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/be26ac1a-db97-3ac9-5fba-82523866f85c.png)


`docker compose up --build -d`で、いプロジェクトを立ち上げる

↓コンテナ状況
![Untitled (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/29e76a68-2072-c216-8b14-4bb749195f46.png)


ちゃんと立ち上がるけど、注意された
```
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
time="2023-08-09T16:01:33+09:00" level=warning msg="Found orphan containers ([react-app-react-app-1]) for this project. If you removed or renamed this service in your compose file, you can run this command with the --remove-orphans flag to clean it up."
```
- localhost:3000→「あプロジェクト」が表示された
- localhost:3002→「いプロジェクト」が表示された

イメージを見ると、ちゃんとそれぞれで、イメージが作成されていた

![Untitled (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/87de1f0d-0b4a-0367-655a-35169c658cc5.png)

### 結論
- 同じプロジェクト名で、違うサービス名にすると、ちゃんと立ち上がる
- でも、同じプロジェクトとして認識されてしまい、関連のあるコンテナと思われてしまう
- 同じプロジェクト名にするのは、よくない！！！


# ホスト側のポートが同じ場合
`port: ホスト側のポート：コンテナ側のポート`です。
コンテナ側のポートは、同じでも全く問題ないです。
なぜなら、コンテナは独立しているためです。問題なのはホスト側のポートです。

あプロジェクト

```yml
# docker-compose.yml
version: "3"

services:
  a-app:
    build: .
    volumes:
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3000:3000"　#同じ
```

いプロジェクト

```yml
# docker-compose.yml
version: "3"

services:
  i-app:
    build: .
    volumes:
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3000:3000" #同じ
```

`docker compose up --build -d`で、あプロジェクト立ち上げ
`docker compose up --build -d`で、いプロジェクト立ち上げ

エラーが出た。
```
Error response from daemon: driver failed programming external connectivity on endpoint react-app-i-app-1 (db68ac6f7ebfeacd3f3880f4e1afc03f88d2ba4f302e90d6391cc497aafb7fcf): Bind for 0.0.0.0:3000 failed: port is already allocated
```

「いプロジェクト」のビルドだけなら大丈夫だった。
つまり、どちらか一方のコンテナしか立ち上げない場合は、上手くいく

↓コンテナ状況
![Untitled (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/5d5bd784-be1e-0dd0-d353-5f1cec0e63dc.png)


# 最終結論
- プロジェクト名は必ず変更する必要がある
- サービス名は同じでも大丈夫
- ホスト側のportは、変更を推奨
- コンテナ側のportは変更する必要はない
- Dockerfileは、全く同じで問題ない

# 再利用Dockerで変更するべき箇所まとめ

1回目作成
![puojekuto .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/6a973c32-5aa6-a603-9e3f-2e574c97d94b.png)

```yml
# docker-compose.yml
version: "3"

services:
  react-app: 
    build: .
    volumes:
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3000:3000" 

```

2回目以降作成する際は、



![プロジェクト２-変更.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/0e85404f-035b-4d0b-0c72-7a79148d9183.png)

```yml
# docker-compose.yml
version: "3"

services:
  react-app: #変更しなくて大丈夫！！！
    build: .
    volumes:
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3002:3000" #"3002(こっちは被らないようにする):3000"
```