某商城前端架构总结与反思（nginx配置）邢毅彪5 Minutes2018年6月28日

前言

本篇博客主要介绍下多spa nginx配置（包括路由使用history模式时如何设置）。官方文档都讲到单spa部署时nginx设置，却忽略了多spa部署。

反向代理

开发时反向代理不在本次讨论范围内，无论vue-cli，angular-cli，create-react-app等官方脚手架都有文档介绍到开发时反向代理设置。本次讨论前后端分离项目中nginx反向代理配置。

# nginx.conf

http { 
#解决head丢失
	underscores_in_headers on;
	upstream api_server{
		server xxxxxxxx; # api服务器地址
	}
    server {
      location ^~ /api/ {
              proxy_pass http://api_server;
              proxy_set_header  Host             $host; 
              proxy_set_header  X-Real-IP        $remote_addr; 
              proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for; 
          }
    }
}

多spa配置已适应history模式路由

# nginx.conf
http {
	server{
      root www # 静态页面根目录

      # 此处以登录举例，其他同理
      location ^~ /login/ { 
              try_files $uri $uri/ /login/index.html; # 相对于root目录
          }
    }
}

总结与反思

此配置既从技术上实现了前后端分离与分开部署，又完美实现多spa项目部署且不用使用hash路由。
缺点：

1. 需要考虑404路由，这个在vue和angular都有官方文档可以参考

// vue实现
{
	path: '*',
    component: notFound // 或者重定向去别的页面可以根据实际需求
}

// angular实现
{
	path: '**',
    component: notFound // 或者重定向去别的页面可以根据实际需求
}