Docker部署Angular應用

寫在最前面 首先是我的目錄結構 你要新建的是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版本可以去掉 就會下載 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 這個埠上。