Как получить доступ к vue. js через подкаталог URL с помощью Nginx (обратный прокси-сервер) + Nginx (Docker) + Vue. js (Docker) - PullRequest
0 голосов
/ 08 февраля 2020

Я хотел бы получить доступ к 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 .conf из Nginx (обратный прокси-сервер)

    server {
        listen       80;
        server_name  localhost;

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

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

nginx .conf из Nginx (Вкл. 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;
        }

    }
}

docker -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 (маршрутизатор / индекс. 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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...