问题1，如何正确将打包后的vue项目在nginx中部署

vue前端项目打包之后，静态资源就只有也给index.html文件一些js/css资源文件，部署的时候，可以直接将打包好的静态资源放到Nginx的html目录下去访问，但是如果我们将资源放到html/demo目录下，然后配置过滤路径之后去访问，会发现和在开发环境中访问的效果不同。在开发环境中，可以直接输入路由地址，但是部署到nginx之后，必须是http:/ip:port/demo/index.html才行，然后后面再去跟路由的时候，发现页面不能按照预期的方式渲染和输出，总是找不到对应的页面。这主要是Nginx里的配置不正确导致的。

如下给一个可用的配置

server {listen       8013;limit_conn perip 10;limit_rate 1024k;#charset koi8-r;access_log  logs/access_8013.log  main;location  /portal {root   html/smartdata;index  index.html index.htm;try_files $uri $uri/ /portal/$args;   if ($request_filename ~* .*\.(?:js|css|svg|png|jpg)$){expires      7d;}}
}

静态资源的路劲是 html/smartdata/portal，如下所示：

按照这种方式配置，实际上就是匹配url中的portal，然后到html/smartdata目录下去找portal这个文件，显然是没有这个文件，然后到portal目录下去找对应index.html。这块关于index的指令可以参考这篇博文，写的还是很好的。

问题2，绝对路径下的打包资源部署

通过webpack打包的前端工程，在打包时候，资源的请求可以是相对路径也可以是绝对路径，通过配置打包时候的参数可以控制。一般情况下，我们都配置成相对路径，这样可以直接使用上面那种方式去部署，可以重新规划静态资源的位置。如果采用绝对路径打包的静态资源，要么只能放到html根目录下，要么就只能对 /进行拦截转发。

最近在做datart的集成，发现datart前端打包之后，资源都是绝对路径，因为dataRT的官方部署是前后端在一块部署的，静态资源作为后端项目的一部分进行部署，但是因为项目的需要，我们必须分开部署，这时就发现dataRT部署在Nginx中不行。苦于没有更强大的技术实力做改造，所以只能想起他办法，最后通过拦截/来配置dataRt，也可以满足预期，一个可用的Nginx配置如下:

  server {listen       8013;limit_conn perip 10;limit_rate 1024k;#charset koi8-r;access_log  logs/access_8013.log  main;location / {root html/smartdata/datart;index index.html index.html;try_files $uri $uri/ /$args;   if ($request_filename ~* .*\.(?:html|js|css|svg|png|jpg)$){expires      7d;}}location  /portal {root   html/smartdata;index  index.html index.htm;try_files $uri $uri/ /portal/$args;   if ($request_filename ~* .*\.(?:js|css|svg|png|jpg)$){expires      7d;}}
}

这样所有http://ip:port/portal/*的请求都到portal，其余的都会被dataRt拦截掉。

可以仔细看下上面的server配置，不难发现，只要不是/portal的请求，最后都是请求到datart的index.html中，并且做正确的路由渲染。这就意味着对于dataRT来说，根基目录就是index.html。

但是dataRT有一个分享的功能，分享出去的url地址统一是：http://ip:port/shareDashboard/xxx，而shareDashboard对应到DataRT实际上是一个shareDashboard.html文件，也就是和index.html统计的文件，这就意味着，dataRT的入口不止一个index.html。按照如上的配置就发现，不管怎样分享的外链都是404，因为index.html中没有关于分享外链的路由处理。这怎么办?

一开始尝试修改index指令，添加一个shareDashboard.html，但是发现根本不行。

然后尝试再新增一个location /shareDashboard，但是发现也不行，因为这会将shareDashboard作为一个路由路径到index.html中去访问，但实际上根本没有。

最后的解决办法是在增加一个转发，配置如下:

server {listen       8013;limit_conn perip 10;limit_rate 1024k;#charset koi8-r;access_log  logs/access_8013.log  main;location / {root html/smartdata/datart;index index.html index.html;try_files $uri $uri/ /$args;   if ($request_filename ~* .*\.(?:html|js|css|svg|png|jpg)$){expires      7d;}}location  /portal {root   html/smartdata;index  index.html index.htm;try_files $uri $uri/ /portal/$args;   if ($request_filename ~* .*\.(?:js|css|svg|png|jpg)$){expires      7d;}}location /shareDashboard/{proxy_pass http://192.168.10.148:8014;}}server {listen       8014;limit_conn perip 10;limit_rate 1024k;#charset koi8-r;access_log  logs/access_8013.log  main;location / {root html/smartdata/datart;index shareDashboard.html shareDashboard.html;try_files $uri $uri/ /$args;   if ($request_filename ~* .*\.(?:html|js|css|svg|png|jpg)$){expires      7d;}}
}

问题解决。。。。

绝对路径打包前端资源在Nginx中代理配置相关推荐

http响应Last-Modified和ETag以及Apache和Nginx中的配置
基础知识 1) 什么是"Last-Modified"? 在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属 ...
正向代理和Nginx反向代理配置介绍
正向代理和Nginx反向代理配置介绍 * Author QiuRiMangCao 秋日芒草* 正向代理(代理对象是pc) 是一个位于客户端(pc)和原始服务器(google.com)之间的服务器场景 ...
nginx反向代理配置及优化
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://liuyu.blog.51cto.com/183345/166381 nginx反 ...
nginx反向代理配置解决不同域名默认页面不同问题
nginx反向代理配置解决不同域名默认页面不同问题背景设计思路步骤背景需求:使用同一个项目(http://localhost:8080/thzhdj)映射两个域名(test1.com,tes ...
Nginx反向代理配置详解
Nginx反向代理配置详解 Nginx简单的反向代理配置,包括配置文件中各项参数的的注释,好了,开始! 开始首先安装Nginx 一.建立用户和用户组 1 2 ./usr/sbin/groupadd w ...
nginx反向代理配置 1
nginx反向代理配置 0x00前言代理是在内部应用程序和外部客户端之间的服务器,将客户端请求转发到相应的服务器.Nginx 的反向代理服务器是代理服务器位于私有网络的防火墙后面,将客户端请求发送到 ...
LNMP详解（七）——Nginx反向代理配置实战
今天继续给大家介绍Linux运维的相关知识,本文主要内容是Nginx反向代理配置实战. 一.系统架构简介在生产环境中,我们有时需要使用Nginx做反向代理功能,其架构如下所示: 在上图中,所有的外界 ...
Linux服务器上最简单的Nginx反向代理配置
2019独角兽企业重金招聘Python工程师标准>>> Nginx不但是一款高性能的Web服务器,也是高性能的反向代理服务器.简单的可以理解为直接让当前的访问地址跳转到其他的网站上去 ...
nginx正向代理配置
nginx正向代理配置一.前言# 正向代理功能比较简单,但是原生nginx不支持https代理,如果访问https网站,会报错. # nginx代理不支持http CONNECT方法: curl: ...

绝对路径打包前端资源在Nginx中代理配置

问题1，如何正确将打包后的vue项目在nginx中部署

问题2，绝对路径下的打包资源部署

绝对路径打包前端资源在Nginx中代理配置相关推荐

最新文章

热门文章