Nextjs + Docker-Compose：如何解析容器主機名客戶端？

Question

Docker 的新手在這里。 我的 Nextjs 應用程序遇到了一個令人困惑的障礙，該應用程序與 API 和數據庫容器一起在自己的容器中運行。

我的 Nextjs 應用使用來自 API 容器的數據。 這在服務器端工作得很好：Nextjs 應用程序會按應有的方式解析容器主機名。 但是，在客戶端，應用程序會中斷，因為容器主機名對瀏覽器沒有任何意義（我認為？）。 我對如何處理這個問題感到很迷茫。 想法？

這是我的 Docker 撰寫文件，以幫助闡明我的問題。 請注意，我通過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

好的，所以我找到了解決方案/解決方法。 我在網上閱讀，我發現只有一種方式。 這就是將反向代理設置為 nextjs 服務器，如下所示： Proxy to backend with default Next.js dev server 。 但我以不同的方式修復它：所以 nextjs 有 2 種 env 變量，那些只暴露給 SERVER(BACKEND_URL=http://servicename:port) 和那些暴露給 SERVER AND CLIENT( NEXT_PUBLIC _BACKEND_URL=http:/ /localhost:port) - 這里我定義了 localhost 以便瀏覽器可以讀取 api。 你只需要設置 axios：

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.BACKEND_URL || process.env.NEXT_PUBLIC_BACKEND_URL,
});

export default instance;

現在在客戶端它將使用 http://localhost:port 而在 SSR 上將使用 http://servicename:port。

Answer 2

如果您想在您的計算機（本地環境）中工作，您可以在 next.config.js 中更改后端的 IP。 例如，如果您的計算機具有 IP 192.168.1.23 並且后端容器在端口 3000 中運行，那么您的 next.config.js 必須具有下一個：

  env: {
    backendUrl: 'http://192.168.1.23:3000/api/v1',
  },

也為你 axios 配置可以如下所示：

import axios from 'axios';

const wrapperAxios = axios.create({
  baseURL: process.env.backendUrl,
  headers: { 'Content-type': 'application/json' },
});
export default wrapperAxios;