本文共 1600 字，大约阅读时间需要 5 分钟。

写在最前面 首先是我的目录结构 你要新建的是Dockerfile和nginx-angular.conf

Dockerfile

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

#设置一个基本的镜像，FROM 后面是镜像的名字，这个镜像是 Docker 官方提供的，这个镜像里面包含了 Node.js，可以在node后跟冒号 申明东镜像版本。as builder 是给它起了个别名FROM node as builder#WORKDIR 指令设置了工作目录的位置，意思就是进入到 /usr/src/app 这个目录，然后要在这个目录里去做一些事情。这里的目录是在镜像里的一个位置。WORKDIR /usr/src/app#COPY 指令可以复制本地主机上的文件到镜像里，第一个点指的是 Dockerfile 文件所在的目录，这个目录是本地主机上的位置。第二个点指的是镜像里的当前目录，因为之前用 WORKDIR 设置了工作目录的位置，所以第二个点在这里指的就是镜像里的 /usr/src/app 这个目录。#这一步做的事情就是把在本地上的 Angular 应用复制到镜像里面。COPY . .#运行了一下 npm install 命令，也就是安装 Angular 项目需要的所有的东西RUN npm install#它运行的是 ng build --prod，作用就是构建一个适合在生产环境上运行的 Angular 应用RUN npm run build --prod#这里的nginx版本可以去掉 就会下载 latestFROM nginx:1.17#你需要将这里的angulardemo10换成你执行ng build在dist下生成的目录 一般是你的项目名称COPY --from=builder /usr/src/app/dist/angulardemo10 /usr/share/nginx/html#设置用户标签LABEL maintainer="konsy"#这是将你配置好的nginx配置替换docker里默认的nginx 建议学习nginxCOPY ./nginx-angular.conf /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;  }}

然后在angular项目目录执行

#my-angular-app 就是你生成docker的tag名docker build -t my-angular-app .

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 这个端口上。

转载地址：http://hjmii.baihongyu.com/