nginx服务器部署dist文件夹

Posted 2020-12-18 衍射

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