I have done this many times but for some reason I am not able to get my containers to communicate.

Even when I try to curl from the frontend I cannot connect!

example:

/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

My nginx file looks like

 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;
     }

 }

I am using Vue.js 3 with typescript and created a custom url handler because I am not using webpack.

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 "/";
    }
}

then I have a .env file

NODE_ENV=development
API_HOST=localhost

and am using 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

then I build the image using 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:

I have two .env files

.env
.env.production

and both are the same

NODE_ENV=production
API_HOST=api

Any advice would be greatly appreciated...

CodePudding user response：

localhost inside the client service is the containers localhost, not your PC's localhost where you have the ports mapped.

nginx is trying to pass connections to upstream { server localhost:8081; } given your API_HOST environment variable, there is nothing in the client service listening on port 8081 hence "Connection refused".

You can update your API_HOST to e.g. api resulting in upstream { server api:8081; }, api will be resolved to the containers IP, and the connections will be passed to <container_ip>:8081 instead of localhost:8081 (preferred) OR you can run the client service on the host network and keep using localhost.