本篇文章跟大家介紹一下Angular編譯打包&Docker發布的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
環境:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio Code
##1. 摘要
當我們完成angular的開發後，如何部署到伺服器呢？ 【相關教學推薦：《
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同樣提供了指令,
其中，參數
--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目錄下即可。
基本步驟：
說明： 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發布？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
