vue.js - 访问特定页面时的 NGINX 404(Azure 应用服务)
问题描述
从我的 web 应用程序访问特定路由时,我遇到 404 错误。
这是我的 Dockerfile:
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf
这是我的 nginx.conf:
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /app;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
该应用程序是可访问的,并且路线导航工作正常。
但是,当我尝试直接访问某个页面时……比如说https://example.org/privacy
……它返回 404。
我一直在玩配置,但没有任何成功。你能告诉我有什么问题吗?
PS:我在历史模式下使用vue路由。
解决方案
我已经使用这种方法在Azure、GitHub 存储库中部署了 Vue.js。
NGINX 配置:
server {
listen 0.0.0.0:80;
listen [::]:80;
default_type application/octet-stream;
gzip on;
gzip_comp_level 6;
gzip_vary on;
gzip_min_length 1000;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_buffers 16 8k;
client_max_body_size 256M;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
请使用这个Dockerfile
。
##### 01- Build app
FROM node:lts-alpine as node
LABEL author="Waqas Dilawar"
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
##### 02- Run NGINX using build from step 01
FROM nginx:alpine
VOLUME /var/cache/nginx
COPY --from=node /app/dist /usr/share/nginx/html
COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf
# docker build -t nginx-vue .
# docker run -p 8080:80 nginx-vue
推荐阅读
- javascript - 我们如何在 highcharts 中使条形宽度动态化?
- macos - 如何编写苹果脚本代码来自动化日常小任务?
- wordpress - 如何在发布日期下添加类别元?
- excel - 行公式并在声明的(z)变量中捕获该输出值
- python-3.x - Python,再次调用时导入随机数不显示新的随机数
- python - 如何用 2 条线绘制一个图,让一条线从 python 中 X 轴的值 n 开始?
- java - 如何为用户禁用按钮,直到 editText 处于活动状态?
- tapestry - 持久注释仅适用于值 Strategy Client 。挂毯应用
- python - OpenCV(4.1.1) 找不到起始编号(以文件名):(camera_stream_Url) 在函数 'cv::icvExtractPattern'""
- mysql - 使用此查询选择其他列