淺談Angular如何編譯打包？如何使用Docker釋出？

本篇文章給大家介紹一下編譯打包&Docker釋出的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

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

1. 概要

當我們完成angular的開發後，如何部署到伺服器呢？【相關教學推薦：《》】

2. 編譯打包

2.1. 基本打包命令

基於Angular CLI生成的Angular專案，預設會有2個環境組態檔

└──myProject/src/environments/
               └──environment.ts
               └──environment.prod.ts

environment.ts: 針對開發環境使用的環境檔案
environment.prod.ts: 生產環境編譯時，將替換原有的environment.ts，然後再打包。（根目錄下的angular.json定義了這個預設行為，有需要，可以進行修改）

AngularCLI剛剛生成2個檔案後，如果開啟比較2個檔案的區別，可以看到開發環境使用的environment.ts檔案中，有這麼一句production: false。因為，針對生產環境，angular在編譯時需要核心考慮效率等問題，而開發環境，要考慮方便開發者進行偵錯，側重點不同。

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

ng build --prod

其中，引數--prod 即告訴編譯環境，編譯為生產環境包。同樣，angular.json中定義了預設的編譯引數，如果需要，可以進行修改。主要設定引數如下

"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)，以及圖片檔案。

2.2. 打包部署到二級目錄

有不少情況，我們的angular web站點不能直接部署到網站的根目錄下，需要部署到二級目錄下。比如，不能部署到 http://abc.com下，要求部署到 http://abc.com/demo 這個二級目錄下。針對這種情況，就需要修改一下我們的編譯引數，修改為：

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

增加 --deploy-url 和 --base-href。

使用場景：比如我們有多個站點，希望使用同一個反向代理， 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因為目錄級別問題找不到。

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目錄下即可。

基本步驟：

準備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中的目標目錄

編譯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. 總結

為生產環境編譯，一定要加引數--prod
如果要部署到二級目錄，編譯時加引數。如部署到/demo二級目錄下，加引數： --deploy-url /demo/ --base-href /demo/
使用docker釋出,可以選擇基本的nginx docker，然後將編譯好的angular檔案copy到nginx目錄下即可。

更多程式設計相關知識，請存取：！！

以上就是淺談Angular如何編譯打包？如何使用Docker釋出？的詳細內容，更多請關注TW511.COM其它相關文章！