nginx服务器部署dist文件夹

Table of Contents generated with DocToc

一、tomcat部署的问题
二、centos服务器安装nginx
三、nginx配置
- 3.1 将dist文件夹上传到服务器
- 3.2 配置nginx.conf
- 3.3 启动nginx

最近因为项目需要，我要把vue-cli打包后的dist文件夹部署到阿里云服务器，这个真的整了我很久很久。。。从最开始使用 tomcat 服务器部署，到后面使用 nginx 服务器部署。

一、tomcat部署的问题

我把dist文件夹中的内容放到 tomcat/webapps/ROOT下：

然后运行tomcat，发现静态文件是没有问题的，但是请求后端接口的时候报404错：

在网上找了很多办法，有不少人遇到这个问题，但是基本都没有详细的解决方案，后面看到有博客说可以试试用nginx反向代理的方式，然后才有了后续解决办法。

二、centos服务器安装nginx

centos7服务器使用命令安装环境：

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

nginx下载地址：http://nginx.org/download/nginx-1.14.2.tar.gz

然后解压到对应目录：

tar -zxvf nginx-1.14.2.tar.gz进入nginx文件夹，执行如下命令：
./configure
（网上也有说：./configure --prefix=/usr/local/nginx【安装目录】），但是我这里prefix报错了然后：
make
make install

基本安装就完成了【目录结构如下】：

三、nginx配置

3.1 将dist文件夹上传到服务器

我将dist文件夹放到/home/dist

3.2 配置nginx.conf

    server {listen       8083;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root /home/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;  //解决刷新页面变成404问题的代码}location /api{rewrite  ^/api/(.*)$ /$1 break;proxy_pass http://localhost:8091;}}

listen：表示监听端口8083

location：dist文件夹放置的位置

/api：因为vue前端代理的时候，用的是api做名字，所以我们要在此处配置后端api端口：

//vue代理
proxyTable: {'/api': {target: 'http://localhost:8091',pathRewrite: {'^/api': ''}}},

至此上述配置已完成。

3.3 启动nginx

定位到/home/nginx-1.14.2/objs文件夹下，可以看到里面的结构为：

nginx文件即为启动文件，我们有如下基础命令可以使用：

命令	作用
`./nginx -c /home/nginx-1.14.2/conf/nginx.conf`	启动nginx【携带配置文件】
`./nginx -s reload`	当配置文件更改时，可以使用此命令重启nginx
`ps -ef\|grep nginx2`	查看当前nginx进程

我们使用启动命令即可即可

之后便可以在对应ip的8083端口号访问了