Setting up nginx proxy for dockerized Vue frontend and Node backend communication

Backend
1

I’m having trouble getting my containerized Vue3 frontend to communicate with my containerized Express backend through nginx. When I run everything locally without Docker, the setup works perfectly using Vite’s proxy configuration.

Here’s my frontend API call:

try {
  fetch('/createTask', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: taskName.value, description: taskDesc.value, completed: false })
  })
  .then(response => response.json())
  .then(data => {
    this.taskResult = data.message;
  })
  .catch(err => {
    console.error('Request failed:', err);
  });
} catch(e) {
  alert('Error occurred: ' + e.message);
}

My vite.config.js proxy setup:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    proxy: {
      '/createTask': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        secure: false
      }
    }
  }
})

Backend endpoint:

app.post('/createTask', (req, res) => {
  // process task creation
  res.status(200).json({ message: req.body.description });
});

My nginx configuration:

server {
    listen 80;
    server_name localhost;
    
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /createTask {
        proxy_pass http://backend:8080;
    }
}

The frontend loads fine but API requests aren’t reaching the backend. Has anyone successfully configured nginx to route requests between separate containerized frontend and backend services?

2

hmm, are you using docker-compose for this setup? curious what your container networking looks like - is the backend container actually named ‘backend’ in your compose file? also wondering if you’re getting any specific error messages in the nginx logs when the requests fail? might help narrow down where exactly things are breaking.

3

check your docker-compose networks section - sounds like nginx cant reach the backend container. also make sure you’re building the vue app properly for production since vite proxy wont work in built files. try adding proxy_set_header Host $host; to your nginx location block too, sometimes helps with routing issues.

4

The issue likely stems from how your containers are networked together. Your nginx configuration looks correct, but you need to ensure all three containers can communicate with each other. Create a Docker Compose setup where nginx, frontend, and backend are on the same network. The backend container should expose port 8080, and your nginx proxy_pass should point to http://backend:8080 (which you already have). Most importantly, make sure your Vue application is built for production and served as static files through nginx, not running the Vite dev server inside the container. The Vite proxy configuration won’t work in production builds since it’s only active during development. Your nginx server should handle both serving the Vue static files and proxying API calls to the backend container.