Angular入門到精通系列教程(14)- Angular 編譯打包 & Docker發佈

環境:css

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: Visual Studio Code

1. 概要

當咱們完成angular的開發後,如何部署到服務器呢?html

2. 編譯打包

2.1. 基本打包命令

基於Angular CLI生成的Angular項目,默認會有2個環境配置文件java

└──myProject/src/environments/
               └──environment.ts
               └──environment.prod.ts
  1. environment.ts: 針對開發環境使用的環境文件
  2. environment.prod.ts: 生產環境編譯時,將替換原有的environment.ts,而後再打包。 (根目錄下的angular.json定義了這個默認行爲,有須要,能夠進行修改)

AngularCLI剛剛生成2個文件後,若是打開比較2個文件的區別,能夠看到開發環境使用的environment.ts文件中,有這麼一句production: false。由於,針對生產環境,angular在編譯時須要核心考慮效率等問題,而開發環境,要考慮方便開發者進行調試,側重點不一樣。node

那麼針對生產環境如何編譯呢?Angular CLI一樣提供了命令,nginx

ng build --prod

其中,參數--prod 即告訴編譯環境,編譯爲生產環境包。一樣,angular.json中定義了默認的編譯參數,若是須要,能夠進行修改。主要配置參數以下web

"configurations": {
    "production": {
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": false,
        "budgets": [
        {
            "type": "initial",
            "maximumWarning": "5mb",
            "maximumError": "10mb"
        }
        ]
    }
}

Angular默認打包到根目錄下的dist目錄下,生成的文件爲純靜態文件(html, css, js),以及圖片文件。docker

2.2. 打包部署到二級目錄

有很多狀況,咱們的angular web站點不能直接部署到網站的根目錄下,須要部署到二級目錄下。 好比,不能部署到 http://abc.com下,要求部署到 http://abc.com/demo 這個二級目錄下。針對這種狀況,就須要修改一下咱們的編譯參數,修改成:apache

ng build --prod --deploy-url /demo/ --base-href /demo/

增長 --deploy-url--base-hrefnpm

使用場景:好比咱們有多個站點,但願使用同一個反向代理, http://site1, http://site2, 分別映射到 http://abc.com/site1, http://abc.com/site2/。 那麼爲了方便配置,須要把site1, site2都部署到二級目錄,如http://site1/site1, http://site2/site2。 而後 http://site1/site1代理到http://abc.com/site1, http://site2/site2代理到http://abc.com/site2/, 省得css、js由於目錄級別問題找不到。json

3. Angular站點的發佈

Angular站點編譯打包後,能夠方便的發佈到已有web服務器,或者打成docker image, 而後發佈。

3.1. web服務器發佈

由於咱們打包後,生成的文件爲純靜態文件(html, css, js, 圖片等), 因此打包後的問題,能夠直接copy到iis, nginx , apache tomcat等web服務器,或者node.js, java等能夠顯示靜態文件的程序的目錄下便可。

3.2. 使用docker發佈

若是部署到docker,咱們能夠基於一個基礎的nginx docker, 而後把編譯好的angular項目,copy到docker 內的nginx目錄下便可。

基本步驟:

  1. 準備Dockerfile 文件, docker能夠基於nginx:alpine, 將編譯好的angular 站點文件複製到 docker 的nginx默認目錄 /usr/share/nginx/html
FROM nginx:alpine
COPY . /usr/share/nginx/html

說明: 1) 假設angular打包後的文件,與Dockerfile文件在同一個目錄
2) COPY . /usr/share/nginx/html, 兩個參數 . 表明當前路徑, /usr/share/nginx/html是docker中的目標目錄

  1. 編譯docker。 在Dockerfile目錄下,執行
docker build -t your-docker-name .
docker save your-docker-name > your-docker-name.tar
gzip your-docker-name.tar

三條命令分別爲:

  • 生成docker image, 名字(name)爲your-docker-name
  • 導出docker image爲本地文件, 文件名爲 your-docker-name.tar
  • 壓縮docker image

能夠看到,由於angular編譯後爲純靜態文件,因此使用docker發佈很是簡單。部署時,只須要複製docker文件到目標機器,解壓縮,而後執行 docker load < your-docker-name.tar 便可加載docker image到目標機器。

4. 總結

  1. 爲生產環境編譯,必定要加參數--prod
  2. 若是要部署到二級目錄,編譯時加參數。如部署到/demo二級目錄下,加參數: --deploy-url /demo/ --base-href /demo/
  3. 使用docker發佈,能夠選擇基本的nginx docker, 而後將編譯好的angular文件copy到nginx目錄下便可。



---------------- END ----------------






======================

相關文章
相關標籤/搜索