Nextjs + Docker-Compose：如何在客户端解析容器主机名？

Question

这里是Docker的新手。我的Nextjs应用程序一直遇到令人困惑的障碍，该应用程序与API和数据库容器一起在自己的容器中运行。

我的Nextjs应用程序使用API​​容器中的数据。这在服务器端非常有用：Nextjs应用程序应按需解析容器主机名。但是在客户端，应用程序中断了，因为容器主机名对浏览器没有任何意义（我认为？）。我不知道该如何处理。想法？

这是我的Docker Compose文件，以帮助阐明我的问题。请注意，我正在通过environment字段将主机名传递给Nextjs应用程序：

version: '3.8'

services:
    # Redis 
    redis:
        image: redis
        command: redis-server --requirepass ${REDIS_PASSWORD} --bind redis
        ports:
            - "6379:6379"
        networks:
            - mywebappio
    # Data Processing Service
    mywebapp-api:
        container_name: mywebapp-api
        restart: always
        build: 
            context: packages/dps-api
            dockerfile: Dockerfile
        command: npm run dev # npm start prod
        working_dir: /usr/src/dps-api
        env_file: 
            - .env
        volumes: 
            - ./packages/dps-api:/usr/src/dps-api
        ports:
            - "5000:5000"
        networks:
            - mywebappio
        depends_on:
            - redis
    # SSR 'client' app
    nextjs:
        container_name: mywebapp-client
        build:
            context: packages/next-server
            dockerfile: Dockerfile
        command: /bin/bash -c "./wait-for-it.sh mywebapp-api:5000 -- npm run build && npm run start"
        environment: 
            - NEXT_PUBLIC_API_BASE=mywebapp-api:5000
        volumes:
            - ./packages/next-server:/usr/src/app
        ports:
            - "3000:3000"
        networks:
            - mywebappio
        depends_on:
            - mywebapp-api
            - redis
networks:
    mywebappio:
        driver: bridge

附加信息：

• 在我的API上使用curl，作为“ localhost：5000”起作用。

• 在开发控制台中，Nextjs应用程序调用“ localhost：3000 /”以获取服务器端数据。鉴于Nextjs的工作原理，这很有道理。

• 在开发控制台中，Nextjs应用程序调用“ mywebapp-api：5000 /”以获取客户端数据。显然，这是行不通的。

Answer 1

这篇帖子中介绍了我找到的最优雅的解决方案：Docker-compose make 2 microservices (frontend+backend) communicate to each other with http requests