環(huán)境:

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

1. 概要

當(dāng)我們完成angular的開(kāi)發(fā)后，如何部署到服務(wù)器呢？

2. 編譯打包

2.1. 基本打包命令

基于Angular CLI生成的Angular項(xiàng)目，默認(rèn)會(huì)有2個(gè)環(huán)境配置文件

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

1. environment.ts: 針對(duì)開(kāi)發(fā)環(huán)境使用的環(huán)境文件
2. environment.prod.ts: 生產(chǎn)環(huán)境編譯時(shí)，將替換原有的environment.ts，然后再打包。 （根目錄下的angular.json定義了這個(gè)默認(rèn)行為，有需要，可以進(jìn)行修改）

AngularCLI剛剛生成2個(gè)文件后，如果打開(kāi)比較2個(gè)文件的區(qū)別，可以看到開(kāi)發(fā)環(huán)境使用的environment.ts文件中，有這么一句production: false。因?yàn)椋槍?duì)生產(chǎn)環(huán)境，angular在編譯時(shí)需要核心考慮效率等問(wèn)題，而開(kāi)發(fā)環(huán)境，要考慮方便開(kāi)發(fā)者進(jìn)行調(diào)試，側(cè)重點(diǎn)不同。

那么針對(duì)生產(chǎn)環(huán)境如何編譯呢？Angular CLI同樣提供了命令,

ng build --prod

其中，參數(shù)--prod 即告訴編譯環(huán)境，編譯為生產(chǎn)環(huán)境包。同樣，angular.json中定義了默認(rèn)的編譯參數(shù)，如果需要，可以進(jìn)行修改。主要配置參數(shù)如下

"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默認(rèn)打包到根目錄下的dist目錄下，生成的文件為純靜態(tài)文件（html, css, js)，以及圖片文件。

2.2. 打包部署到二級(jí)目錄

有不少情況，我們的angular web站點(diǎn)不能直接部署到網(wǎng)站的根目錄下，需要部署到二級(jí)目錄下。 比如，不能部署到 http://abc.com下，要求部署到 http://abc.com/demo 這個(gè)二級(jí)目錄下。針對(duì)這種情況，就需要修改一下我們的編譯參數(shù)，修改為：

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

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

使用場(chǎng)景：比如我們有多個(gè)站點(diǎn)，希望使用同一個(gè)反向代理， http://site1, http://site2, 分別映射到 http://abc.com/site1, http://abc.com/site2/。 那么為了方便配置，需要把site1， site2都部署到二級(jí)目錄，如http://site1/site1, http://site2/site2。 然后 http://site1/site1代理到http://abc.com/site1, http://site2/site2代理到http://abc.com/site2/， 免得css、js因?yàn)槟夸浖?jí)別問(wèn)題找不到。

3. Angular站點(diǎn)的發(fā)布

Angular站點(diǎn)編譯打包后，可以方便的發(fā)布到已有web服務(wù)器，或者打成docker image， 然后發(fā)布。

3.1. web服務(wù)器發(fā)布

因?yàn)槲覀兇虬螅傻奈募榧冹o態(tài)文件（html, css, js, 圖片等)， 所以打包后的問(wèn)題，可以直接copy到iis， nginx , apache tomcat等web服務(wù)器，或者node.js， java等可以顯示靜態(tài)文件的程序的目錄下即可。

3.2. 使用docker發(fā)布

如果部署到docker，我們可以基于一個(gè)基礎(chǔ)的nginx docker， 然后把編譯好的angular項(xiàng)目，copy到docker 內(nèi)的nginx目錄下即可。

基本步驟：

1. 準(zhǔn)備Dockerfile 文件， docker可以基于nginx:alpine， 將編譯好的angular 站點(diǎn)文件復(fù)制到 docker 的nginx默認(rèn)目錄 /usr/share/nginx/html

FROM nginx:alpine
COPY . /usr/share/nginx/html

說(shuō)明： 1) 假設(shè)angular打包后的文件，與Dockerfile文件在同一個(gè)目錄
2) COPY . /usr/share/nginx/html, 兩個(gè)參數(shù) . 代表當(dāng)前路徑， /usr/share/nginx/html是docker中的目標(biāo)目錄

2. 編譯docker。 在Dockerfile目錄下，執(zhí)行

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
• 導(dǎo)出docker image為本地文件， 文件名為 your-docker-name.tar
• 壓縮docker image

可以看到，因?yàn)閍ngular編譯后為純靜態(tài)文件，所以使用docker發(fā)布非常簡(jiǎn)單。部署時(shí)，只需要復(fù)制docker文件到目標(biāo)機(jī)器，解壓縮，然后執(zhí)行 docker load < your-docker-name.tar 即可加載docker image到目標(biāo)機(jī)器。

4. 總結(jié)

1. 為生產(chǎn)環(huán)境編譯，一定要加參數(shù)--prod
2. 如果要部署到二級(jí)目錄，編譯時(shí)加參數(shù)。如部署到/demo二級(jí)目錄下，加參數(shù)： --deploy-url /demo/ --base-href /demo/
3. 使用docker發(fā)布,可以選擇基本的nginx docker， 然后將編譯好的angular文件copy到nginx目錄下即可。

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

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