本文主要讲述如何配置本地Nginx开发环境，重点讲述其对https支持的配置。
起源
近期在做网页加载速度优化，准备上Service Worker提升加载速度并支持offline模式。期间准备做出Demo展示。故需要在本地搭建Nginx环境并支持https。这里做一个记录。
安装
Mac上面Nginx的安装很简单，如果已经安装有homebrew包管理工具，只需一行命令：
brew install nginx
如果还没有，不要犹豫了，尽快安装吧。依旧是一行命令：
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Nginx基本命令
nginx -s stop # 快速关闭
nginx -s quit # 关闭
nginx -s reload # 重新加载配置文件
nginx -s reopen # 重新打开log
配置 && 启动
安装好了以后，nginx服务默认已经启动，然而我们并不知道服务的端口、位置。
全局搜索配置文件：
sudo find / -name nginx.conf
发现位于如下位置:
/usr/local/etc/nginx/nginx.conf
打开，进行编辑
修改了http下面的server项。将root修改为绝对路径/www/，并注意到，server监听的端口为8080。
server {
listen 8080;
server_name localhost;
root /www/;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
此时创建目录/www/，将其所有者修改为当前用户(可选)，并在该目录下添加index.html文件，添加少许内容，打开http://127.0.0.1:8080即可浏览
cd / # 进入根目录
sudo mkdir www #创建www目录
sudo chown [user-name] /www/ #将www目录所有者更改为当前用户
cd /www #进入www目录
touch index.html #创建index.html
echo ABCD > index.html #在index.html中输入ABCD
运行结果如下：
此时，我们已经成功的启动了一个nginx静态服务器。可以在其目录下添加任何内容，并在本地8080端口访问。
证书及https配置
需要创建一个简单的证书用以支持本地https服务。可按照如下命令进行：
cd /usr/local/etc/nginx # 进入希望生成证书和私钥的目录，这里我们选择nginx.conf所在目录
openssl genrsa -des3 -out server.key 1024 # 创建服务器私钥，该命令会让你输入一个口令
openssl req -new -key server.key -out server.csr # 创建签名请求的证书(CSR)
cp server.key server.key.org
openssl rsa -in server.key.org -out server.key # 在加载SSL支持的Nginx并使用上述私钥时除去必须的口令
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt # 最后标记证书使用上述私钥和CSR
然后修改nginx.conf文件中HTTPS server 一段如下：
# HTTPS server
#
server {
listen 443 ssl;
server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
ssl_certificate server.crt;
ssl_certificate_key server.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
location / {
root /www/;
index index.html index.htm;
}
}
重启Nginx
nginx -s reload
如果遇到如下错误，请使用sudo重启Nginx。
nginx: [emerg] bind() to 0.0.0.0:443 failed (13: Permission denied)
此时可以通过https://127.0.0.1/访问，效果如下：
Mac Chrome添加启动参数
由于Chrome安全限制，非认证证书，依旧当做不安全处理，不支持Service Worker。所以我们为Chrome添加启动参数--ignore-certificate-errors，来跳过安全检查。在win下这件事很简单，只需要右键->属性在快捷方式后面添加，mac下则略嫌麻烦。
cd /Applications/Google\ Chrome.app/Contents/MacOS/ # 进入Chrome.app目录
sudo mv Google\ Chrome Google.real # 备份/重命名原启动脚本
sudo printf '#!/bin/bash\ncd "/Applications/Google Chrome.app/Contents/MacOS"\n"/Applications/Google Chrome.app/Contents/MacOS/Google.real" --ignore-certificate-errors "$@"\n' > Google\ Chrome # 使用管道操作创建新的启动脚本，加入所需启动参数
sudo chmod u+x Google\ Chrome # 给新的脚本增加运行权限。
题外话，还可以通过添加--enable-internal-flash来启用内置Flash插件。
此时重启Chrome，已经可以绕过安全检查，支持当前非官方证书下的Service Worker了。
Service Worker初步
这里只简单记录下配置HTTPS后，Service Worker成功支持的情况。更多关于Service Worker的内容，还需要进一步实践、整理。
将Service Worker 项目Service-Worker-Offiline拉到\www目录下即可。
git clone https://github.com/deanhume/Service-Worker-Offline.git # 将git项目拷贝到本地
mv Service-Worker-Offline/* . # 将内容移动到www目录下
rm -rf Service-Worker-Offline/ # 删除项目
访问https://127.0.0.1/，可以看到，Network Request已经是从Service Worker中获取了。
勾选Offline，可以看到，页面依旧可以加载。该项目作者为了验证，在offline状态下使用了不同的页面。我们在实际开发工作中，可以跟做需求选择offline状态下页面的样式，可以与online状态保持一致。
参考
