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

angular docker angular dockerfile_nginx

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版本可以去掉 就会下载 latest
FROM 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 建议学习nginx
COPY ./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 这个端口上。