➿

devcontainer のフロントエンドとバックエンドで通信する

2023/05/02に公開

VS Code

devcontainer

tech

概要

devcontainer で構築したフロントエンドとバックエンドで docker network を共有することで通信できるようにします。

バックエンド

コンテナが作成される前にホストマシンで docker network test-group を作成します。
.devcontainer/devcontainer.json
```
  "initializeCommand": "docker network inspect test-group || docker network create test-group",
```

external: true の docker network test-group を設定します。

.devcontainer/docker-compose.yml

version: "3"

services:
  app-web:
    networks:
      - test-group

  storage:
    image: fsouza/fake-gcs-server

networks:
  test-group:
    external: true

フロントエンド

コンテナが作成される前にホストマシンで docker network test-group を作成します。

.devcontainer/devcontainer.json

  "initializeCommand": "if ! docker network ls | awk '{ print $2 }' | grep -qx 'test-group'; then docker network create --driver bridge test-group; fi",

コンテナのビルドで docker network test-group を設定します。
.devcontainer/devcontainer.json
```
  "runArgs": ["--network=test-group"],
```
API の通信先をバックエンド docker-compose のサービス名 app-web に修正します。
```
"http://app-web:8080"
```

概要

バックエンド

フロントエンド

Discussion