部署 Angular 前端应用到生产环境的基本流程（基于 Docker）

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

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

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

这个应用的服务端是在刚刚发布完的《Nest.js》（第一季已完结）系列课程里一起做的。我只用了这个服务端应用里的注册用户与登录接口。主要是演示如何给这个服务端应用搭配一套前端的用户界面，还有就是了解一下把前后端应用部署到生产环境上。

应用演示地址：https://ng-camp.ninghao.co

工具

VSCode，Angular CLI，终端，Git，Github，Docker，Docker Compose，SSH，阿里云 ECS 服务器。

基本流程

本地运行 ng build --prod 构建好适合生产环境的应用。
准备一台远程服务器。
配置域名 DNS，让一个主机名指向远程服务器。
在服务器上配置好 Nginx。
将构建好的 Angular 应用上传到服务器的指定位置。

Angular 框架自带一套非常强大的命令行工具，可以用它快速地创建项目，生成项目需要的各种部件，运行本地开发服务，打包构建生产环境应用等等。

用 Angular CLI 构建一个适合在生产环境上运行的版本（ng build --prod），生成的应用就是一些 html，css，js 文件，还有应用里需要的一些静态的资源，比如字体、图片等等。把这些东西放在一个 Web 服务器里其实就算完成了部署。

前端应用一般不需要在服务器上做特别处理，它会运行在用户的浏览器上。也就是用户通过浏览器请求访问（使用）我们的前端应用，浏览器会请求应用的服务器，下载应用（html，css，js）还有相关的资源。这样用户就可以通过浏览器使用我们的应用了。

所以，服务器在这里的主要作用就是托管应用以及相关的资源，当浏览器需要这些东西的时候，就把这些东西交给浏览器。

在一台服务器上，安装一个 Web 服务器，比如 Nginx。配置好一个 Nginx 主机，主机的根目录就是 Angular 应用所在的目录，这里面应该包含 index.html ，比如你配置的 Nginx 主机的名字是 ng-camp.ninghao.co，在域名的管理界面，配置好，让 ng-camp.ninghao.co 指向服务器的 IP 地址，访问它的时候，浏览器会把 Angular 应用的 index.html 以及它相关的资源下载到本地运行。

在下面截图里，dist 目录里的东西就是构建好的应用，在 dist/ninghao-ng-camp 下面的东西，就是构建好的一个适合在生产环境上使用的 Angular 应用。也就是你需要把这个目录里所有的文件，上传到你配置好的 Nginx 主机配置好的位置上（远程服务器上的某个位置）。

Nginx 配置：

server {
  listen 80;
  server_name ng-camp.ninghao.co;

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

上面是一个简单的 Nginx 主机的配置，主要就是设置了一下主机监听的端口号， 80 是 HTTP 协议默认的端口号，server_name 设置了主机名，在 location 区块里的 root 指令，配置了一下 Angular 应用所在的位置，index 指令设置了入口文件，就是当访问主机名 ng-camp.ninghao.co 的时候，浏览器得到的是服务器上 /usr/share/nginx/html 目录里的 index.html 这个文件。

在上面这个配置里，try_files 非常关键，不然 Angular 应用的路由会遇到问题，比如刷新页面之后会得到 404 的响应。

基于 Docker 的部署流程

构建一个 Angular 应用，需要 Node.js 环境，也就是运行构建命令的机器上得安装好 Node.js。运行 Angular 应用需要一台 Web 服务器，所以我们需要在服务器上安装并且配置好一台 Web 服务器。我们可以在本地构建一个 Docker 镜像，这样在任何安装了 Docker 的机器上，都可以基于这个镜像去创建一个运行的容器，容器里面包含了 Angular 应用本身，还有它需要的 Web 服务器。

基于 Docker 部署应用有很多好处，比如运行应用的机器不需要知道应用需要什么环境，因为应用的代码还有它需要的所有的环境已经包含在镜像里了。机器（服务器）上只需要有一个 Docker 环境就行。我们还可以构建多个版本的镜像，每个镜像里的应用的代码都是不一样的，也就是你可以在生产环境上任意切换不同版本的应用，你甚至可以同时运行多个版本的应用，比如做 A/B 测试。

构建应用镜像可以在本地完成，然后把本地构建好的镜像推送到一个远程的镜像仓库，阿里云提供这样的仓库。你也可以配置让阿里云帮你构建镜像，创建一个远程代码仓库，里面包含构建镜像需要的 Dockerfile，阿里云可以根据这个代码仓库的状态（比如在特定分支上推送了新的提交）自动帮你构建需要的镜像，甚至可以帮你自动把构建好的镜像部署到你的阿里云服务器上。

在视频里我演示了一种直接在服务器上构建镜像并创建容器的方法。我在服务器上单独安装了一个 Nginx，主要是因为这台服务器上需要同时运行多个应用，所以我需要配置一些 Nginx 的反向代理，把请求转发给对应的容器。

Dockerfile

在 Angular 项目的根目录下面创建一个 Dockerfile 文件，内容如下：

FROM node:10-alpine as builder
WORKDIR /usr/src/app

COPY . .
RUN npm install
RUN npm run build:prod

FROM nginx:1.17
COPY --from=builder /usr/src/app/dist/ninghao-ng-camp /usr/share/nginx/html
COPY ./nginx-angular.conf /etc/nginx/conf.d/default.conf

构建应用镜像的时候要做的事情可以放在一个 Dockerfile 文件里，运行构建命令的时候，Docker 会根据这个文件里列出的步骤去做事情。

FROM node:10-alpine as builder

设置一个基本的镜像，FROM 后面是镜像的名字，这里用的是基本镜像是 node，这个镜像是 Docker 官方提供的，这个镜像里面包含了 Node.js，冒号后面的东西是这个镜像的版本。as builder 是给它起了个名字，因为后面我们会用到这个名字，获取到用它构建好的 Angular 应用。

WORKDIR /usr/src/app

WORKDIR 指令设置了工作目录的位置，意思就是进入到 /usr/src/app 这个目录，然后要在这个目录里去做一些事情。这里的目录是在镜像里的一个位置。

COPY . .

COPY 指令可以复制本地主机上的文件到镜像里，第一个点指的是 Dockerfile 文件所在的目录，这个目录是本地主机上的位置。第二个点指的是镜像里的当前目录，因为之前用 WORKDIR 设置了工作目录的位置，所以第二个点在这里指的就是镜像里的 /usr/src/app 这个目录。

这一步做的事情就是把在本地上的 Angular 应用复制到镜像里面。

RUN npm install

RUN 就是运行，运行了一下 npm install 命令，也就是安装 Angular 项目需要的所有的东西。

RUN npm run build:prod

RUN，运行一下 npm run build:prod 命令，这是我自定义的一个命令，实际它运行的是 ng build --prod，作用就是构建一个适合在生产环境上运行的 Angular 应用。

FROM nginx:1.17

设置使用一个基本的镜像，名字叫 nginx，因为我们的应用镜像里需要用到 Nginx 提供 Web 服务。

COPY --from=builder /usr/src/app/dist/ninghao-ng-camp /usr/share/nginx/html

复制了一些东西到指定位置上，这里要复制的东西是 builder 里的，这里包含了构建好的适合在生产环境上使用的 Angular 应用。把它复制到 /usr/share/nginx/html 这里面，它个目录应该是 Nginx 主机的根目录。

COPY ./nginx-angular.conf /etc/nginx/conf.d/default.conf

复制本地准备好的一个 Nginx 配置文件到镜像里，替换一下镜像里的 /etc/nginx/conf.d 下面的 default.conf 这个配置文件。

Nginx 配置文件（nginx-angular.conf）：

server {
  listen 80;

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

Docker Compose

在 Angular 项目的根目录下，可以再准备一个 docker-compose.yml 文件，内容如下：

version: '3'

services:
  angular:
    build: .
    ports:
      - 3333:80

在这个 docker-compose 文件里，我添加了一个名字是 angular 的服务，一般在服务里可以直接指定要使用的镜像，不过我希望可以在服务器上构建镜像，所以就用了一个 build ，根据项目下面的 Dockerfile 自己构建一个镜像，再基于这个镜像创建一个服务容器。

在 ports 下面配置了一个公开的端口，本地端口是 3333，对应的服务容器里的端口是 80（Nginx 服务用的默认的端口号）。这样在服务器上安装的 Nginx 那里配置的反向代理，可以配置把请求转发到本地主机的 3333 这个端口上。

部署

部署 Angular 应用到生产环境，可以把源代码下载到服务器上，在服务器上安装一个 Docker，安装一个 Nginx，配置一个 Nginx 反向代理。然后在 Angular 项目所在的目录下面，执行 docker-compose build ，先构建一个应用镜像，然后可以再运行 docker-compose up -d，启动应用服务容器。

总结

文章提供了一个基于 Docker 部署 Angular 应用的思路，你可以根据自己的需求去改进这个部署流程，可以尽量让它自动化。可以试一下阿里云提供的容器服务，当指定的代码仓库上有了新的提交以后，自动运行测试，构建应用镜像，然后自动把构建的镜像部署到阿里云服务器上。

大家可以通过下面的演示地址预览一下我部署到生产环境上的 Angular 应用。这个应用的服务端是用 Nest.js 做的，制作过程请参考最近发布的 Nest.js 课程（第一季已完结）。目前我只用了里面的用户注册与登录接口，课程里还制作了内容、分页、排序、喜欢、分类还有评论接口。除了前端，你的移动端应用与小程序都可以使用这些服务接口。