博客

后面我们会一起做一个应用案例，包括 Flutter 移动端应用、Angular 前端案例等等。这需要一个真实的服务端应用，我打算用之前在 Nest.js 的课程里做的那个项目。先用几节课介绍如何在本地启动这个项目，项目的源代码管理的操作方法与基础流程，了解项目的开发工作流程，修复一些小 Bug ，最后再了解一下怎么把它部署到真实的生产环境上。

有了服务端基础以后，在做其它案例的时候，就可以根据需求，去实现需要的服务端功能。

正在制作中 ...

在《电商网站案例》里面，我们介绍了一套基于 WordPress 与 WooCommerce 搭建电商网站的方法。课程里面有一部分开发内容，主要是通过自定义 WordPress 的插件，在系统中集成了支付宝与微信支付。

搭建电商网站

如果你有东西要在网上销售，需要快速搭建一个独立的电商网站，WordPress + WooCommerce 是个不错的组合。WordPress 本身是一个内容管理系统，你可以通过它搭建一个内容发布平台。

WooCommerce 是用在 WordPress 系统上的一个电商插件，安装了这个插件的 WordPress 就会拥有电商功能了。WooCommerce 被 WordPress 的母公司 Automattic 收购了，所以它会持续得到支持。

今年承诺大家要基于 Flutter 框架，开发一个应用的案例课程。现在开始计划制作，大家可以提些建议，比如特别需要的功能，应用的想法等等。

去年我们发布了一套 Flutter 课程，介绍了这个框架的用法。它是 Google 推出的一个移动应用框架，可以用来创建跨平台的移动应用。

今年 Google 大会，展示出了 Flutter 的野心，它不仅想做移动应用，还要占领 Web 与桌面端。Flutter 框架被 Google 作为战略产品在国内推广，在我们同学中，有一位就来自 Google 中国办公室，他的工作就是推广这套框架在国内的使用。

案例的想法

案例我想还是以传达方法为主，一开始尽量保持简单，不加入复杂的东西，渐近增强，需要的时候再去寻找问题的解决方案。

Flutter 做的是应用的界面，应用的服务需要单独搭建，我打算用最近完结的《Nest.js 应用框架》课程里做的一个服务端应用，作为 Flutter 案例的服务端。

把前端应用相关的资源（js，css，html 文件）扔到一台安装了 Web 服务器的机器上，这其实就是前端应用部署了。原理是这么回事，但是实际的操作过程还是会涉及到很多东西。

下面介绍一个基本的部署前端应用的流程，整个过程都是手动的，为你提供一些思路，每个步骤都可以扩展与改进。部署指的就是把本地开发的应用交付给应用最终的用户去使用。现在我们开发的应用都会分离成客户端与服务端，所以部署也是要分开做的。前端应用就是客户端的一种，用户主要通过浏览器使用它。

我们部署的是一个基于 Angular 前端应用框架做的应用，对这个框架有兴趣可以订阅宁皓网，后面会推出 Angular 的相关课程，也可以参加 9 月初的前端训练营（Ng-Camp）。

Angular 又回来了，这款强悍的前端应用框架由 Google 内部团队开发维护，诞生的目的就是为了创建庞大复杂的前端应用程序。这次前端应用开发训练营的主角就是 Angular。

服务端应用就是在服务器上边儿运行的应用程序，服务端应用的主要作用就是为其它的应用提供各种服务，比如给前端、移动端、桌面端应用提供数据处理、身份验证等服务。前端、移动端这些端都可以统称为客户端，或者叫用户端，因为应用最终都是在这些端上被用户使用的。

如果你想独立完成一个完整的应用，你需要学会开发应用的服务端，也要开发应用的客户端。服务端应用可以给多种不同类型的客户端提供服务，也就是你的前端与移动端应用都可以使用同一个服务端应用提供的服务。

开发服务端应用有很多选择，可以使用不同类型的程序语言或应用框架。运行服务端应用的服务器上都要配置好一个运行环境，我们开发的应用会在这个环境上运行。有了正确的环境，应用才能正常运行。比如你打算用 JavaScript 语言创建服务端应用，你需要在服务器上安装一个 Node.js。

基本概念

客户端与服务端一般会通过请求与响应的方式进行沟通。客户端通过网络对服务端发出请求，服务端得到了请求，会做出对应的响应。比如用户在客户端上输入了用户名与密码，点击了登录按钮以后，会发出一个登录请求，服务器收到请求可以验证请求登录的用户，如果一切正常就让这个用户登录。

大卫走进老板的办公室，“麦克，我不想干了，我想出去创造点什么”。大卫有一头小卷发，说话有一点结巴，30 左右的样子，当时他在一家风投公司工作。男人在 25 - 30 岁之间都会有这么一次冲动，都想出去创造点什么。

麦克：你想出去干点啥呢，先跟我说说。大卫：我也不知道，有几个想法，不过还不确定。麦克：需要多少钱？大卫：25 万左右。麦克没作声，随手写了一张 50 万的支票，递给了大卫。“大卫，这里有 50 万，你回去好好想想到底要干点啥。”

大卫接过支票，走出老板的办公室，给他妈打了个电话。大卫妈：What？你老板是不是傻子，你没想法，没团队，什么都没有，他为什么要给你钱。大卫：妈，因为他相信你的儿子。其实大卫当时也有点害怕，他知道这种事情人生也只会发生这么一次。

大卫回家以后开始思考到底要创造点什么，思考项目的前景，是否可持续，是否能做大。后来一位朋友的话让他转变了思考的方向。朋友说：别扯那么多了，这么招，你就做一件事情，这件事情即使失败，你也不后悔做就行了。这句话点醒了他，最终确定要做跟教育相关的事情，这其实跟他童年的记忆也有点关系。

Gateway 是用@WebSocketGateway() 装饰的类。Gateway 的内部使用了 socket.io，不过你也可以使用其它的库，比如原生的 Web sockets。Gateway 就像是一个简单的 provider，你可以通过构造方法给它注入依赖，你也可以在其它的类里面注入使用 gateway 。

安装

先得安装需要的包：

npm install @nestjs/websockets @nestjs/platform-socket.io --save
npm install @types/socket.io --save-dev

预览

一般情况下，每个 gateway 监听的端口跟 HTTP 服务器用的端口一样，除非你的应用不是一个 Web 应用，或者你修改了端口。你可以给 @WebSocketGateway 装饰器提供一个参数，比如 @WebSocketGateway(80)，这里的 80 就是选择使用的端口。你还可以设置 gateway 使用的 namespace 。

应用都会在多种环境中运行，根据不同的环境，应用可能需要使用不同的配置。比如应用在本地与生产环境可能会使用不同的数据库配置信息。用 .env 文件可以实现。我们可以创建一个 ConfigModule  配置，里面有个 ConfigService 服务，用它加载配置的值。

安装

一些平台会自动把环境变量附加到 process.env 全局。不过在本地环境上我们得手工处理一下，解析环境变量文件可以使用 dotenv 这个包。

npm install dotenv --save
npm install @types/dotenv --save-dev

服务

先创建一个 ConfigService 类。

Serializer 提供了在返回响应之前的数据处理功能。比如像用户密码这种敏感数据不应该包含在响应里。一些属性可能需要转换一下。响应的实体数据可以只包含指定的属性，比如 id 还有 name。

Nest 提供的 ClassSerializerInterceptor 可以帮我们做这些事情，它用了 class-transformer 包提供的功能。ClassSerializerInterceptor 拿到方法返回的值以后会交给 class-transformer 包里提供的 classToPlain 方法。

排除属性

比如在实体里排除 password 属性：

import { Exclude } from 'class-transformer';

export class UserEntity {
  id: number;
  firstName: string;
  lastName: string;

  @Exclude()
  password: string;
}

使用：