vue项目部署至nginx&踩坑记

1.  前言

        在本地吭哧吭哧的写了两个星期，终于到了需要部署到服务器供测试的时候了！！

        初始的设想是部署到tomcat，放在ROOT目录下，即可以使用 域名:端口/ 访问，但是涉及到后台请求跨域了，百度+咨询前同事，得出了结论：通过nginx反向代理，实现请求路径映射到目标后台服务器；

        此外，nginx本身可以作为静态资源文件服务器，还可以省去tomcat，岂不一举两得！

2. 安装nginx

 一、Windows安装

我本地有的时候还是需要一个服务器来跑，所以就配了一个Windows的环境，windows的配置环境还是相对简单很多的；

1. 下载nginx：http://nginx.org/en/download.html

2. 解压；

3. nginx解压后的目录，文件如下：

4. 因为nginx是绿色版，解压即可使用，测试nginx是否安装成功：

    命令行进入nginx解压后的文件夹，start nginx 启动nginx;

   

   打开浏览器输入 http://localhost/  能看到nginx的欢迎界面则表示nginx启动成功了；

   切记不要直接双击nginx.exe运行，因为会导致nginx无法正常关闭，只能通过任务管理器杀掉进程；

5. nginx的常用命令：

// cd到nginx所在目录，启动nginx
start nginx 

// 修改配置后重新加载生效
nginx -s reload

// 重新打开日志文件
nginx -s reopen

// 测试nginx配置文件是否正确
nginx -t -c /path/to/nginx.conf

// 快速停止nginx
nginx -s stop

// 完整有序的停止nginx
nginx -s quit

 

二、Linux安装

linux系统：redhat2

1. 检查系统有没有安装pcre、openssl、zlib；

    这三个库是安装nginx必须的，不然在安装的时候会报错；

    nginx的gzip模块需要zlib库，rewrite模块需要pcre库，ssl模块需要openssl库

rpm -q pcre
rpm -q openssl
rpm -q zlib

   如有没有安装的话需要先安装，安装步骤比较简单，大致是 下载 tar.gz包 —> 解压 —> cd文件夹 —> ./configure —> make & make install

 2. 安装nginx

（1）下载安装包：http://nginx.org/en/download.html

（2）解压文件夹，cd进入解压后的文件夹；

（3）编译安装（安装目录/usr/local/nginx/）

./configure --prefix=/usr/local/nginx

（4）测试是否安装成功

cd  /usr/local/nginx/sbin
./nginx -t

显示如下则表示安装成功：

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

（5） 启动nginx

方法一： 

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

方法二：

cd /usr/local/nginx/sbin
./nginx

（6）停止

pkill -9 nginx

  (7) 刷新配置

./nginx -s reload

 

3. vue部署至nginx&实现跨域

Windows和Linux的配置文件是一模一样的，这里以Linux为例：

这里讲解两种情况怎么配置：

一、部署在根目录下

1. dist文件拷贝到nginx安装目录，proj是我新建的文件夹，专门用来放需要部署的静态资源项目；

     

2. 打开nginx.conf，进行如下配置

在前后端分离的情境下，向后台请求的时候免不了会出现跨域的问题，如果不作任何配置的话，后台请求都是异常的，Chrome会报“服务器找不到”的错误。

nginx解决问题的关键在于利用了反向代理，拦截指定的路径，映射到后台服务器；

location 路径匹配符有很多，精确匹配、忽略大小写、正则表达式等，有需要可以网上查找，相关文章非常之多……

我使用的是空匹配符，表示拦截指定字符串开头的路径；

我的项目中后台使用了微服务，所以不同模块有不同的后台地址；

二、部署在非根目录下

当需要在一个nginx下部署多个项目的时候，配置稍稍有些改动，这里以打包后 项目的地址为：http:// IP:18080/budget/ 为例；

1. 修改vue项目，设置webpack build的时候 publicPath为 /budget/，按照vue-cli的标准模板，修改 config/index.js

build: {
    ……

    assetsPublicPath: '/budget/'

    ……
}

 webpack.prod.config.js

修改router的base属性为：

2. nginx.conf配置：

或者root配置到location里面：

以上~~

4. 踩坑

这里说一个我在windows和Linux配置的时候发现的一个区别，也就是这个区别让我遇到了一个500的问题；

在配置文件可以发现我有一个后台接口为：/sysConfig/.......

同时我有一个路由是：/sysconfig/.....

然后我刷新路由为 /sysconfig/......的所有页面，nginx会报500的错误，即服务器的错误。

思考了良久，突然意识到可能是nginx忽略了大小写，所以刷新/sysconfig/......的界面，按照路径拦截，会请求到后台服务器，所以肯定会报错。

在测试之后发现，Windows的nginx配置中是大小写不敏感的，Linux下是敏感的，所以在linux下刷新是正常的；

花了不少时间在这个问题上，引以为戒呀~~~