无法使用Nginx代理在Nuxt应用中通过URL访问页面

时间:2019-01-13 01:33:21

标签: docker nginx nuxt.js

问题摘要

我正在尝试建立一个使用三个主要服务的应用程序:

  1. Nuxt Web应用程序
  2. Rails API
  3. 将请求传递到API和应用的Nginx代理。

在Nuxt Web应用程序服务中,我实际上正在使用一个单独的Nginx实例,该实例负责在请求时将生成的Nuxt文件提供给Nginx反向代理服务。

我遇到了一个问题,即在硬性设置URL时,Nuxt应用程序不允许访问网页。因此,如果我访问localhost:5000,则Nuxt应用程序可以正常工作并提供索引页,但是如果我访问localhost:5000 /登录,则应用程序将中断。

这仅在通过硬键入URL导航到页面时发生。如果已经在localhost:5000处打开索引页面后,单击应用程序中登录页面的链接,它将加载登录页面。

以下是一些代码:

Docker Compose

# docker-compose.yaml

version: '3'
services:
  db:
    image: postgres
    volumes:
      - .tmp/db:/var/lib/postgresql/data
    ports:
      - '5432'
  proxy:
    build: proxy
    restart: always
    ports:
      - '5000:80'
  api:
    build: api
    volumes:
      - ./api:/app
    depends_on:
      - db
  view:
    build: view
    volumes:
      - /app/node_modules
      - ./view:/app

代理服务Dockerfile

# proxy/Dockerfile

FROM nginx:1.15.8-alpine
COPY ./default.conf /etc/nginx/conf.d/default.conf

代理服务Default.conf

# proxy/default.conf

upstream view {
  server view:3000;
}

upstream api {
  server api:4000;
}

server {
  listen 80;

  location / {
    proxy_pass http://view;
  }

  location /api {
    rewrite /api/(.*) /$1 break;
    proxy_pass http://api;
  }
}

Nuxt App Dockerfile

# view/Dockerfile

FROM node:11.6.0-alpine as builder
WORKDIR '/app'
COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run generate

FROM nginx:1.15.8-alpine
EXPOSE 3000
COPY --from=builder /app/dist usr/share/nginx/html
COPY ./.nginx/default.conf etc/nginx/conf.d/default.conf

Nuxt App Nginx Default.conf

# view/.nginx/default.conf

server {
  listen 3000;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

可能有帮助的更多详细信息

当我尝试通过url(例如localhost:5000 / login)访问Nuxt应用程序中的特定页面时,Safari尝试将我重定向到我在代理服务default.conf上游块中定义的服务器名称。如上图所示。

因此localhost:5000 / login将重定向到view:3000 / login /

谢谢

在此先感谢任何尝试帮助我的人!

0 个答案:

没有答案