Dockerized環境でフロントエンドとバックエンドの間の動的な構成を実現する1つの方法は、NginxやTraefikなどの逆プロキシサーバーを使用することです。逆プロキシは、URLパスに基づいてフロントエンドからバックエンドへのリクエストをルーティングするように設定できます。

あなたの場合、逆プロキシサーバーをセットアップし、フロントエンドコンテナからのリクエストをリッスンするように構成できます。プロキシサーバーは、URLパスに基づいてリクエストをバックエンドコンテナに転送できます。これにより、FrontEndアプリケーションは固定URL（つまり、プロキシサーバーURL）にリクエストを送信でき、プロキシサーバーはリクエストを適切なバックエンドコンテナにルーティングできます。

これを実現するには、Frontendアプリケーションに環境変数を追加して、逆プロキシサーバーのURLを指定できます。開発中は、この変数をプロキシサーバーのローカルURLに設定でき、実稼働時にはリモートプロキシサーバーのURLに設定できます。

Nginxを使用して逆プロキシをセットアップする方法の例は次のとおりです。

1. Docker-Composeファイルに次の構成を追加します。

バージョン： '3'
サービス：
  プロキシー：
    画像：Nginx：最新
    ポート：
       - 「80：80」
    ボリューム：
       -  ./nginx.conf：/etc/nginx/nginx.conf：ro
  フロントエンド：
    建てる： 。
    環境：
      -proxy_url = http：// proxy：80
    ポート：
       - 「3000：3000」
  バックエンド：
    建てる： 。
    ポート：
       - 「8080：8080」

2. docker-composeファイルと同じディレクトリに `nginx.conf`ファイルを作成し、次の構成を追加します。

イベント{
}

http {
  上流のバックエンド{
    サーバーバックエンド：8080;
  }

  サーバー{
    聞く80;
    server_name localhost;

    location /api {
      proxy_pass http：// backend;
    }

    位置 / {
      proxy_pass http：// frontend：3000;
    }
  }
}

3.「Docker -Compose Up -D」を実行して、コンテナを起動します。

この例では、 `nginx.conf`ファイルは、バックエンドコンテナを指す上流のブロックと、フロントエンドコンテナからのリクエストを聴くサーバーブロックを定義します。`location`ブロックは、URLパスに基づいて適切なバックエンドまたはフロントエンドコンテナにリクエストをルーティングするために使用されます。

これで、「http：// localhost：3000`およびバックエンドAPIに移動して、 "http：// localhost/api`にアクセスして、フロントエンドアプリケーションにアクセスできます。`proxy_url`環境変数を使用して、プロキシサーバーURLを使用するようにFrontEndアプリケーションを構成できます。

このセットアップを使用すると、フロントエンドアプリケーションを再構築せずにプロキシサーバー構成を変更することにより、バックエンドURLを動的に変更できます。
One way to achieve dynamic configuration between your frontend and backend in a dockerized environment is by using a reverse proxy server, such as Nginx or Traefik. The reverse proxy can be set up to route requests from your frontend to your backend based on the URL path.

In your case, you can set up a reverse proxy server and configure it to listen to requests coming from the frontend container. The proxy server can then forward the requests to the backend container based on the URL path. This way, the frontend application can send requests to a fixed URL (i.e., the proxy server URL) and the proxy server can route the requests to the appropriate backend container.

To achieve this, you can add an environment variable in your frontend application, which specifies the URL of the reverse proxy server. During development, you can set this variable to the local URL of the proxy server, and in production, you can set it to the URL of the remote proxy server.

Here's an example of how you can set up a reverse proxy using Nginx:

1. Add the following configuration to your docker-compose file:

version: '3'
services:
  proxy:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
  frontend:
    build: .
    environment:
      - PROXY_URL=http://proxy:80
    ports:
      - "3000:3000"
  backend:
    build: .
    ports:
      - "8080:8080"

2. Create an `nginx.conf` file in the same directory as your docker-compose file and add the following configuration:

events {
}

http {
  upstream backend {
    server backend:8080;
  }

  server {
    listen 80;
    server_name localhost;

    location /api {
      proxy_pass http://backend;
    }

    location / {
      proxy_pass http://frontend:3000;
    }
  }
}

3. Start the containers by running `docker-compose up -d`.

In this example, the `nginx.conf` file defines an upstream block that points to the backend container and a server block that listens to requests coming from the frontend container. The `location` blocks are used to route requests to the appropriate backend or frontend container based on the URL path.

Now, you can access your frontend application by going to `http://localhost:3000` and your backend API by going to `http://localhost/api`. The frontend application can be configured to use the proxy server URL by using the `PROXY_URL` environment variable.

With this setup, you can dynamically change the backend URL by changing the proxy server configuration without rebuilding the frontend application.