一个前端的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 不同域名 不允许

具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
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大厂,值得信赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
#https默认使用443端口
listen 443;
#域名名称,可设置成localhost不限域名
server_name www.domain.com domain.com;
#根目录
root /Volumes/Space/www;
#索引文件
index index.html index.htm;
#是否开启目录浏览
autoindex off;

#开启ssl
ssl on;
#设置ssl证书地址
ssl_certificate /Volumes/Space/www/ssl/certificate.pem;
ssl_certificate_key /Volumes/Space/www/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文件(不建议放在根目录)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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直接访问呢?具体配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}
Donate for coffee ☕️