精简流程

下载最新版 Nginx

由 What’s the difference between the “mainline” and “stable” branches of nginx? 这篇文章可知，尽量下载最新版的 mainline 版本，而不是 stable 版本。

测试运行

• 将 nginx 配置文件拷贝至新版 nginx 的 conf 目录下
• 在命令行中定位至 nginx 所在目录，执行 .\nginx.exe -t 测试配置文件是否可用
• 配置文件测试无误后，执行 start .\nginx.exe 启动 nginx，并查看 nginx 代理的页面是否可正常访问
• 页面检查完成后，执行 .\nginx.exe -s stop，停止 nginx 程序

NSSM 持久化运行

参考资料：run nginx as windows service

• 命令行中定位至 64 位 NSSM 程序所在目录
• 执行 .\nssm.exe install，会出现 NSSM 图形化安装界面
• Path 参数指向 nginx 最新版程序的位置，如 D:\Software\nginx-1.17.9\nginx.exe
• Startup directory 参数指向 nginx 所在文件夹，如 D:\Software\nginx-1.17.9
• I/O 标签下的 Input，设置为 start .\nginx.exe
• I/O 标签下的 Output 和 Error，设置为 nginx 访问成功和访问失败的日志文件，如 d:\Software\nginx-1.17.9\logs\access.log 和 d:\Software\nginx-1.17.9\logs\error.log
• 点击 Install service，安装服务，成功后会有提示
• 最后在命令行中再手动执行 .\nssm.exe start nginx，将 nginx 服务运行起来，然后访问 nginx 所代理的页面，如果正常显示，说明 nginx 服务已配置成功，done！

需求描述

vue-cli 打包后的页面，在用 IIS 代理的情况下，会随机出现页面请求无法到达服务器的情况。因为请求无法到达服务器，所以在日志中也看不出什么问题。

为了保证页面的可用性，只好临时安装配置上 Nginx，让 Nginx 代理页面，IIS 负责将请求转发给 Nginx。

方案调研

调研过程

查看 Nginx 官网的 Windows 安装程序版本，和其它系统的版本是一样的，那就可以放心使用了。

入选方案

• nginx: download：下载软件还是得去官网。

应用过程

Windows 下运行

• 启动程序： cd 至 exe 所在目录之后，执行 start .\nginx.exe 。一个新的命令行窗口会一闪而过，访问 localhost:80 能够显示 Nginx 相关页面，说明已经配置成功。
• 日志文件：在 exe 所在目录的 logs 子文件夹中，需要在配置文件中开启记录日志的选项。
• 重启程序： .\nginx.exe -s reload 。
• 测试配置文件是否有错误： .\nginx.exe -t 。

参考资料

• windows 下安装配置 Nginx 详解
• Nginx 教程一：在windows环境下的安装、配置、使用以及设置为windows服务自启动

Windows 下保活

• 需求：Nginx 进程在 Windows 服务器中经常会莫名其妙地消失，查看系统日志，也看不到程序异常退出的记录。要让它在后台稳定运行，就需要以服务的形式启动。
• Google：nginx auto start windows
• 推荐方案：run nginx as windows service，通过 NSSM 这款绿色软件，把 Nginx 配置为服务，让它随系统启动。

路径匹配不上的问题

服务器上有几个页面在 Nginx 及 IIS 中配置之后，通过域名访问总是有问题。后来直接访问 Nginx 代理的页面，发现同样有问题，这个时候才知道并不是 Nginx 没有匹配上路径，而是代码本身就不完善，后面还需要进一步调整。

参考资料

• Google：nginx location always match root path
• 第五个链接：Location directive not working，提到了使用 Nginx 时容易用错的地方
• Pitfalls and Common Mistakes | NGINX

打包版本不能附加路径

vue-router 开启了 history 模式时，就会有这个问题；如果不开启，就没有这个问题了。

vue-router 不开启 history 模式时，URL 中 # 后面的部分不会发往服务端，Nginx 官方文档也有说明，location 指令只能匹配 URL 中域名之后的第一个斜杠 / 与第一个问号 ? 或第一个井号 # 之间的部分。

vue-router 为组件设置路径为 path: '/msg/:msg?'，组件中通过 beforeRouteUpdate() 方法监听路由的变化。Nginx 中的代理如下设置：

location /msg/ {
  alias e:/upcweb/vue-router/dist/;
  try_files $uri $uri/ /index.html;
}

在浏览器中访问 http://localhost:9999/msg/ 时，会自动转为访问 http://localhost:9999/msg/#/ 这个页面，对应于上面项目的根组件。需要以 http://localhost:9999/msg/#/msg/123/ 这种形式，才能访问到指定组件设置的路径。

• Google：nginx location match special character
• how to match # character in a url in nginx through location directive：解释了上面提到的内容。

vue-router 开启了 history 模式之后，照着下面的方式配置过，访问 http://localhost:9999/msg/123/ 这样的路径都会匹配到 Nginx 中设置的 location /，而不是按照期望中的匹配到路由中的动态部分：

• Google：vue-router nginx 配置 -404
• vue webapp部署规范：已排除
• vue router history模式配置：未验证

• HTML5 History 模式
• [Help Needed] /app/ child path using nginx #518
• Set the baseUrl for the dev-server #546
• NGINX中的proxy_pass和rewrite

参考资料

• http://nginx.org/en/docs/http/ngx_http_core_module.html#location：已读
• http://nginx.org/en/docs/http/ngx_http_core_module.html#alias：已读
• Nginx multiple location issues
• Understanding Nginx Server and Location Block Selection Algorithms

要点总结

以列表形式记录本次需求实现过程中的要点：

• IIS 出了问题，就尝试 Nginx，千万不要在一棵树上吊死。
• 所访问的网址先是通过 IIS 重定向到 Nginx 定义的 location，然后 location 又对应具体的物理路径。最开始访问网址有问题，还以为是 Nginx 的配置没写对，后来直接访问 Nginx 定义的 location，才发现是 vue-router 相关的代码没写对，调试功力还是不够好啊，有待提升。