Nginx+Vue作为静态资源服务器配置及使用

前言：做一个有梦想的程序猿！

前言

最近项目用的前后端分离架构，后端用的SSM，前端用的Vue，但是在访问网站中发现首页一些地图及图表插件加载渲染异常缓慢，因为首页布局东西比较多，之前也对无用的js文件做过处理，但是效果还是不理想，后来就想到使用Nginx来做代理，毕竟Nginx在静态文件处理上是非常专业的，只用node.js作为逻辑服务器就好了，经过部署测试，首页加载的速度远远快于之前的速度。

Nginx是一个功能非常强大的web服务器加反向代理服务器，同时又是邮件服务器等等，在项目使用中，使用最多的三个核心功能是反向代理、负载均衡和静态服务器，这里主要介绍作为静态资源服务器的使用及配置。

编译安装Nginx

1. 下载nginx安装包
   wget http://nginx.org/download/nginx-1.8.0.tar.gz；
2. 解压
   进入目录进行解压：tar -zxvf nginx-1.8.0.tar.gz，
3. 安装依赖
   进入解压后的nginx目录：cd nginx-1.8.0
   执行命令：

yum install -y pcre pcre-devel openssl openssl-devel gcc gcc gcc-c++ ncurses-devel perl

4. 编译前配置
   为了能使nginx支持SSL,指定默认的启动用户

./configure --prefix=/usr/local/nginx --user=root --group=root–with-http_stub_status_module --with-http_ssl_module

5. 编译安装
   执行命令: make 后执行: make install

Nginx相关命令

启动nginx
service nginx start
停止nginx
service nginx stop
重启nginx
service nginx restart
重新加载nginx配置文件
service nginx reload

nginx主要相关目录

nginx目录
/usr/local/nginx
nginx服务器初始配置文件
/usr/local/nginx/nginx.conf
自定义服务器配置目录，这个目录手动创建，存放nginx配置文件，便于后期维护
/usr/local/nginx/conf.d
默认日志目录
/var/log/nginx

Nginx配置文件

1. 在本地编写好服务器配置文件iot.conf

server {
    # 监听的端口
    listen       8081;
    # 匹配的域名，由于本项目用ip访问的，所以这个注释掉也没问题
    server_name  10.12.2.53;

    # 输出的日志
    #charset koi8-r;
    access_log  /var/log/nginx/iot.access.log  main;
    # /url路径下代理到的地址，这里代理到静态html文件
    location / {
        # root 网站的根目录，前端项目部署的文件根目录
        root   /home/iot/html;
        # index 网站的入口文件
        index  index.html index.htm;
        # add_header 'Access-Control-Allow-Origin' '*';
    }
    # /iot/后的url路径下代理到的地址，这里代理到后端接口服务器
    location ^~ /iot/ {
        proxy_pass http://10.12.2.60:9999;
        proxy_redirect     off;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        #client_max_body_size 100m;
    }  
    error_page  404              /404.html;
}

2. 然后将iot.conf这个配置文件上传到/usr/local/nginx/conf.d这个目录下
3. 进入nginx初始配置文件将 iot.conf 文件引进来，vi /usr/local/nginx/conf/nginx.conf ，在文件末尾添加：

     #导入外部服务器配置文件存放地址
    include /usr/local/nginx/conf.d/*.conf;
    }

保存退出
4. 重新加载nginx配置文件或者重启nginx服务都行
service nginx reload
或
service nginx restart

部署前端Vue项目

本地打包编译前端代码并上传到nginx中 iot.conf配置的目录： /home/iot/html，步骤如下：

1. vue前端项目执行命令
   npm run build
   打包编译出来的代码在dist文件夹下面
2. 压缩编译出来的代码成dist.tar.gz/dist.zip
   如果centos服务器没有/home/iot/html这个目录，则需要创建一下目录
3. 将压缩文件上传到/home/iot/html这个目录下并解压
   cd /home/iot/html
   tar -xzvf dist.tar.gz 或 unzip dist.zip
4. 解压完成之后，即可输入ip地址访问前端项目

可能出现的问题

如果部署完成，浏览器访问，nginx提示403，查看/var/log/nginx/error.log路径下的日志，发现报错Permission denied，则是当前启动nginx的用户没有权限操作这些文件导致的
修改nginx默认配置文件，把启动用户改成root即可，nginx默认启动用户是nginx,当然，你也可以创建个新的用户来管理nginx。
vi /usr/local/nginx/conf/nginx.conf
找到user nginx;
改成 user root;
保存，重启nginx服务即可
service nginx restart

最后，如果本篇文章对您有所帮助，可以评论或点赞支持一下哦，感谢感谢！