docker - 如何通过 Nginx（反向代理）+ Nginx（Docker）+ Vue.js（Docker）通过 URL 子目录访问 vue.js

Question

我想http://localhost/abc通过以下路线访问 URL 子目录。

User --> Nginx(Reverse proxy) --> Nginx(Docker) --> Vue.js(Docker)

但是我不能。我可以访问Nginx(Docker)直到。但是 Nginx（反向代理）不起作用。

这些是代码和vue版本。

$ vue --version
@vue/cli 4.0.5

如果有人了解如何解决此问题，请告诉我。

Nginx的nginx.conf（反向代理）

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        location /abc {
            proxy_pass http://localhost:30030;
        }
    }

Nginx 的 nginx.conf（在 Docker 上）

user nginx;
worker_processes auto;
pid /run/nginx.pid;
events {
    worker_connections 1024;
    multi_accept on;
    use epoll;
}
http {
    server {
        listen 30030;
        charset utf-8;
        server_name localhost;
        index      index.html;
        root    /usr/share/nginx/html;

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

    }
}

码头工人-compose.yml

version: '3.7'

services:
  web:
    restart: always
    build: .
    ports:
      - "30030:30030"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf

Dockerfile

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 30030
CMD ["nginx", "-g", "daemon off;","-c","/etc/nginx/nginx.conf"]

Vue.js（路由器/index.js）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/Home.vue'

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
]

const router = new VueRouter({
  mode: 'history',
  routes: routes,
})

export default router

标签： dockervue.jsnginxreverse-proxy