透來 Docker 來封裝 Angular 6+ 筆記

前陣子要來 用jenkins deploy Angular 的Project ,發現了幾個問題

1. 還要安裝Angular CLI
2. ng build 很吃資源,Azure Standard B2s (2 vcpus, 4 GiB memory) 整台都會hang住

所以決定不偷懶了,直接把build的寫在Docker裡,

基本準備

這部分需要先累績一些基本技術,以下是網路的慘考文獻

1. Angular 深入淺出三十天
2. Docker 基本教學 - 從無到有 Docker-Beginners-Guide

Dockerfile

先在專案根目錄新增 Dockerfile 檔案,與angular.json同一層

# 第一階段產生dist資料夾
FROM node:14.15.3-alpine3.10 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/{專案名稱} --prod

# pull nginx image
FROM nginx:1.13.3-alpine

# 從第一階段的檔案copy
COPY --from=builder /usr/app/dist/{專案名稱} /usr/share/nginx/html

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

專案名稱 : 要替換angular裡的 project name, 可以查看angular.json 中的

.dockerignore

在專案根目錄新增 .dockerignore 檔案,與angular.json同一層

node_modules
dist

用來指定docker 打包時不要把這兩個目錄打包進去

nginx-custom.conf

在專案根目錄新增 nginx-custom.conf 檔案,與angular.json同一層

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;
  }
}

用來設定 Docker內的 nginx 的設定

docker build & RUN

build

docker build -t {docker TAG}/{docker NAME} .

記得置換 {docker TAG} 和 {docker NAME}

RUN

docker run -p 9999:80 -d {docker TAG}/{docker NAME}

記得置換 {docker TAG} 和 {docker NAME} 或是你可以換 port 9999

新年快樂 enjoy!!!

參考文獻 Day20-建立Angular Frontend Docker image

md: # 透來 Docker 來封裝 Angular 6+ 筆記 前陣子要來 用jenkins deploy Angular 的Project ,發現了幾個問題 1. 還要安裝Angular CLI 2. ``` ng build ``` 很吃資源,Azure Standard B2s (2 vcpus, 4 GiB memory) 整台都會hang住 所以決定不偷懶了,直接把build的寫在Docker裡, # 基本準備 這部分需要先累績一些基本技術,以下是網路的慘考文獻 1. [ Angular 深入淺出三十天 ](https://ithelp.ithome.com.tw/articles/10202827) 2. [ Docker 基本教學 - 從無到有 Docker-Beginners-Guide ](https://github.com/twtrubiks/docker-tutorial) # Dockerfile 先在專案根目錄新增 Dockerfile 檔案,與angular.json同一層 ```docker # 第一階段產生dist資料夾 FROM node:14.15.3-alpine3.10 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/{專案名稱} --prod # pull nginx image FROM nginx:1.13.3-alpine # 從第一階段的檔案copy COPY --from=builder /usr/app/dist/{專案名稱} /usr/share/nginx/html # 覆蓋image裡的設定檔 COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf ``` > 專案名稱 : 要替換angular裡的 project name, 可以查看angular.json 中的 >  # .dockerignore 在專案根目錄新增 .dockerignore 檔案,與angular.json同一層 ```.dockerignore node_modules dist ``` > 用來指定docker 打包時不要把這兩個目錄打包進去 # nginx-custom.conf 在專案根目錄新增 nginx-custom.conf 檔案,與angular.json同一層 ```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; } } ``` > 用來設定 Docker內的 nginx 的設定 # docker build & RUN ## build ``` docker build -t {docker TAG}/{docker NAME} . ``` > 記得置換 {docker TAG} 和 {docker NAME} ## RUN docker run -p 9999:80 -d {docker TAG}/{docker NAME} > 記得置換 {docker TAG} 和 {docker NAME} 或是你可以換 port 9999 # 新年快樂 enjoy!!! > 參考文獻 [ Day20-建立Angular Frontend Docker image ](https://ithelp.ithome.com.tw/articles/10207731)