docker - 如何在 Docker 上为 Vue-router 配置 nginx
问题描述
我正在设置一个 docker 图像,nginx
以将 Vue 应用程序作为静态文件提供服务。我的 vue 应用程序使用 Vue-Router,它可以在其他服务器上完美运行。我的 nginx 配置是这样的:
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
现在我想迁移到 docker,这是我的Dockerfile
# 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
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 文件夹中,我确实看到了。
你有什么想法,还是我错过了什么?
解决方案
这就是我解决问题的方法。
# Add nginx config
COPY .docker/nginx/prod.conf /temp/prod.conf
RUN envsubst /app < /temp/prod.conf > /etc/nginx/conf.d/default.conf
推荐阅读
- ruby-on-rails - 在 Rails 5.1 中,如何为 has_many 和 belongs_to 关联编写查找器方法?
- fullcalendar - fullcalendar 插件无法在某些远程设备上呈现
- sql - 如何显示来自不同列的具有 twho 条件的一些记录
- javascript - 使用 ReactDOM.render 渲染元素时如何访问 redux 存储?
- python - Atom running Hydrogen Package - 没有可用的内省
- google-cloud-platform - Google Cloud SQL 维护时段
- java - 递归方法查找数字中出现的数量
- azure-active-directory - oAuth2.0 与 Microsoft flow(Power Automate) 然后访问受保护的 API
- sas - 在位置将变量拆分为两个变量
- python - 为什么即使没有类访问权限也会调用类中的语句?