iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
Kubernetes

從Docker到Kubernetes-新手入門筆記系列 第 20

Day20-建立Angular Frontend Docker image

前面已經建立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用


上一篇
Day19-解析Service Yaml設定
下一篇
Day21-更新現有Pod(有雷)
系列文
從Docker到Kubernetes-新手入門筆記30

尚未有邦友留言

立即登入留言