前面已經建立api server、db server image，還有frontend image還沒建立，自己本身學的是angular，網路google怎麼Dockerize Angular，選擇這篇Angular in Docker with Nginx來try

npm i -g @angular/cli

// 建立angular專案 
ng new frontend

// 安裝好相關套件後
cd frontend

nginx是很好的static web server的選項

在專案目錄下新增nginx-custom.conf(nginx設定檔)

server { 
  listen *:80 ; # 指定port to serve
  location / { 
    root /usr/share/nginx/html; # 指定web根目錄
    index index.html index.html; # 指定index為index.html
    # request uri如果沒有match的route，就回index.html
    try_files $uri $uri/ /index.html=404; 
  }
}

新增Dockerfile，使用multistage build

# 第一階段產生dist資料夾
FROM node:alpine as builder

# 指定預設/工作資料夾
WORKDIR /usr/app

# 只copy package.json檔案
COPY ./package*.json ./
# 安裝dependencies
RUN npm install

# copy其餘目錄及檔案
COPY ./ ./

COPY src src

# 指定建立build output資料夾，--prod為Production Mode
RUN npm run build --output-path=./dist/frontend --prod


# pull nginx image
FROM nginx:alpine

# 從第一階段的檔案copy
COPY --from=builder /usr/app/dist/frontend /usr/share/nginx/html

# 覆蓋image裡的設定檔
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

新

# 告訴docker不要把以下資料夾send到build context
node_modules
dist

docker build .

docker-machine ip

docker run -p 80:80 image_id

用firefox測試

把image push到Docker Hub，後面幾天kubernetes用