How can I Proxy a NuxtJs app running in Docker through NGINX?

Question

NOTE: I have tried the Official Nuxt/Nginx config without any luck. I keep getting this error

2020/07/10 18:41:57 [error] 6#6: *11 connect() failed (111: Connection refused) while connecting to upstream, client: 192.168.96.1, server: , request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:3000/", host: "localhost"

when I use proxy_pass http://127.0.0.1:3000, proxy_pass http://localhost:3000 or proxy_pass http://0.0.0.0:3000

When I try changing that entry to proxy_pass http://container_name:3000 I get a new error

2020/07/10 14:16:58 [emerg] 1#1: host not found in upstream "container_name" in /etc/nginx/conf.d/app.conf:25

My docker-compose.yml file looks something like this:

version: '3'
networks:
  nuxtnet:
services:
  nuxt:
    image: node
    container_name: nuxt
    volumes:
    - ./client/:/var/www/html/client/
    working_dir: /var/www/html/client/
    environment:
      - HOST=0.0.0.0
      - PORT=3000
    command: npm run dev
  nginx:
    image: nginx
    container_name: nginx
    ports:
    - 80:80
    volumes:
    - ./client/:/var/www/html/client/
    - ./config/nginx/conf.d/:/etc/nginx/conf.d/
    - ./nginx/logs/:/var/log/nginx/
    depends_on:
      - nuxt
    networks:
      - nuxtnet

My app.conf nginx file looks like this:

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen          80;             # the port nginx is listening on
    server_name     myapp.dev;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        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_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://localhost:3000; # set the address of the Node.js instance here
    }
}

Upon running docker-compose up with another replica of this project running PHP and MySQL this flow seemlessly but on this project I get a default Nginx error pay 502 Bad Gateway no matter what I place in the proxy_pass field of nginx config. Please help me with any ideas that will make this nightmare go away. Thanks in advance.

the service name is nuxt, use that http://nuxt:3000 and are you totally sure they are in same network? — abestrad
– abestrad, Commented Jul 10, 2020 at 19:26
That one gives me an error 2020/07/10 19:29:13 [emerg] 1#1: host not found in upstream "nuxt" in /etc/nginx/conf.d/app.conf:25 — Software Developer
– Software Developer, Commented Jul 10, 2020 at 19:30

Achu · Accepted Answer · 2020-07-12 07:01:37Z

1

In your nginx file you need to define upsteam with your container name like below

upstream Container_Name {
   server Container_Name:<PORT_OF_THAT_CONTAINER>;
}

In your case it would be as below assuming your nuxt running in port 3000

upstream nuxt {
   server nuxt:3000;
}

And your proxy_pass should be http://Container_Name/path_if_needed

answered Jul 12, 2020 at 7:01

Achu

3646 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I Proxy a NuxtJs app running in Docker through NGINX?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related