一个前端的nginx之旅

前段时间买了个服务器和域名，开始折腾服务器。安装了node和nginx作为服务器容器，对于nginx的使用有了基本的了解，于是写了这篇文章，希望对大家有帮助。

这是我的博客地址:Sesine Blog

安装及命令

下载及安装、配置方法

下载地址：http://nginx.org/en/download.html

Linux环境下可以用命令直接安装

Windows环境下通过下载压缩包,很迷你只有1.33MB，解压后双击nginx.exe就可以直接运行

本文使用环境为windows

常用命令

首先得打开cmd(快捷键Win + R)，cd命令进入nginx的安装目录

常用的命令：

• nginx -v 查看nginx版本

• nginx -t 验证配置文件是否正确，在启动或重启前建议执行此命令查看配置是否正确

• start nginx 启动nginx

• nginx -s stop 快速停止nginx

• nginx -s quit 完整有序停止nginx并保存相关信息推荐

• nginx -s reload 重新载入nginx

• nginx -s reopen 重新打开日志文件

nginx遵循了unix哲学的缄默原则，运行成功不会有提示，出现错误时才会有信息

配置方法

配置文件在conf目录下，其中nginx.conf为主配置文件
本文所有配置都请写在http {}块内

解决跨域问题

跨域应该是日常工作中最常见的问题了，本地测试环境与api服务器环境属于两个域。由于浏览器的同源策略，在本地测试环境上的浏览器无法请求不是同一个域的api服务器的接口。这时候使用nginx可以很方便的解决这个问题，上线时也无需切换域名。

同源策略具体如下：

URL	说明	是否允许通信
http://www.domain.com/a.js http://www.domain.com/b.js	同一域名下	允许
http://www.domain.com/lab/a.js http://www.domain.com/script/b.js	同一域名下不同文件夹	允许
http://www.domain.com:8000/a.js http://www.domain.com/b.js	同一域名，不同端口	不允许
http://www.domain.com/a.js https://www.domain.com/b.js	同一域名，不同协议	不允许
http://www.domain.com/a.js http://88.88.88.88/b.js	域名和域名对应ip	不允许
http://www.domain.com/a.js http://static.domain.com/b.js	主域相同，子域不同	不允许
http://www.domain.com/a.js http://domain.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.domain.io/a.js http://www.domain.com/b.js	不同域名	不允许

具体代码如下：

server {
  #使用80端口
  listen       80;
  server_name  localhost;
  location / {
    #设置允许跨域，"*"代表全部，可以设置成具体域名如"domain.com www.domain.com"（建议设置两个，domain.com和www.domain.com为两个域）
    add_header 'Access-Control-Allow-Origin' *;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET';
    #代理地址
    proxy_pass https://api.domain.com/;
  }
}

https配置

微信小程序强制要求所有请求都使用https协议，其实是因为App Store从17年开始强制要求使用https，现在很多主流网站比如BAT基本上都从http切换到了https，数据传输变得更加安全，而且可以有效避免运营商劫持（出现在网页中的运营商广告，移动的流量提示小球就是一个很好的例子）

https为什么安全，可以看一下这篇知乎提问，牟旭东同学回答的小和尚跟老和尚的故事挺有意思的。

哪里可以申请到免费的ssl证书？

• 阿里云
• 百度云
• 腾讯云

来自BAT大厂，值得信赖

server {
  #https默认使用443端口
  listen 443;
  #域名名称，可设置成localhost不限域名
  server_name www.domain.com domain.com;
  #根目录
  root "D:\www\";
  #索引文件
  index  index.html index.htm;
  #是否开启目录浏览
  autoindex  off;

  #开启ssl
  ssl on;
  #设置ssl证书地址
  ssl_certificate   D:/ssl/certificate.pem;
  ssl_certificate_key  D:/ssl/certificate.key;
  #session有效时间
  ssl_session_timeout 5m;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
  ssl_prefer_server_ciphers on;
}

错误页面配置

nginx-error

如上图，nginx的错误页面是很简(jian)洁(lou)的

可以添加配置来自定义错误页面，首先要在https {}块中添加fastcgi_intercept_errors on;

然后使用如下的配置，使用location重新设置根目录，会指向到nginx安装目录下的html文件夹，这样子可以整个服务器使用统一的错误页面

如果要定义不同的可以将location删除，那么/404.html表示网站根目录下的404.html文件（不建议放在根目录）

server {
  #404错误 找不到资源
  error_page 404 /404.html;
  location = /404.html {
      root   html;
  }

  #403错误 资源不可用
  error_page 403 /403.html;
  location = /403.html {
      root   html;
  }

  #50x错误 服务器内部错误
  error_page   500 502 503 504  /500.html;
  location = /500.html {
      root   html;
  }
}

禁止ip访问

直接ip访问的问题

• https证书警告，因为https的ssl证书是颁发给域名而不是ip地址的，在浏览器会出现不安全的警告

access-https-with-ip-error

• 访问统计数据不准确，由于一个ip可以绑定多个域名。如果直接用ip访问，统计访问很难定位准确的入口

• 域名使用的是动态ip，ip更换后会无法访问

• 法律限制，网站应该用域名访问，有些主机商会封未备案的服务器的80端口

那么如何防止ip直接访问呢？具体配置如下：

server {
  #设置为默认
  listen 80 default;
  listen 443 default;
  server_name _;
  
  #跳转至域名
  return https://domain.com;

  # 主站的ssl证书，https必须配置否则报错，http可以不添加以下三行
  ssl on;
  ssl_certificate   D:/ssl/certificate.pem;
  ssl_certificate_key  D:/ssl/certificate.key;
}