發表文章

目前顯示的是 1月, 2021的文章

透來 Docker 來封裝 Angular 6+ 筆記

圖片
  透來 Docker 來封裝 Angular 6+ 筆記 前陣子要來 用jenkins deploy Angular 的Project ,發現了幾個問題 還要安裝Angular CLI ng build  很吃資源,Azure Standard B2s (2 vcpus, 4 GiB memory) 整台都會hang住 所以決定不偷懶了,直接把build的寫在Docker裡, 基本準備 這部分需要先累績一些基本技術,以下是網路的慘考文獻 Angular 深入淺出三十天 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 用來指定do