Nginx项目部署

无处安放的波澜
466 阅读4分钟

Nginx项目部署

Nginx介绍

Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐。

  1. 下载nginx

    nginx 下载地址：nginx.org/en/download… 下载后直接解压，cmd 进入到解压目录运行 start nginx 即可启动

  2. 控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，出现如下界面则表示安装成功。默认监听80端口号。

  3. 常用的命令

    （1）start nginx 开启nginx服务

    （2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息

    （3）nginx.exe -s quit 关闭nginx服务，完整有序的停止nginx，并保存相关信息

    (4) nginx.exe -s reload 重载nginx服务，当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx

  4. 打包项目

    npm run build

  5. 将dist文件夹里面的内容拷贝到nginx里面html文件夹

  6. 启动nginx访问http://127.0.0.1就可以默认访问到登录页面

  7. nginx.conf文件配置

    配置反向代理

    location /apis/ {
    rewrite ^.+apis/?(.*)$ /$1 break;
    proxy_pass http://127.0.0.1:3000;
    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;
}

    rewrite就是将请求地址中的apis默认替换为/

    proxy_pass配置代理的路径，也就说后端项目的路径

    proxy_redirect配置代理重定向

    proxy_set_header用来重定义发往后端服务器的请求头

  8. 请求404的问题

    我们在使用路由的时候，默认配置的是history模式。这可能导致你在页面刷新会出现404，在vue-route里面给我已经写好了配置

    router.vuejs.org/zh/guide/es…

    找到nginx配置

    location / {
  try_files $uri $uri/ /index.html;
}

    将这项配置加入到nginx中

    location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

React项目打包部署

  1. 执行打包命令

    npm run build

  2. 将dist文件夹下面的内容放在nginx配置html文件夹下面

  3. 打开nginx.conf文件，配置一下信息

    location / {
    root   html;
    index  index.html index.htm;
    # 解决路由跳转问题
    try_files $uri /index.html;
}

    其中为了解决BrowerRouter页面刷新404的问题，我们需要加上

    # 解决路由跳转问题
try_files $uri /index.html;

    来源为：react-guide.github.io/react-route…

  4. 配置反向代理

    # 在nginx里面配置代理，通过nginx来代理发送请求访问 后端服务器
location /apis/ {
    rewrite ^.+apis/?(.*)$ /$1 break;
    proxy_pass http://127.0.0.1:4000;
    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;
}

    当然我们需要注意的是所有的请求都必须以apis开头，这样才能检测到请求类型

开启gzip配置

GZIP是若干文件压缩程序的简称,HTTP1.1协议定义的两种压缩方法中最常用的一种压缩方法，客户端浏览器大都支持这种压缩格式。

在不设置gzip情况下，我们访问服务器资源，返回的大小比如是10M

开启了gzip过后，返回的数据资源只有2M，一般来说压缩之后的数据量大概是原始数据的1/4，

gzip on;  
gzip_min_length 1k;   
#gzip_disable "msie6";

# gzip_vary on;
# gzip_proxied any;
gzip_comp_level 4; 
gzip_buffers 4 16k;  
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
  • gzip on|off:开启或者关闭gzip模块
  • gzip_static on|off:nginx对于静态文件的处理模块,该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗
  • gzip_min_length:默认值: 0 ，不管页面多大都压缩,设置允许压缩的页面最小字节数,建议设置成大于1k的字节数，小于1k可能会越压越大。 即: gzip_min_length 1024
  • gzip_comp_level:等级1-9 9最小的压缩,传输最快 但是消耗cpu
  • gzip_buffers:设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流, 例如 4 4k 代表以4k为单位，按照原始数据大小以4k为单位的4倍申请内存。 4 8k 代表以8k为单位，按照原始数据大小以8k为单位的4倍申请内存。
  • gzip_http_version:http的版本
  • gzip_types: gzip_types text/html (默认不对js/css文件进行压缩)压缩类型，匹配MIME类型进行压缩

缓存设置

在路由组件里面，我们点击路由切花，每次都会重新发一次请求给服务器，当然你可以使用路由缓存来完成优化，也可以在nginx里面配置缓存内容，这样就可以直接从浏览器本地缓存里面拿数据

location /api {
    proxy_pass   http://192.168.0.0:80;

    #expires作用于http, server, location。 可以控制HTTP应答中的“Expires”和“Cache-Control”的头标（起到控制页面缓存的作用）。
    #如果expires为-1s，即永远过期，则reponse header为Cache-Control: no-cache， 当expires为正值，则header为Cache-Control: max-age = #
    expires  1d;      
}

location ~.*\.css$ {
    expires 1d;
    break;
}
location ~.*\.js$ {
    expires 1d;
    break;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
    access_log off;
    expires 15d;    #保存15天
    break;
}

mdn 里面，缓存是能对 get请求生效，而对post不生效。

防盗链

防止第三方引用链接访问我们的图片，消耗服务器资源和网络流量，我们可以在服务器上做防盗链限制。

实现防盗链的方式有两种：refer方式和签名方式。

refer方式实现防盗链,nginx模块ngx_http_referer_module通常用于阻挡来源非法的域名请求.我们应该牢记,伪装Referer头部是非常简单的事情，所以这个模块只能用于阻止大部分非法请求

location ~* \.(gif|jpg|png)$ {
    # 只允许 192.168.0.1 请求资源
    valid_referers none blocked 192.168.0.1;
    if ($invalid_referer) {
       # rewrite ^/ http://$host/logo.png;
       return 403;
    }
}

valid_referers: 指定资源访问是通过以下几种方式为合法，即白名单。 none：允许缺失的头部访问。 blocked：允许referer没有对应值的请求。 server_names：若referer站点域名与server_name中本机配的域名一样允许访问。

配置了防盗链后，可以运行在浏览器直接访问，但是通过外部网站链接来访问是无法实现的。

avatar
文章
阅读
粉丝