Node & Angular 4 學(xué)習(xí)記錄（三）-- 部署
????前兩篇記錄了Node和Angular程序的構(gòu)建及開(kāi)發(fā)，本篇會(huì)記錄下來(lái)部署相關(guān)的事情忽冻。
????在一開(kāi)始我陷入了誤區(qū)，沒(méi)有準(zhǔn)確的理解前后端完全分離的概念，強(qiáng)行讓Node和Angular程序?qū)懺谝黄鹑抟ぃ瑔?dòng)node服務(wù)器來(lái)跑程序，同時(shí)也浪費(fèi)了angular-cli提供的服務(wù)器舔亭。在部署中遇到重重困難些膨，最后理解了這個(gè)概念蟀俊。所謂前后端完全分離就是前段寫好程序后打包放在服務(wù)器上就可以直接運(yùn)行，請(qǐng)求后端API的時(shí)候需要啟動(dòng)后端的程序订雾，這其實(shí)是兩個(gè)程序在運(yùn)行肢预。我們選擇了用Nginx服務(wù)器做代理轉(zhuǎn)發(fā)。
????首先我們需要知道angular-cli是怎么打包前端程序的洼哎？一個(gè)angular前端程序是由很多模塊組成烫映，我們可能是用JavaScript來(lái)寫，又或者是TypeScript,又或者是其他什么語(yǔ)言噩峦。但是瀏覽器只認(rèn)識(shí)我們Js锭沟，所以angular-cli會(huì)打包所有的文件包括靜態(tài)文件到配置好的文件夾中，這時(shí)候我們其實(shí)是不需要應(yīng)用服務(wù)器就可以直接用的壕探。下面記錄一下部署的過(guò)程：
????我們應(yīng)用的是Nginx來(lái)做代理轉(zhuǎn)發(fā)冈钦，我們想在一個(gè)Nginx可以部署多個(gè)前端程序，所以對(duì)于靜態(tài)資源我們沒(méi)有應(yīng)用網(wǎng)上廣泛應(yīng)用的轉(zhuǎn)發(fā)模式（代理所有.js,.css等結(jié)尾的location）李请。部署的過(guò)程很簡(jiǎn)單瞧筛，像前文提到的前端代碼打包的時(shí)候一定要設(shè)置baseUrl，這樣可以保證Nginx找到html的時(shí)候也同時(shí)能夠找到其他靜態(tài)文件导盅。
示例：
前端代碼baseUrl為：“./”较幌，打包前端代碼后直接把打包的文件夾里的文件放到Nginx訪問(wèn)根目錄對(duì)應(yīng)的ng-server文件夾下就好“追可以配置angular-cli中的輸出目錄名字成ng-server乍炉，這樣部署的時(shí)候直接打包文件夾就好。另外需要注意的是滤馍，文件內(nèi)靜態(tài)文件的引用全部使用"./"出去到項(xiàng)目的根目錄岛琼，之前也設(shè)置了相應(yīng)的baseUrl，可以保證靜態(tài)文件的正確引用巢株。
Nginx配置：
location /ng-server/ {
#定義絕對(duì)路徑
root F:/Dwork/Server/nginx-1.12.1/html;
index index.html;
#H5模式Url刷新頁(yè)面找不到頁(yè)面重定向
try_files $uri $uri/ /ng-server/index.html;
}
此時(shí)我們已經(jīng)完成了前端代碼的部署槐瑞，訪問(wèn)的時(shí)候可以發(fā)現(xiàn)請(qǐng)求不到服務(wù)端，這個(gè)時(shí)候我們?cè)摬渴鸱?wù)端了阁苞。啟動(dòng)node服務(wù)器后困檩，在Nginx設(shè)置API代理：
location /ng-server/api {
proxy_pass http://127.0.0.1:3000/api;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_intercept_errors on;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
這樣我們就完成了前后端兩個(gè)程序的部署。到此為止那槽，我們已經(jīng)完成了Node服務(wù)端悼沿，Angular 4 App的開(kāi)發(fā)和部署，這期間遇到很多問(wèn)題骚灸，解決問(wèn)題的過(guò)程是有趣的糟趾。希望這份記錄也會(huì)給其他人帶來(lái)幫助。
這里是上一篇
想寫一些東西分享，歡迎轉(zhuǎn)載拉讯，請(qǐng)注明出處涤浇。
簡(jiǎn)書(shū)-板凳兒兒
http://www.reibang.com/p/38e589f5a94f
