如何在Docker上为Vue-router配置Nginx

How to config nginx for Vue-router on Docker

我正在从nginx设置一个docker映像，以将Vue应用用作静态文件。
我的vue应用程序使用Vue-Router，并且可以在其他服务器上完美运行。
我的nginx配置是这样的：
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

现在我想迁移到docker，这是我的Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

# production stage
FROM nginx:1.15.8-alpine as production-stage
COPY docker/nginx/prod.conf /etc/nginx/nginx.conf/prod.conf # [*]
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

这是docker/nginx/prod.conf

1
2
3
4
5
6
7
8
9
10

server {
listen 80;
server_name _ default_server;

root /usr/share/nginx/html;

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

它适用于主页，例如：http://192.168.1.10，但在其他URL上获得了404，例如http://192.168.1.10/settings

prod.conf已复制到nginx文件夹，我确实看到了。

您有任何想法，还是我想念什么？

这就是我解决问题的方式。

1
2
3

# Add nginx config
COPY .docker/nginx/prod.conf /temp/prod.conf
RUN envsubst /app < /temp/prod.conf > /etc/nginx/conf.d/default.conf