nginx服务器部署dist文件夹

Table of Contents generated with DocToc

• 1、tomcat部署的问题
• 2、centos服务器安装nginx
• 3、nginx配置
  • 3.1 将dist文件夹上传到服务器
  • 3.2 配置nginx.conf
  • 3.3 启动nginx

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

1、tomcat部署的问题

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

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

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

2、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

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

3、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;
        }
        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端口号访问了