前端Nginx入门配置

作者: FConfidence | 来源:发表于2019-01-07 00:04 被阅读11次

前端Nginx入门配置
nginx启动vue打包后的静态页面配置
Nginx 入门到入门 (Mac)
服务器部署工具 - 收藏集 - 掘金
nginx入门、安装配置与使用详解
vue去除路径中的'#'
01-nginx前端方向代理
vue.js 与 php前后端分离服务器本地配置
angular2 构建项目并配置反向代理
Vue history模式 nginx 配置

Nginx 的优势
- 支持海量并发
- 内存消耗少
- 免费可以商用
- 配置文件简单

搭建本地虚拟机环境

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim

Nginx 源的安装

 [nginx]
 name=nginx repo
 baseurl=http://nginx.org/packages/centos/7/$basearch/
 gpgcheck=0
 enabled=1

新创建 yum 源: vim /etc/yum.repos.d/nginx.repo
查看安装位置 rpm -ql nginx

/etc/nginx/nginx.conf

 # 运行用户
 user  nginx;
 # 进程数, 一般跟CPU数一样, 有利于Nginx处理高并发
 worker_processes  1;

 # 错误日志存放位置
 error_log  /var/log/nginx/error.log warn;

 # nginx 存放pid位置
 pid        /var/run/nginx.pid;
 events {
     # 后台允许最大并发数量 一般设置上万
     worker_connections  1024;
 }

 http {
   # 文件扩展名与类型映射表
   include       /etc/nginx/mime.types;

   # 默认文件类型
   default_type  application/octet-stream;

   # 设置日志模式 名称为main
   log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                     '$status $body_bytes_sent "$http_referer" '
                     '"$http_user_agent" "$http_x_forwarded_for"';

   # 日志存放位置 和 启用的日志格式为上面标识的main
   access_log  /var/log/nginx/access.log  main;

   # 开启高速传输模式
   sendfile        on;

   # 减少网络报文的数量
   #tcp_nopush     on;

   # 保持连接的时间 (超时时间)
   keepalive_timeout  65;

   # 资源压缩
   #gzip  on;

   # 包含的子文件配置 (自定义配置项)
   include /etc/nginx/conf.d/*.conf;
 }

自配置项 /etc/nginx/conf.d/default.conf

 server {
   # 监听的端口
   listen       80;
   # 监听服务名
   server_name  localhost;

   #charset koi8-r;
   #access_log  /var/log/nginx/host.access.log  main;

   # 访问根路径的时候 请求资源路径
   location / {
     root   /usr/share/nginx/html;
     index  index.html index.htm;
   }

   #error_page  404              /404.html;

   # redirect server error pages to the static page /50x.html
   #
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
     root   /usr/share/nginx/html;
   }

   # proxy the PHP scripts to Apache listening on 127.0.0.1:80
   #
   #location ~ \.php$ {
   #   proxy_pass   http://127.0.0.1;
   #}

   # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
   #
   #location ~ \.php$ {
   #    root           html;
   #    fastcgi_pass   127.0.0.1:9000;
   #    fastcgi_index  index.php;
   #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
   #    include        fastcgi_params;
   #}

   # deny access to .htaccess files, if Apache's document root
   # concurs with nginx's one
   #
   #location ~ /\.ht {
   #    deny  all;
   #}
 }

服务开启 (各种命令)
- 虚拟机情况下先关闭防火墙: service iptables stop
- 开启服务: service nginx start
- 配置语法检查 nginx -t -c /etc/nginx/nginx.conf
- 配置重载 nginx -s reload -c /etc/nginx/nginx.conf
- CentOS 7.4 以上可以使用 nginx 直接启动
- ps aux | grep nginx
- 停止服务 nginx -s quit
- 立即停止 nginx -s stop
- nginx -s reload
- 或者 systemctl start nginx.service, systemctl restart nginx.service
- systemctl stop nginx.service
- 查看端口号开启情况 netstat -tlnp

自定义错误页和访问设置

多错误指向一个页面

# 在root配置目录下创建40x.html 加入内容
error_page 404 /40x.html;
# 亦可以404时指向外部链接
# error_page 404 htts://www.baidu.com/

location = /40x.html {
}

简单的访问控制

location / {
   root /urs/share/nginx/html;
   deny   222.20.38.207;
   ## deny all;
   ## allow  192.168.74.129; 只允许部分ip访问
   ## deny和allow上述两行顺序不一样的话, 先出现的会覆盖后出现的
}

精确匹配

location ~\.php$ {
   allow 192.168.74.129;
   deny all;
}
## 上面的配置表示只允许192.168.74.129进行访问，其他的IP是禁止访问的

Nginx 设置虚拟主机

虚拟主机是指在一台物理主机服务器上划分出多个磁盘空间，每个磁盘空间都是一个虚拟主机，每台虚拟主机都可以对外提供 Web 服务，并且互不干扰。

基于端口号配置虚拟主机

在 conf.d 下添加 server_8081.conf

server {
    listen       8081;
    server_name  localhost;
    root /opt/app/code;

    location / {
        index server_1.html;
    }

    error_page 404 /40x.html;
    location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

基于 ip 的虚拟主机 (在 server_8081.conf 文件中修改为)

server {
   listen 80;
   # 同样监听80端口,把server_name选项，配置成IP就可以
   server_name 192.168.74.130;
   root /opt/app/code;
   location / {
       index server_2.html;
   }
}

域名 Nginx 设置虚拟主机

需要在域名设置中将域名映射到自己购买的 ip

 # default.conf
 listen 80;
 server_name www.confidecnce.com;
 root /opt/app/code;
 location / {
     index server_1.html;
 }

 # server_2.conf
 listen 80;
 server_name nginx.confidecnce.com;
 root /opt/app/code;
 location / {
     index server_2.html;
 }

 # server_3.conf
 listen 80;
 server_name node.confidecnce.com;
 root /opt/app/code;
 location / {
     index server_3.html;
 }

Nginx 反向代理

代理就是在 Client 端和 Server 端之间增加一个提供特定功能的服务器

正向代理 (正向代理代理的对象是客户端, 客户端请求客户端, 为客户端服务的)

翻墙工具, 为客户端做代理, 简单来说就是你想访问目标服务器的权限，但是没有权限。这时候代理服务器有权限访问服务器，并且你有访问代理服务器的权限，这时候你就可以通过访问代理服务器，代理服务器访问真实服务器，把内容给你呈现出来。

反向代理 (反向代理代理的对象四服务端, 客户端请求服务端, 为服务端服务的)

为服务器做代理(可能代理到不同的服务器上), 反向代理跟代理正好相反（需要说明的是，现在基本所有的大型网站的页面都是用了反向代理），客户端发送的请求，想要访问 server 服务器上的内容。发送的内容被发送到代理服务器上，这个代理服务器再把请求发送到自己设置好的内部服务器上，而用户真实想获得的内容就在这些设置好的服务器上。

优势
- 提高了安全性(攻击的只是代理服务器)
- 功能性, 提供负载均衡
- 缓存功能, 减小服务器压力

## proxy_pass.conf

upstream con_test {
  server 192.168.74.129:8081;
  server 192.168.74.129:8082;
  server 192.168.74.129:8083;
}

proxy_cache_path /opt/app/cache levels=1:2 keys_zone=conf_cache:10m max_size=10g inactive=60m use_temp_path=off;

server {
  listen       8080;
  server_name  192.168.74.129:8080 static.confidence.test;
  sendfile on;
  access_log /var/log/nginx/static_test_access.log main;

  location / {
      # Nginx 缓存设置
      #proxy_cache conf_cache; # 要关闭的话 直接改成off 就可以禁止掉缓存
      proxy_cache off; # 要关闭的话 直接改成off 就可以禁止掉缓存
      proxy_pass http://con_test;
      proxy_cache_valid 200 304 12h; # 对于200和304设置12个小时过期
      proxy_cache_valid any 10m; # 非200 304的设置10分钟过期
      proxy_cache_key $host$uri$is_args$args;
      add_header Nginx-Cache "$upstream_cache_status";

      proxy_redirect default;

      # 将客户端请求转送给后台服务器之前 修改来自客户端的发送的头信息
      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;

      # 配置Nginx与后端代理服务器尝试建立连接的超时时间
      proxy_connect_timeout 30;
      # 配置Nginx向后端服务器组发出write请求后, 等待响应的超时时间
      proxy_send_timeout 60;
      # 配置Nginx向后端服务器组发出read请求后, 等待响应的超时时间
      proxy_read_timeout 60;
      proxy_buffer_size 32k;
      proxy_buffering on;
      proxy_buffers 4 128k;
      proxy_busy_buffers_size 256k;
      proxy_max_temp_file_size 256k;
      #if ($http_x_forwarded_for !~* "^192\.168\.74\.129") {
      #   return 403;
      #}
      #root /opt/app/code;
      #index index.html index.htm;
  }

  location /stat {
      stub_status;
  }

  ## 反向代理 将所有的请求 /text_proxy 请求跳转到 localhost:8080/lyt.jpeg
  location /test_proxy {
    proxy_pass http://localhost:8080/lyt.jpeg;
  }

  location ~ .*\.(jpg|jpeg|gif|png)$ {
    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml image/gif image/png image/jpeg;
    valid_referers none blocked 192.168.74.129;
    if ($invalid_referer) {
            return 403;
    }
    root /opt/app/code/images;
  }

  location ~ .*\.(html|htm)$ {
    add_header Access-Control-Allow-Origin http://www.confidence.test;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    expires 24h;
    root /opt/app/code;
  }

  location ~ .*\.(txt|xml)$ {
    # gzip on;
    # gzip_http_version 1.1;
    # gzip_comp_level 2;
    # gzip_types text/plain application/javascript application/x-javascript text/css application/xml image/gif image/png images/jpeg;
    root /opt/app/code/doc;
  }

  location ~ ^/download {
    gzip_static on;
    tcp_nopush on;
    root /opt/app/code;
  }
}

Nginx 适配 PC 或移动设备

server{
  listen 80;
  server_name nginx.confidence.com;
  location / {
    # 默认展示pc目录下 index.html
    root /opt/app/code/pc;

    # 通过用户代理系统应用, 如果是移动端系统展示移动端网页
    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
      root /opt/app/code/mobile;
    }
    index index.html;
  }
}

Nginx Gzip 压缩配置
- gzip : 该指令用于开启或关闭 gzip 模块。
- gzip_buffers : 设置系统获取几个单位的缓存用于存储 gzip 的压缩结果数据流。
- gzip_comp_level : gzip 压缩比，压缩级别是 1-9，1 的压缩级别最低，9 的压缩级别最高。压缩级别越高压缩率越大，压缩时间越长。
- gzip_disable : 可以通过该指令对一些特定的 User-Agent 不使用压缩功能。
- gzip_min_length:设置允许压缩的页面最小字节数，页面字节数从相应消息头的 Content-length 中进行获取。
- gzip_http_version：识别 HTTP 协议版本，其值可以是 1.1.或 1.0.
- gzip_proxied : 用于设置启用或禁用从代理服务器上收到相应内容 gzip 压缩。
- gzip_vary : 用于在响应消息头中添加 Vary：Accept-Encoding,使代理服务器根据请求头中的 Accept-Encoding 识别是否启用 gzip 压缩。
```
location ~ .*\.(jpg|jpeg|gif|png)$ {
  # 开启gzip (关闭是 off)
  gzip on;
  # 识别 HTTP 协议版本
  gzip_http_version 1.1;
  # gzip 压缩比(1~9) 压缩级别越大, 时间消耗越长
  gzip_comp_level 2;
  # 压缩文件类型
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml image/gif image/png image/jpeg;
  valid_referers none blocked 192.168.74.129;
  if ($invalid_referer) {
    return 403;
  }
  root /opt/app/code/images;
}
```

前端Nginx入门配置
Nginx 的优势支持海量并发内存消耗少免费可以商用配置文件简单搭建本地虚拟机环境yum -y install ...
nginx启动vue打包后的静态页面配置
nginx配置前端服务详情参考该文章 Centeros安装常用工具Git、Nginx、并配置前端nginx代理[...
Nginx 入门到入门 (Mac)
nginx 安装入门 Nginx 通过 Homebrew 安装 Nginx 配置路径信息启动Nginx服务成功...
服务器部署工具 - 收藏集 - 掘金
nginx 基本入门 - 前端 - 掘金作者：villainthr 本文属于翻译文章，原文链接为 nginx Be...
nginx入门、安装配置与使用详解
nginx入门、安装配置与使用详解本文内容： 1. nginx 简介 2. nginx 安装配置 3. ngin...
vue去除路径中的'#'
前端：服务端： nginx 配置文件增加：修改完成重启nginx即可
01-nginx前端方向代理
前端反向代理 1.下载nginx 2. 配置nginx.conf反向代理
vue.js 与 php前后端分离服务器本地配置
本地host: nginx配置开启前端： npm installnpm run dev
angular2 构建项目并配置反向代理
部署前端angular项目时遇到的问题有以下：使用nginx 配置反向代理使用nginx配置负载均衡使用ng...
Vue history模式 nginx 配置
一、前端查看publicPath路径二：Nginx web api 接口配置