獨立弄了一個項目,也是鍛煉自己的工程能力,使用了比較常用的框架,后端Flask,前端Angular2,采用前后端完全分離的方式,通過接口傳輸json,但是在具體部署過程中,查找資料較為零散,故整理如下,希望能在自己提高的同時幫助別人。
一、部署環境
服務器架設在阿里云,linux環境為
* CentOS7.3
* mysql 5.6
* Python2
二、Flask項目部署
flask項目具體就不詳細介紹了,這里只把啟動腳本列出,此處用nohup啟動,當然還可以用supervisor啟動。此例子中flask啟動文件,名為 main.py
from flask_bootstrap import Bootstrap from flask import Flask from flask_cors import CORS app = Flask(__name__) # 解決跨域問題 send_wildcard=True) CORS(app, supports_credentials=True) if __name__ == '__main__': app.run(host='0.0.0.0', port=8090,debug=True)
然后使用nohup在后臺啟動(盡量使用全路徑)
nohup python main_test.py > main_test.log 2>&1 &
三、Angular2發布
1、安裝nodejs
yum install -y nodejs # 查看安裝是否成功 node -v
2、安裝angular cli
npm install -g @angular/cli
如果出現長時間加載,可切換淘寶鏡像后再安裝
安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安裝依賴包
在有package.json的目錄下
npm install
IDE中運行
ng serve 或 npm install, 在localhost:4200中查看
4、打包
項目文件夾下生成dist文件,里面是打包后的文件。
在項目主目錄下輸入以下命令:
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及其下的子文件/目錄,此時則成功將應用編譯成靜態資源。
5、如果提示版本不兼容 則需要安裝指定版本的Angular CLI 或者升級nodejs
5.1 升級nodejs
如果nodejs版本較低,可以用一種非常簡單的方法來管理你的Node版本,即使用Node Binary管理模塊“n”。
1)首先:查看當前node版本:node –v
2)安裝n模塊:
npm install -g n
3)升級到指定版本/最新版本(該步驟可能需要花費一些時間)升級之前,可以執行n ls (查看可升級的版本)
n 6.9.1
或者你也可以告訴管理器,安裝最新的穩定版本
n stable
4)安裝完成后,查看Node的版本,檢查升級是否成功 node -v
注:如果得到的版本信息不正確,你可能需要重啟機器
擴展說明:
有很多同學會發現,安裝完成之后,用node –v查看,還是老版本,安裝未生效。
原因:
n 切換之后的 node 默認裝在 /usr/local/bin/node,先用 which node 檢查一下當前使用的 node 是否是這個路徑下的。如上緣由,一般都是因為當前版本指定到了其他路徑,更新下/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
檢查版本號 看是否安裝成功
ng -v
6、Error: Local workspace file (‘angular.json’) could not be found 報錯處理
如果執行 ng build –prod 時報錯
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、前提
服務器已經安裝nginx,并假設nginx安裝目錄為/usr/local/nginx
nginx 的部分相關命令:
- nginx : 啟動服務 - nginx -s stop : 先查出 nginx 進程 id,然后使用 kill 命令強制殺掉進程 - nginx -s quit : 等待 nginx 進程處理任務完畢,然后再進行停止 - nginx -s reload : 重啟服務 - ps aux|grep nginx : 查看 nginx 進程
2、準備源文件
拷貝項目編譯后的dist目錄下的所有文件到服務器上,比如拷貝至/usr/local/web/home
3、配置nginx
這里可以選擇編輯原始配置文件,也可以在nginx/conf.d/下新建一個conf文件,因為如果該文件夾下有配置文件,會默認先用這個文件
新建一個配置文件
sudo vi /usr/local/nginx/conf/conf.d/flask_nginx.conf
flask_nginx.conf
修改http->server節點下 localhost和error_page 404的值如下:
# 監聽80端口,用于前端訪問 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端口,定向到本機8090端口,用于訪問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官網中下載nginx
把dist文件夾下的打包文件拷貝到nginx/html下并重命名為myProj
修改conf/nginx.conf文件
location / { root html/myProj; index index.html index.htm; }
啟動nginx
在瀏覽器中輸入localhost:80即可看到項目
五、注意事項
所有以上配置結束,可能依然訪問不了(這就是讓我折騰到半夜的問題)
經過排查,都沒問題啊,始終是80端口可以訪問,任何一個服務換到80都能訪問,其他不行,聽著酷玩樂隊的歌,突然靈光一閃,看一下阿里云,果然,這里有個安全組,默認是關閉其他端口的,需要配置安全組。
1、阿里云服務器
怎么開放阿里云端口
開放了服務器的端口,訪問端口不是 timeout 了,出現了 拒絕訪問
果然還有centos的防火墻
2、防火墻配置
CentOS 7默認使用的是firewall作為防火墻,也可改為iptables防火墻。
firewall操作:
# service firewalld status; #查看防火墻狀態
disabled 表明 已經禁止開啟啟動 enable 表示開機自啟,inactive 表示防火墻關閉狀態 activated(running)表示為開啟狀態
$ service firewalld start; 或者 #systemctl start firewalld.service;#開啟防火墻 $ service firewalld stop; 或者 #systemctl stop firewalld.service;#關閉防火墻 $ service firewalld restart; 或者 #systemctl restart firewalld.service; #重啟防火墻 $ systemctl disable firewalld.service#禁止防火墻開啟自啟 $ systemctl enable firewalld#設置防火墻開機啟動 $ 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 #設置防火墻開機啟動