前端容器与后端容器通过Nginx无法通信求助

我此前多次实现过容器间通信，但本次无法让前端容器与后端容器正常连通。即使在前端容器内执行curl命令也无法建立连接，示例如下：

/etc/nginx # curl http://localhost:8081/v1/test
curl: (7) Failed to connect to localhost port 8081 after 0 ms: Connection refused
/etc/nginx #

容器运行状态：

bb36725aa567   vue-golang-grpc-base-client     "/docker-entrypoint.…"   3 minutes ago    Up 3 minutes    80/tcp, 0.0.0.0:80->8080/tcp       vue-golang-grpc-base-client-1
8d9fa96e0e67   vue-golang-grpc-base-api        "./main"                 15 minutes ago   Up 15 minutes   0.0.0.0:8081-8082->8081-8082/tcp   vue-golang-grpc-base-api-1

相关配置信息 #

Nginx配置 #

upstream api {
    server ${API_HOST}:8081;
 }

 server {
     server_name localhost example.com www.example.com;
     listen 8080;

     root /usr/share/nginx/html;

     access_log /var/log/nginx/access.log;
     error_log /var/log/nginx/error.log;

     location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf)$ {
         expires 1y;
         add_header Cache-Control "public";
         access_log off;
     }

     location / {
        try_files $uri /index.html;
     }

     location ~ ^/(api)/ {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header Host $http_host;
         proxy_set_header X-NginX-Proxy true;

         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection $connection_upgrade;

         proxy_redirect off;
         proxy_pass http://api;

         add_header Cache-Control "no-store, no-cache, must-revalidate";
         expires off;
     }

 }

Vue环境配置类（TypeScript） #

export class EnvironmentHelper {
    public static get isDevelopment(): boolean {
        return process.env.NODE_ENV === "development";
    }

    public static get isProduction(): boolean {
        return process.env.NODE_ENV === "production";
    }

    public get baseUrl(): string {
        if (EnvironmentHelper.isDevelopment) {
            return "http://localhost:8081"
        }
        if (EnvironmentHelper.isProduction) {
            return "http://localhost:8080/"
        }
        
        return "/";
    }
}

.env文件内容 #

NODE_ENV=development
API_HOST=localhost

Axios请求代码 #

const url = new EnvironmentHelper()

export const api = {

    async getTest() {
        try{
            return await grpcClient.get<TestResponse>(url + "v1/test")

容器内环境变量验证 #

/etc/nginx # echo $API_HOST
localhost

docker-compose配置 #

version: '3.0'
services:
    api:
        build:
            context: ./api
        ports:
            - "8082:8082" # gRPC
            - "8081:8081" # gRPC Gateway
        networks:
            - personal
    client:
        build:
            context: ./client
        environment:
            - API_HOST=api
            - NODE_ENV=production
        env_file:
            -   client/.env.local
        networks:
            - personal
        ports:
            - "80:8080"
networks:
    personal:

生产环境.env文件（.env和.env.production） #

NODE_ENV=production
API_HOST=api

问题解决更新 #

尝试多种方案后，最终发现问题出在路由配置上：我将路由设为api而非v1，正确的请求路由应为/v1/test。

细节决定成败，希望这个排查过程能帮到遇到同类问题的人。

内容的提问来源于stack exchange，提问作者Mike3355