不可避免地会出现以下概念，希望在阅读前能理解：

angular6 的打包和初始化

基础的nodejs编程

前言

为何要部署前端服务器？

分离前后端

要知晓这个概念，首先就要区别出前后端的概念。
在传统的web应用开发中，大多数会将浏览器作为区别前后端的标准：为用户展示界面的部分称为前端，为界面提供数据或提供业务逻辑服务的称为后端。

而在传统单体应用开发模式中，所有的页面都和后端代码放在一个项目中，部署时也是整个项目部署，前端开发人员甚至还要掌握一些后端开发的知识才能输出代码。
为了让前后端分工更加明确，更好的各司其职，从长远来看，前后端分离也是一个必然的趋势和结果。

解耦代码

code-repo
在传统的单体应用开发模式中，所有的代码都放在同一个项目中，不能单独运行，这个时候的项目是前后端未分离的。

半分离
前后端共在一个项目，共用一个代码库，但是分别建立前端和后端的工程；
前端不用关心后端代码是怎么写的，后端也不用担心前端代码是什么样的，但整个项目不能单独运行，需要后端和前端进行交互。
完全分离
前后端分别建立项目，代码库相互独立；
前端能独立开发，依靠 mock程序或测试构造一个伪后端运行
后端也能独立开发，编写有详细的测试用例，保证API的可用性，并做好详细的接口文档，使其跟前端能够顺利集成。

解耦部署

在部署单体应用中，整个项目打包上服务器即可运行，这个时候的项目是前后端未分离的。

部署半分离的前后端项目也是一样，发布整个项目即可。

完全分离前后端后，前后端可单独部署，本章结即是讲解部署前端项目部分。

⚠️ 前后端分离总体提升了部署和开发的复杂程度，对于小项目来说是过度设计，导致开发效率更低。

分离提升性能瓶颈

有时候前端的流量和后端不在一个量级上，分离前后端可以使前后端采用不同的架构设计，使系统更加强大。

一些大厂的解决方案比如阿里云的控制台管理系统，部署时就采用反向代理服务器，把获取页面的请求路由到前端服务器，接口请求路由到后端服务器。

你甚至可以在http response 的 header 里看到所使用的反向代理服务器的名称。

为何要选择koa作为前端服务器？

Koa 是一个基于 nodejs 平台的下一代 web 开发框架，相对最初火热的 Express 框架来说充分利用async 等一套优雅的方法，摒弃了”难看”的多层callback嵌套，能够快速而愉快地编写服务端应用程序。

而nodejs平台本身就具有着独特的异步、非阻塞I/O的特点，这也就意味着他特别适合I/O密集型操作，在处理并发量比较大的请求上能力比较强。
此外，现代web开发框架（angular,vue,react）都基本上利用nodejs平台搭建前端项目，使用nodejs能无缝集成前端项目；
前端项目打包生成静态文件后，直接运行nodejs程序，利用其高I/O向客户端提供静态文件，nodejs确实是一个不错的选择。

部署前端服务器

运行环境介绍

服务器系统：centerOS 7 （64位）
本地环境： windows 10 （64位）
连接工具：MobaXterm

我的服务器是在阿里云买的ECS，购买的时候直接选了centerOS 7，服务器上必须安装nodejs运行环境，如何安装在这里不做赘述。
安装完 nodejs 后用 npm 全局安装 pm2（一个nodejs程序托管系统），输入命令行npm install -g pm2即可。

前端项目介绍

项目采用angular+koa搭建的一个前端项目：
directory-tree

dist/spa-server是我们前端项目打包后的静态文件，展示网站主要就是输出这些文件。
src 是前端项目的源代码
koa-app.js 是运行前端服务器的脚本

先使用的angular cli生成前端项目脚手架，再使用npm i koa koa-static koa-router安装运行koa的依赖库。

在项目根目录添加运行服务器的脚本 koa-app.js
添加以下基本代码:

const koa = require("koa");
const router = require("koa-router")();
const static = require('koa-static'); 
const app = new koa();

const path = require('path');
const fs = require('fs');

var staticFileFolder = path.join(__dirname,"dist","spa-server");
var indexPath = path.join(staticFileFolder,"index.html");
/******************************
 * Set Static File
 * 设置静态文件后访问该文件路径 会直接返回不会走下一个中间件
 *****************************/
app.use(static(
  staticFileFolder
));

/******************************
 * logger
 *
 *****************************/
app.use(async (ctx, next) => {
  await next();
  console.log(`${ctx.method} : ${ctx.url} - ${hResponse}`);
});

/******************************
 * Routes
 * 
 *****************************/
 // 读取 index.html 的文件内容
const indexPage = fs.readFileSync(indexPath).toString();

router.get('*', async (ctx, next) => {
  ctx.response.body = indexPage;
}); 
app.use(router.middleware())



// 监听端口，启动服务器
app.listen(80);

上面的代码在路由部分做了特殊的处理，因为使用angular6搭建的网页为单页面应用程序(SPA)，路由部分是由前端来处理的。
这种特性使得服务器要对请求的路径做出特殊响应：所有访问页面的路径都默认返回index.html的内容，然后交由前端的js来解析路径生成页面。可参考angular官网说明

首先要在本地能够运行服务器，在项目根目录输入node koa-app.js运行服务器脚本。访问浏览器，页面如下:
page
本地运行可以正常访问的话，接下来就可以正式部署到服务器上了。

部署到服务器

精简上传文件

传输到服务器上运行的文件不必像本地开发一样，只需保留必须的文件即可，最终精简如下：
page

www 是我们前端项目打包后的静态文件

由于静态文件的文件夹的名称和路径都变了, koa-app.js 中需修改相应代码

1
2
3

var staticFileFolder = path.join(__dirname,"dist","spa-server"); 
// 改为如下:
var staticFileFolder = path.join(__dirname,"www");

deploys.json 这个新增的文件用来引导 pm2的运行，基本内容为:

{
  "apps": [
    {
      "name": "deploy-test1",
      "script": "./koa-app.js",
      "env": {
        "COMMON_VARIABLE": "true"
      },
      "env_production": {
        "NODE_ENV": "production"
      }
    }
  ]
}

name 是托管到pm2上的程序名称
script 是程序的路径

package.json 是nodejs程序的工程信息，随着项目初始化新建。包括我们程序的依赖项都在该处配置：

{
  "name": "publish",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.5.2",
    "koa-router": "^7.4.0",
    "koa-static": "^5.0.0"
  }
}