Nginx+Docker部署前端vue项目(Nginx配置)
刚开始能启动前端项目,接口也能正常返回200的code.但是接口老是报错We‘re sorry but xxxx doesn‘t work properly without JavaScript enabled网上搜了一下,结合自己分析。就是web项目Nginx配置有问题。大概的方向是没有配置vue项目中的反向代理地址原先的Nginx的default.conf文件内容是这样的server {lis
·
刚开始能启动前端项目,接口也能正常返回200的code.
但是接口老是报错
We‘re sorry but xxxx doesn‘t work properly without JavaScript enabled
网上搜了一下,结合自己分析。就是web项目Nginx配置有问题。
大概的方向是没有配置vue项目中的反向代理地址
原先的Nginx的default.conf文件内容是这样的
server {
listen 80;
server_name xxx.xxx.xxx.xx; # .........docker..................ip
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
error_page 405 =200 /index.html;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
由于我前端接口地址前缀是/dev-api开头,且没有配置proxy_pass地址,所以才会报上面的错误。修改成下面的配置解决了问题,就是添加了 location /dev-api后面的配置。
server {
# listen后面跟上监听的端口号
listen 80;
# 配置服务器的ip
server_name xxx.xxx.xxx.xx; # .........docker..................ip
location / {
# root是根路径的意思,nginx默认的文件路径是/urs/share/nginx/html/
root /usr/share/nginx/html/;
# 当前文件夹的文件格式
index index.html index.htm;
error_page 405 =200 /index.html;
# 是vue这样项目的加上这个,避免刷新旧地址错误
try_files $uri $uri/ @router;
}
# 跟上面路由是一起的 (vue项目必须)
location @router {
rewrite ^.*$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# 设置接口代理,适用vue项目中配置反向代理的情况,不需要不开
location /dev-api {
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Credentials true;
# 替换为自己的接口地址 http://xxxx.xx.xx.x:xxxx
proxy_pass http://xxx.xxx.xxx.xx:9090/workxxx;
}
}
这里面满足了基本的nginx配置(包括普通静态页面、vue需要打包的项目、子路径配置、接口代理避免跨域)
参考
Nginx 前端项目配置 包含二级目录和接口代理
https://www.cnblogs.com/YOUNGZZ/p/13456346.html
使用 Docker 构建前端应用
https://zhuanlan.zhihu.com/p/39241059
docker–部署vue项目
https://www.cnblogs.com/zouzou-busy/p/11838524.html
更多推荐
已为社区贡献2条内容
所有评论(0)