環境:css
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio Code
當咱們完成angular的開發後,如何部署到服務器呢?html
基於Angular CLI生成的Angular項目,默認會有2個環境配置文件java
└──myProject/src/environments/ └──environment.ts └──environment.prod.ts
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
有很多狀況,咱們的angular web站點不能直接部署到網站的根目錄下,須要部署到二級目錄下。 好比,不能部署到 http://abc.com下,要求部署到 http://abc.com/demo 這個二級目錄下。針對這種狀況,就須要修改一下咱們的編譯參數,修改成:apache
ng build --prod --deploy-url /demo/ --base-href /demo/
增長 --deploy-url
和 --base-href
。npm
使用場景:好比咱們有多個站點,但願使用同一個反向代理,
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
Angular站點編譯打包後,能夠方便的發佈到已有web服務器,或者打成docker image, 而後發佈。
由於咱們打包後,生成的文件爲純靜態文件(html, css, js, 圖片等), 因此打包後的問題,能夠直接copy到iis, nginx , apache tomcat等web服務器,或者node.js, java等能夠顯示靜態文件的程序的目錄下便可。
若是部署到docker,咱們能夠基於一個基礎的nginx docker, 而後把編譯好的angular項目,copy到docker 內的nginx目錄下便可。
基本步驟:
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 build -t your-docker-name . docker save your-docker-name > your-docker-name.tar gzip your-docker-name.tar
三條命令分別爲:
能夠看到,由於angular編譯後爲純靜態文件,因此使用docker發佈很是簡單。部署時,只須要複製docker文件到目標機器,解壓縮,而後執行 docker load < your-docker-name.tar
便可加載docker image到目標機器。
--prod
--deploy-url /demo/ --base-href /demo/
---------------- END ----------------
======================