Angular入門到精通系列教程(14)- Angular 編譯打包 & Docker釋出
阿新 • • 發佈:2021-01-29
[TOC]
> 環境:
> * 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
```
1. environment.ts: 針對開發環境使用的環境檔案
2. environment.prod.ts: 生產環境編譯時,將替換原有的environment.ts,然後再打包。 (根目錄下的angular.json定義了這個預設行為,有需要,可以進行修改)
AngularCLI剛剛生成2個檔案後,如果開啟比較2個檔案的區別,可以看到開發環境使用的environment.ts檔案中,有這麼一句`production: false`。因為,針對生產環境,angular在編譯時需要核心考慮效率等問題,而開發環境,要考慮方便開發者進行除錯,側重點不同。
那麼針對生產環境如何編譯呢?Angular CLI同樣提供了命令,
```
ng build --prod
```
其中,引數`--prod` 即告訴編譯環境,編譯為生產環境包。同樣,angular.json中定義了預設的編譯引數,如果需要,可以進行修改。主要配置引數如下
```ts
"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目錄下即可。
基本步驟:
1. 準備Dockerfile 檔案, docker可以基於`nginx:alpine`, 將編譯好的angular 站點檔案複製到 docker 的nginx預設目錄 `/usr/share/nginx/html`
```準備Dockerfile
FROM nginx:alpine
COPY . /usr/share/nginx/html
```
> 說明: 1) 假設angular打包後的檔案,與Dockerfile檔案在同一個目錄
> 2) COPY . /usr/share/nginx/html, 兩個引數 `.` 代表當前路徑, `/usr/share/nginx/html`是docker中的目標目錄
2. 編譯docker。 在Dockerfile目錄下,執行
```sh
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 ---------------- >
> ===============
>---------------- END ---------------- >
> ===============