獨(dú)立弄了一個(gè)項(xiàng)目，也是鍛煉自己的工程能力，使用了比較常用的框架，后端Flask，前端Angular2，采用前后端完全分離的方式，通過(guò)接口傳輸json，但是在具體部署過(guò)程中，查找資料較為零散，故整理如下，希望能在自己提高的同時(shí)幫助別人。

一、部署環(huán)境

服務(wù)器架設(shè)在阿里云，linux環(huán)境為
* CentOS7.3
* mysql 5.6
* Python2

二、Flask項(xiàng)目部署

flask項(xiàng)目具體就不詳細(xì)介紹了，這里只把啟動(dòng)腳本列出，此處用nohup啟動(dòng)，當(dāng)然還可以用supervisor啟動(dòng)。此例子中flask啟動(dòng)文件，名為 main.py

from flask_bootstrap import Bootstrap  from flask import Flask  from flask_cors import CORS    app = Flask(__name__)  # 解決跨域問(wèn)題  send_wildcard=True)  CORS(app, supports_credentials=True)    if __name__ == '__main__':      app.run(host='0.0.0.0', port=8090,debug=True)    

然后使用nohup在后臺(tái)啟動(dòng)（盡量使用全路徑）

nohup python main_test.py > main_test.log 2>&1 &  

三、Angular2發(fā)布

1、安裝nodejs

yum install -y nodejs  # 查看安裝是否成功  node -v  

2、安裝angular cli

npm install -g @angular/cli  

如果出現(xiàn)長(zhǎng)時(shí)間加載，可切換淘寶鏡像后再安裝
安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org  

3、安裝依賴包

在有package.json的目錄下

npm install  

IDE中運(yùn)行

ng serve 或 npm install， 在localhost:4200中查看  

4、打包

項(xiàng)目文件夾下生成dist文件，里面是打包后的文件。
在項(xiàng)目主目錄下輸入以下命令：

ng build  # 或者  ng build --prod  

成功則輸入類似于下面的信息：

Date: 2017-10-14T08:19:18.595Z  Hash: aa580b91f10a49a65d87  Time: 28823ms  chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]  chunk {main} main.bundle.js, main.bundle.js.map (main) 55.9 kB {vendor} [initial] [rendered]  chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 217 kB {inline} [initial] [rendered]  chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 163 kB {inline} [initial] [rendered]  chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.74 MB [initial] [rendered]     

并生成了新的目錄dist及其下的子文件/目錄，此時(shí)則成功將應(yīng)用編譯成靜態(tài)資源。

5、如果提示版本不兼容 則需要安裝指定版本的Angular CLI 或者升級(jí)nodejs

5.1 升級(jí)nodejs

如果nodejs版本較低，可以用一種非常簡(jiǎn)單的方法來(lái)管理你的Node版本，即使用Node Binary管理模塊“n”。

1）首先：查看當(dāng)前node版本：node –v

2）安裝n模塊：

npm install -g n  

3）升級(jí)到指定版本/最新版本（該步驟可能需要花費(fèi)一些時(shí)間）升級(jí)之前，可以執(zhí)行n ls （查看可升級(jí)的版本）

n 6.9.1  

或者你也可以告訴管理器，安裝最新的穩(wěn)定版本

n stable  

4）安裝完成后，查看Node的版本，檢查升級(jí)是否成功 node -v

注：如果得到的版本信息不正確，你可能需要重啟機(jī)器

擴(kuò)展說(shuō)明：
有很多同學(xué)會(huì)發(fā)現(xiàn)，安裝完成之后，用node –v查看，還是老版本，安裝未生效。

原因：
n 切換之后的 node 默認(rèn)裝在 /usr/local/bin/node，先用 which node 檢查一下當(dāng)前使用的 node 是否是這個(gè)路徑下的。如上緣由，一般都是因?yàn)楫?dāng)前版本指定到了其他路徑，更新下/etc/profile文件指定即可。輕松解決。

5.2 安裝的特定版本的 Angular CLI

此處以安裝的Angular CLI 5.2.0的版本為例

卸載之前的版本

npm uninstall -g @angular/cli  

清除緩存，確保卸載干凈

npm cache verify ，在低版本的nodejs里面清除緩存使用的命令是npm cache clean  

檢查是否卸載干凈，輸入命令

ng -v # 若顯示command not found則卸載干凈  

安裝指定版本

npm install -g @angular/cli@1.5.2  

檢查版本號(hào) 看是否安裝成功

ng -v   

6、Error: Local workspace file (‘angular.json’) could not be found 報(bào)錯(cuò)處理

如果執(zhí)行 ng build –prod 時(shí)報(bào)錯(cuò)

Error: Local workspace file ('angular.json') could not be found  

可嘗試如下方法（取自于stackoverflow）

$ ng update @angular/cli --migrate-only --from=1.7.4      # This removed .angular-cli.json and created angular.json.  # If this leads to your project using 1.7.4, install v6 locally:    $ npm install --save-dev @angular/cli@v6.0.0-rc.4     # And try once again to update your project with:    $ ng update @angular/cli --migrate-only --from=1.7.4  

四、Nginx配置

1、前提

服務(wù)器已經(jīng)安裝nginx，并假設(shè)nginx安裝目錄為/usr/local/nginx
nginx 的部分相關(guān)命令：

- nginx : 啟動(dòng)服務(wù)   - nginx -s stop : 先查出 nginx 進(jìn)程 id，然后使用 kill 命令強(qiáng)制殺掉進(jìn)程   - nginx -s quit : 等待 nginx 進(jìn)程處理任務(wù)完畢，然后再進(jìn)行停止   - nginx -s reload : 重啟服務(wù)   - ps aux|grep nginx : 查看 nginx 進(jìn)程  

2、準(zhǔn)備源文件

拷貝項(xiàng)目編譯后的dist目錄下的所有文件到服務(wù)器上，比如拷貝至/usr/local/web/home

3、配置nginx

這里可以選擇編輯原始配置文件，也可以在nginx/conf.d/下新建一個(gè)conf文件，因?yàn)槿绻撐募A下有配置文件，會(huì)默認(rèn)先用這個(gè)文件
新建一個(gè)配置文件

sudo vi /usr/local/nginx/conf/conf.d/flask_nginx.conf  

flask_nginx.conf
修改http->server節(jié)點(diǎn)下 localhost和error_page 404的值如下：

  # 監(jiān)聽80端口，用于前端訪問(wèn)  server {      listen 80;      server_name 39.105.61.38;        location / {          root /var/www/dist;          index index.html index.html;      }      #error_page  404              /404.html;      error_page 404                /;  }    # 將8098端口，定向到本機(jī)8090端口，用于訪問(wèn)flask  server {      listen 8098;      server_name 39.105.61.38;         location / {          proxy_pass http://127.0.0.1:8090;             proxy_set_header Host $host;          proxy_set_header X-Real-IP $remote_addr;          proxy_set_header REMOTE-HOST $remote_addr;          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;      }  }  

4、部署

在nginx官網(wǎng)中下載nginx
把dist文件夾下的打包文件拷貝到nginx/html下并重命名為myProj
修改conf/nginx.conf文件

location / {              root   html/myProj;              index  index.html index.htm;          }  

啟動(dòng)nginx
在瀏覽器中輸入localhost:80即可看到項(xiàng)目

五、注意事項(xiàng)

所有以上配置結(jié)束，可能依然訪問(wèn)不了（這就是讓我折騰到半夜的問(wèn)題）
經(jīng)過(guò)排查，都沒(méi)問(wèn)題啊，始終是80端口可以訪問(wèn)，任何一個(gè)服務(wù)換到80都能訪問(wèn)，其他不行，聽著酷玩樂(lè)隊(duì)的歌，突然靈光一閃，看一下阿里云，果然，這里有個(gè)安全組，默認(rèn)是關(guān)閉其他端口的，需要配置安全組。

1、阿里云服務(wù)器

怎么開放阿里云端口

開放了服務(wù)器的端口，訪問(wèn)端口不是 timeout 了，出現(xiàn)了 拒絕訪問(wèn)
果然還有centos的防火墻

2、防火墻配置

CentOS 7默認(rèn)使用的是firewall作為防火墻，也可改為iptables防火墻。
firewall操作：

# service firewalld status; #查看防火墻狀態(tài)  

disabled 表明 已經(jīng)禁止開啟啟動(dòng) enable 表示開機(jī)自啟，inactive 表示防火墻關(guān)閉狀態(tài) activated（running）表示為開啟狀態(tài)

$ service firewalld start;  或者 #systemctl start firewalld.service;#開啟防火墻    $ service firewalld stop;  或者 #systemctl stop firewalld.service;#關(guān)閉防火墻    $ service firewalld restart;  或者 #systemctl restart firewalld.service;  #重啟防火墻    $ systemctl disable firewalld.service#禁止防火墻開啟自啟    $ systemctl enable firewalld#設(shè)置防火墻開機(jī)啟動(dòng)  $ yum remove firewalld #卸載firewall  

安裝iptables防火墻及操作：

#yum install iptables-services#安裝iptables防火墻    #vi /etc/sysconfig/iptables#編輯防火墻配置文件，開放3306端口  

添加配置：

-A INPUT -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT    #systemctl restart iptables.service #最后重啟防火墻使配置生效    #systemctl enable iptables.service #設(shè)置防火墻開機(jī)啟動(dòng)