【器】Nginx配置单页面应用

这是我参与更文挑战的第2天，活动详情查看： 更文挑战

本篇文章根据工程实践，介绍如何使用Nginx配置单页面应用。

1.问题

刚开始在nginx.conf静态资源映射的配置如下:

root /usr/share/nginx/html/appname/;
index index.html index.htm;

以上的配置能正常访问index.html,能点击顺序地进入其他页面。但是使用浏览器的browserHistory 和 refresh 页面会报404。

2.原因

因为我们部署的是单页面应用,目前主流的前端框架都是单页面的，例如React 和Vue。

单页面简单来说就是访问所有资源路径、其实页面内容只有一个（一般是index.html）。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件（可以理解为页面片段）进行逻辑处理和页面渲染。

所以我们直接访问某个页面资源（例如/usr/info），这个资源是不存在的，所以报服务端就会报404。

3.解决方案

root /usr/share/nginx/html/appname/;
index index.html index.htm;
location / {
         try_files $uri $uri/ /index.html;
}

原理是，当配置try_files找不到某个页面资源，这时，nginx会尝试加载index.html，加载index.html之后，react-router就能起作用并匹配我们输入的/home路由，从而显示正确的home页面。

4.完整配置

完整配置，仅供参考。

access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;
	server {
		listen 80;
		# gzip config
		gzip on;
		gzip_min_length 1k;
		gzip_comp_level 9;
		gzip_types text/plain text/css text/javascript application/json application/javascript              application/x-javascript application/xml;
		gzip_vary on;
		gzip_disable "MSIE [1-6]\.";
		root /usr/share/nginx/html/appname/;
		index index.html index.htm;

		location / {
                    try_files $uri $uri/ /index.html;
		}

         location ^~ /assets/ {
                	gzip_static on;
                	expires max;
                	add_header Cache-Control public;
         }	
		error_page 500 502 503 504 /500.html;
		client_max_body_size 20M;
         keepalive_timeout 10;
	}