前言
前一阵子用nginx分担了我网站由tomcat处理的的http服务，本文就跟大家分享下我的实战过程，以及如何从0开始用nginx来访问你的前端项目，欢迎各位感兴趣的开发者阅读本文。
写在前面
我开源项目[1]的第三方登录模块用到了localStorage来获取用户的授权结果，前几天有个网友反馈说他从我文章的链接中点进去没法登录。
经过一番排查后，我发现我在文章中留的链接是https://kaisir.cn/chat-system[2]，而第三方鉴权回调设置的链接是https://www.kaisir.cn/chat-system[3]。由于我域名解析那里配置了@访问与www访问指向的都是同一个网站，因此两者访问界面相同。但是回调地址中有www，请求授权的访问界面没有www，出现了跨域问题。
跨域后，localStorage里的东西自然是不一样的，因此就出现了这个网友所说的问题。
解决办法
既然两者访问的都是同一个服务器上的资源，那么我们就可以在服务端配置重定向，当请求的地址没有携带www时，我们就给他重定向到带www的地址。
于是我搜了一波使用tomcat配置未携带www的网站自动添加www，看了一眼方案，比较麻烦，不想折腾。
使用nginx解决这个问题
经过一番搜索后，我发现使用nginx解决这个问题比较简单，于是我花了一点时间学了下nginx，完美解决了这个问题。
注意：本文不介绍如何安装nginx，对此不了解的开发者，请移步nginx官网[4]进行学习。
移除tomcat的配置
首先我们先把tomact已配置好的一些http服务移除掉，此处要删除的有：http访问跳转https、域名证书、静态资源。
注意：如果你没有使用tomcat可以跳过此章节, 直接学习nginx的相关配置。
关闭https访问，删除域名证书
我们打开tomcat的conf目录下的server.xml，找到Service标签里port为80的Connector标签，删除标签内的redirectPort属性，如下图所示。
注意：你还需要修改port的值，将其改为任意一个非80的值，因为nginx需要使用80端口号。
随后，继续找port为443的Connector标签，将其删除，如下图所示。
最后，删除你目录下后缀为jks的域名文件即可。
删除静态资源
打开tomcat的webapps目录将你的静态资源(前端项目)删掉即可。
关闭http强跳https
我们打开tomcat的conf目录下的web.xml文件，找到login-config标签和security-constraint的内容，将其删除，如下所示：
- <!--开启http强制跳转https访问-->
- <login-config>
- <!-- Authorization setting for SSL -->
- <auth-method>CLIENT-CERT</auth-method>
- <realm-name>Client Cert Users-only Area</realm-name>
- </login-config>
- <security-constraint>
- <!-- Authorization setting for SSL -->
- <web-resource-collection>
- <web-resource-name>SSL</web-resource-name>
- <url-pattern>/*</url-pattern>
- </web-resource-collection>
- <user-data-constraint>
- <transport-guarantee>CONFIDENTIAL</transport-guarantee>
- </user-data-constraint>
- </security-constraint>
配置nginx
接下来，我们来配置nginx，让它来全面接管客户端的http请求，反向代理tomcat提供的服务，成功与tomcat完成配合。
配置虚拟主机
首先，我们需要先把虚拟主机配置好，它的作用就是模块化管理你的所有服务器资源，避免全部都一股脑的写入nginx的主配置文件，从而导致的可维护性降低问题。
我们打开nginx的conf目录，在其目录下找到virtualhost.conf的文件(如果没有则需要手动创建)，该文件的作用就是将所有的服务器配置引入进来进行统一管理，打开文件后，我们写入如下所示的内容：
- # VirtualHost Configuration.
- # 默认存在的，如果不存在可以不理
- include vhosts/localhost.vhost;
- # 我们新加的
- include vhosts/kaisir.cn;
在上面的配置文件中，我们新加了一个kaisir.cn的配置，我们需要在vhosts目录下创建这个文件，这个目录也是在conf目录中的(如果没有就自己创建)，我们直接创建这个文件即可。
注意：创建的文件不能包含后缀名，如果你有多个应用则在此处创建，然后在virtualhost.conf文件中使用include指令进行引入即可。
随后，我们打开conf目录下的nginx.conf文件，把刚才创建的virtualhost.conf文件引入进去，我们找到http标签，在标签内部添加如下所示的内容：
- # ...其他内容省略...
- http {
- # 引入服务配置文件
- include virtualhost.conf;
- }
做完上述操作后，我们就可以愉快的编辑我们在vhosts目录下创建的文件了。
服务器配置文件
在上述配置中，我们在vhosts目录下创建的文件就是我们的服务器配置文件了，http访问的相关配置都是在此文件中进行写入。
配置端口监听
我们打开前面创建的kaisir.cn文件，写入如下所示的内容：
- server {
- listen 80;
- listen 443 ssl;
- }
上述配置中：
- server 为本文件的根指令，本章节后面所有的配置都是写在这个这个指令里面的
- listen 监听80端口(即普通http的访问)
- listen 监听443端口以及ssl访问(即https的访问)
配置ssl证书
我们写入如下所示的代码用来配置https访问时所需的ssl证书文件：
- # 配置ssl证书
- ssl_certificate /Users/likai/nginx-website/conf/kaisir.cn/1_kaisir.cn_bundle.crt;
- ssl_certificate_key /Users/likai/nginx-website/conf/kaisir.cn/2_kaisir.cn.key;
- ssl_session_timeout 5m;
- ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
- ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
- ssl_prefer_server_ciphers on;
上述配置中，我们主要修改2个部分的配置：
- ssl_certificate 你域名的ssl证书文件位置(文件类型一定为crt格式的)
- ssl_certificate_key 你域名证书所对应的密钥文件 (文件类型一定为key格式的)
注意：ssl证书需要去你域名的注册商那里下载
配置网站访问路径
接下来，我们来配置下每个访问路径所指向的静态资源(前端项目)，我们会用location指令来配置一条路径的访问，如下所示，我们配置了域名的根目录指向(即/的含义)，指令内部分别指定了静态资源在硬盘中的路径以及默认的首页文件。
- # 根路径
- location / {
- # 项目路径
- root /Users/likai/nginx-website/kasir.cn;
- # 默认首页文件
- index index.html index.htm;
- }
配置完根目录后，我们再来看下子目录的相关访问配置，如下所示：
- location /chat-system {
- # 项目路径
- alias /Users/likai/nginx-website/chat-system/;
- # 默认首页文件
- index index.html index.htm;
- # 解决网页刷新404
- try_files $uri $uri/ /chat-system/index.html;
- }
通过观察上述配置后，我们发现的不同点如下：
- alias 配置子目录时，我们使用了alias来指向项目
- try_files 这里是解决vue项目启用history模式后，网页刷新404问题
注意：如果你的vue项目是用Vue CLI搭建的，那么就需要修改vue.config.js中的publicPath属性值为:process.env.NODE_ENV === "development" ? "./" : "/chat-system"。"/chat-system"即为生产环境的访问路径，就是我们刚才在location指令行所配置的。如果此处配置错误的话，你打包后的vue项目在浏览器访问将使一片空白??
最后，在路由配置文件中，传入参数：createWebHistory(process.env.BASE_URL)。
具体代码请移步提交记录：build: 启用路由的history模式[5]
自定义错误页
在浏览器访问一个不存在的页面或者服务器内部发生错误时，我们可能需要对其进行处理，此时我们就需要用到error_page指令，如下所示：
- # 自定义404与500页面，指向下面的location
- error_page 404 500 /404.html;
- # 自定义404页面
- location /404.html {
- alias /Users/likai/nginx-website/404-page/;
- # 默认首页文件
- index index.html index.htm;
- }
注意：配置了error_page后，一定要配置location来指向你要访问的静态项目。
反向代理tomcat提供的服务
我们需要在location指令内部使用proxy_pass来代理tomcat提供的服务，配置如下所示：
- # 反向代理Java接口，多路径采用正则表达式匹配
- location ~ ^/(api|uploads|download|other)/ {
- proxy_pass http://127.0.0.1:8080;
- proxy_set_header Host $host;
- proxy_set_header X-Real-IP $remote_addr;
- proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
- }
注意：location指令中使用正则进行了接口前缀地址的匹配，此处匹配的是/api/*、/uploads/*、/download/*、/other/*
如果你的tomcat还提供了websocket服务，那么还需要单独配一条location指令，用来代理，配置如下所示：
- # 反向代理websocket请求
- location /websocket {
- proxy_pass http://127.0.0.1:8080/websocket/;
- proxy_http_version 1.1;
- proxy_set_header Upgrade $http_upgrade;
- proxy_set_header Connection "upgrade";
- }
如果你没有使用Java来做服务端，而是使用python、php、c#等语言做的，也可以使用proxy_pass来做反向代理。
重定向未携带www的请求
最后，我们来解决下本文开头所说的问题，在nginx中解决这个问题非常简单，我们只需要判断下请求地址中是否包含www即可，如果不包含则301重定向到带www的地址即可，配置如下所示：
- # 主机名称，哪个写在前面，默认就跳转哪个
- server_name www.kaisir.cn kaisir.cn;
- # 请求网址中不包含www, 则重定向到携带www的https地址
- if ($http_host !~ "^www.kaisir.cn$") {
- return 301 https://$server_name$request_uri;
- }
配置完成后，我们打开浏览器访问kaisir.cn[6]来验证下是否达到了我们的预期，如下图所示，完美解决??
注意：上述配置中，我们使用正则表达式对url进行了一波匹配，其中server_name指令的作用是如果访问地址中包含此处所写的东西，就会触发执行这里的配置。
此配置还会将你的http请求默认重定向到https。
完整的配置文件
本章节完整的配置文件内容如下所示：
- server {
- listen 80;
- listen 443 ssl;
- # 主机名称，哪个写在前面，默认就跳转哪个
- server_name www.kaisir.cn kaisir.cn;
- # 请求网址中不包含www, 则重定向到携带www的https地址
- if ($http_host !~ "^www.kaisir.cn$") {
- return 301 https://$server_name$request_uri;
- }
- error_page 497 https://$server_name$request_uri;
- # 自定义404与500页面，指向下面的location
- error_page 404 500 /404.html;
- # 配置ssl证书
- ssl_certificate /Users/likai/nginx-website/conf/kaisir.cn/1_kaisir.cn_bundle.crt;
- ssl_certificate_key /Users/likai/nginx-website/conf/kaisir.cn/2_kaisir.cn.key;
- ssl_session_timeout 5m;
- ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
- ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
- ssl_prefer_server_ciphers on;
- # 引用虚拟配置文件
- include vhosts/_nginx.vhost.fpm;
- # 根路径
- location / {
- # 项目路径
- root /Users/likai/nginx-website/kasir.cn;
- # 默认首页文件
- index index.html index.htm;
- }
- location /chat-system {
- # 项目路径
- alias /Users/likai/nginx-website/chat-system/;
- # 默认首页文件
- index index.html index.htm;
- # 解决网页刷新404
- try_files $uri $uri/ /chat-system/index.html;
- }
- # 自定义404页面
- location /404.html {
- alias /Users/likai/nginx-website/404-page/;
- # 默认首页文件
- index index.html index.htm;
- }
- # 反向代理Java接口，多路径采用正则表达式匹配
- location ~ ^/(api|uploads|download|other)/ {
- proxy_pass http://127.0.0.1:8080;
- proxy_set_header Host $host;
- proxy_set_header X-Real-IP $remote_addr;
- proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
- }
- # 反向代理websocket请求
- location /websocket {
- proxy_pass http://127.0.0.1:8080/websocket/;
- proxy_http_version 1.1;
- proxy_set_header Upgrade $http_upgrade;
- proxy_set_header Connection "upgrade";
- }
- }
nginx配置文件
接下来，我们来看下nginx的配置文件，做一些小优化。本章节的所有配置都是在nginx.conf文件中完成，本章节提到的所有配置文件均指nginx.conf。
最大连接数
最大连接数也可以成为并发数，即同一时刻最多支持多少个客户端接入，在配置文件中加入如下所示的配置：
- events {
- # 允许的连接数
- worker_connections 20000;
- }
开启gzip
gzip压缩可以节省我们的带宽资源，提升网站的加载速度。它的开启方式也很简单，在配置文件的http指令内添加，如下所示：
- http {
- # 开启gzip
- gzip on;
- # 允许压缩的最小字节数
- gzip_min_length 10;
- # IE浏览器1-6版本禁用gzip
- gzip_disable "MSIE [1-6].";
- # 启用gzip的文件类型
- gzip_types text/plain application/x-javascript text/css text/javascript application/xml;
- }
配置日志
日志可以用来记录每个客户端的访问时间、ip、浏览器等信息，对我们后续的网站维护带来帮助，在配置文件的http指令内添加如下所示的配置：
- # 设置日志格式,添加客户端真实ip等信息
- format chatSystemLogFormat '$http_x forwarded_for - $remote_user [$time_local]'
- '"$request" $status $body_bytes_sent'
- '"$http_referer" "$http_user_agent"';
- # 访问日志文件存放路径
- ss_log /Users/likai/nginx-website/logs-chat-system/access.log chatSystemLogFormat buffer=32k;
配置文件上传大小
如果你的网站提供了文件上传服务，那么文件的大小限制除了在你的服务端项目中配置外，还需要在nginx中配置。
同样的，在配置文件的http指令内添加如下所示的配置：
- # 客户端可以上传的文件大小
- client_max_body_size 100m;
完整的配置文件
完整的配置如下所示：
- user likai staff;
- worker_processes 8;
- error_log /Applications/MxSrvs/logs/errors_nginx.log;
- #error_log logs/error.log notice;
- #error_log logs/error.log info;
- #pid logs/nginx.pid;
- events {
- # 允许的连接数
- worker_connections 20000;
- }
- http {
- # gzip匹配类型配置文件
- include mime.types;
- default_type application/octet-stream;
- # 客户端可以上传的文件大小
- client_max_body_size 100m;
- # 开启gzip
- gzip on;
- # 允许压缩的最小字节数
- gzip_min_length 10;
- # IE浏览器1-6版本禁用gzip
- gzip_disable "MSIE [1-6].";
- # 启用gzip的文件类型
- gzip_types text/plain application/x-javascript text/css text/javascript application/xml;
- # 设置日志格式,添加客户端真实ip等信息
- log_format chatSystemLogFormat '$http_x forwarded_for - $remote_user [$time_local]'
- '"$request" $status $body_bytes_sent'
- '"$http_referer" "$http_user_agent"';
- # 访问日志文件存放路径
- access_log /Users/likai/nginx-website/logs-chat-system/access.log chatSystemLogFormat buffer=32k;
- # 引入服务配置文件
- include virtualhost.conf;
- sendfile on;
- keepalive_timeout 65;
- }
参考资料
[1]开源项目: https://kaisir.cn/chat-system
[2]https://kaisir.cn/chat-system: https://kaisir.cn/chat-system
[3]https://www.kaisir.cn/chat-system: https://www.kaisir.cn/chat-system
[4]nginx官网: https://www.nginx.com/resources/wiki/start/topics/tutorials/install/
[5]build: 启用路由的history模式: https://github.com/likaia/chat-system/commit/e7c55a714f2610a87a5c87d5864bc4c342a298b0
[6]kaisir.cn: http://kaisir.cn
[7]个人网站: https://www.kaisir.cn/
