前后端分离 的单页应用部署问题？

Question

1. 创建一个前后端分离的单页应用该如何实现前端和后端文件的分开部署

2. 像利用vuejs或者react写的单页应用可以直接放到后端项目的静态文件下 一起部署吗。需要依赖nodejs吗？如果只是单纯的想vuejs写界面是不是部署的时候可以不适用nodejs环境！

希望知道的兄弟讲解下前后端分离的部署问题，单页应用的部署问题！（部署平台 windows）

Answer 1

所谓前后端分离，

• 暂且不谈Node中间层的情况，先说传统意义上的前后端，页面上使用API进行数据交互来进行分离时：

你写你的前端，使用webpack或者glup等打包编译工具进行编译。需要的数据使用API向后端拿。此时的部署是这样的：

1. 写好js、css等资源文件，编译打包（要确保在HTML里引用正确路径的资源文件）

2. 部署项目。

3. 用户访问某路由，由后端判断，选择正确的HTML作为response渲染出来

4. 所以实际上前端文件是依赖于后端跑的服务的

• 针对Node中间层，稍有一些不同：

我们把Node中间层包含在大前端领域，因此可以说它也属于前端范畴。此时的后端仅仅提供API。

也就是说，从前端页面上发出的Ajax，会由Node router接收，然后通过controller或者server，再次发出一个异步请求，向后端API请求数据。此时，如果只有前端部署，则只需要跑Node服务，由路由渲染HTML的活也是Node干的。

部署过程：

1. 编译前端资源文件

2. 部署Node

3. 如果后端接口不变，可以不需要部署

4. 在中间层的情况下，后端用什么语言什么环境都与前端无关

Answer 2

你说的单页面部署是什么意思？假如你使用vue的话，可以直接用官方的cli，这个工具build出来的东西可以直接当做static使用，跟后台是没有关系哒。你可以参照我之前写的一个小项目，github-explorer。前后端是完全分离的，中间的连接只是ajax接口。后台用什么都可以，当然如果你用nodejs和react的话，还可以用ssr解决部分seo的问题，但是建议你可以先从我那个项目看起。希望对你用。

Answer 3

nginx

root  打包好的静态文件目录;
index index.html;
location /api_root {
  proxy_pass api 服务的地址;
}