站長資訊網
        最全最豐富的資訊網站

        Web項目部署(Flask Angular2 Nginx)

        獨立弄了一個項目,也是鍛煉自己的工程能力,使用了比較常用的框架,后端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 #設置防火墻開機啟動  
        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产精品gz久久久| 精品久久久久香蕉网| 亚洲精品国产V片在线观看| 91精品国产色综合久久| 欧美人与性动交α欧美精品成人色XXXX视频 | 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 亚洲精品~无码抽插| 国产亚洲精品无码专区| 久久91精品久久91综合| 久久亚洲精品无码AV红樱桃| 免费精品久久久久久中文字幕 | 91精品福利在线观看| 97精品伊人久久大香线蕉app| 亚洲日韩一页精品发布| 久久夜色撩人精品国产| 国产在线观看一区二区三区精品| 色偷偷888欧美精品久久久| 国产福利精品视频自拍 | 麻豆精品久久久一区二区| 精品卡一卡二卡乱码高清| 亚洲伊人久久精品影院| 中文无码久久精品| 亚洲精品国产高清不卡在线| 天天视频国产精品| 完整观看高清秒播国内外精品资源 | 国产精品91av| 久久精品国产亚洲Aⅴ香蕉| 一区二区三区精品国产欧美| 国产亚洲精品国产| www国产精品| 国产精品一在线观看| 99国产精品久久| 国产成人精品日本亚洲11| 国产精品无码无卡在线播放| 精品无码国产一区二区三区AV| 日产精品一线二线三线芒果| 日韩国产精品无码一区二区三区| 无码国内精品人妻少妇| 久久久久99精品成人片欧美| 久久99精品久久只有精品| 国产午夜福利精品一区二区三区|