Vue+Flask部署到阿里雲服務器

本文用於記錄本身在阿里雲部署Vue+Flask組合的詳細過程。

在阿里雲部署Vue+Flask組合的前提是已經在本身電腦上成功部署，參考：https://minatsuki-yui.github.io/2018/01/04/vue&flask/?from=timeline

阿里雲ECS建網站基礎配置，參考：https://www.jianshu.com/p/2604e53a7f6a?from=singlemessage

Python環境配置

阿里雲服務器中已經存在Python2.7和Python3.5版本，默認Python環境是Python2.7，由於我須要使用的是Python3.5版本，因此須要將默認環境設置成Python3.5

使用alternatives機制修改默認Python環境

xshell裏執行

sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 150

執行後再執行python --version查看當前Python版本

root@heymiss:/usr/bin# python --version
Python 3.5.2

下面安裝pip，xshell裏執行

sudo apt-get update
sudo apt-get install pip

此時執行pip --version，pip已經安裝成功

root@heymiss:/home/dc/heymiss/heymiss-server# pip --version
pip 9.0.3 from /usr/local/lib/python3.5/dist-packages (python 3.5)

Flask環境配置

參考：http://www.pythondoc.com/flask-mega-tutorial/helloworld.html

root@heymiss:/home/dc/heymiss/heymiss-server# virtualenv --version
15.2.0

阿里雲服務器已經默認安裝了virtualenv，我沒有再在服務器上經過命令建立虛擬環境，而是將我本地項目已經建立好的虛擬境文件夾venv拷貝到服務器Flask項目下，而後經過命令激活。

root@heymiss:/home/dc/heymiss/heymiss-server# . venv/bin/activate
(venv) root@heymiss:/home/dc/heymiss/heymiss-server# 

經過xftp工具將本地Flask項目代碼拷貝到服務器Flask項目（heymiss-server）目錄下。

而後在虛擬環境激活的前提下安裝須要的模塊，例如：

root@heymiss:/home/dc/heymiss/heymiss-server# . venv/bin/activate
(venv) root@heymiss:/home/dc/heymiss/heymiss-server# pip install flask

配置Nginx、Gunicorn

nginx是一個高性能的HTTP和反向代理服務器。gunicorn是一個Python WSGI UNIX的HTTP服務器，可以與各類WSGI WEB框架協做。

在虛擬環境激活狀態下，安裝gunicorn。

pip install gunicorn

而後在入口文件的app.run()加上

from werkzeug.contrib.fixers import ProxyFix
app.wsgi_app = ProxyFix(app.wsgi_app)

加完後的內容如

#run.py
from app import app

if __name__ == '__main__':
    from werkzeug.contrib.fixers import ProxyFix
    app.wsgi_app = ProxyFix(app.wsgi_app)
    app.run()

而後命令行啓動gunicorn，gunicorn -w 4 -b 127.0.0.1:8080 入口文件名:app，須要注意的是須要切換到項目目錄（入口文件目錄）下執行命令。(本項目入口文件是run.py)

gunicorn -w 4 -b 127.0.0.1:8080 run:app

這樣就能夠啓動4個進程同時處理HTTP請求，提升系統的使用效率和性能。還能夠把端口8080改成其餘。

安裝nginx須要退出virtualenv的虛擬環境，在xshell下執行deactivate便可

(venv) root@heymiss:/home/dc/heymiss/heymiss-server# deactivate
root@heymiss:/home/dc/heymiss/heymiss-server# 

而後安裝nginx，

sudo apt-get install nginx

安裝成功後，切換到nginx目錄，

root@heymiss:/home/dc/heymiss/heymiss-server# cd /etc/nginx/sites-available/
root@heymiss:/etc/nginx/sites-available# 

先備份nginx的默認配置

sudo cp default default.bak

而後修改配置

root@heymiss:/etc/nginx/sites-available# vi default

修改爲如下內容並保存（須要熟悉簡單的vi操做指令）

server {
        listen 80; #阿里雲添加安全組規則端口80
        server_name 14.215.177.38; #域名或者公網IP
        root /home/dc/heymiss/data;
        index index.html;

        location / {
           root /home/dc/heymiss/data;
           try_files $uri $uri/ /index.html last;
           index index.html;
        }

}

server {
       listen 8081; #阿里雲添加安全組規則端口8081
       server_name 14.215.177.38; #域名或者公網IP

       location / {
          proxy_pass http://127.0.0.1:8080; #指向gunicorn host的服務器地址
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }

}

將14.215.177.38修改成本身的ip或者域名。配置修改完，檢查下配置。

root@heymiss:/etc/nginx/sites-available# nginx -t

若是出現如下內容，則配置成功。

root@heymiss:/etc/nginx/sites-available# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

配置成功後，啓動或重啓nginx。

sudo service nginx restart

Vue項目Build並上傳到服務器

使用WebStorm工具打開Vue項目，修改Vue項目中請求服務器的地址和端口，地址是阿里雲服務器的域名或IP，端口是在nginx配置的8081（能夠是其餘端口，有些端口備案後才能夠正常使用），修改config/prod.env.js內容（將'ip'換成正確的域名或IP地址）：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  URL_PATH: '"http://ip:8081"'
}

 

Vue項目中請求服務器接口示例：

this.$http.request({
     method: 'post',
     url: process.env.URL_PATH + '/test/',
     data: {
        //請求參數 
     }
     }).then(function (response) {
          
     })

此處使用的端口除了在nginx配置外，也須要在阿里雲後臺安全組規則中添加8081端口和80端口。

配置完成後，在WebStorm工具中按照下圖執行build操做

build操做完成後，會在項目dist文件夾下生成index.html文件和static文件夾，將dist文件夾下全部文件經過xftp工具上傳到服務器/home/dc/heymiss/data目錄下，該目錄必須保證和nginx配置目錄相同。

 

而後就能夠在瀏覽器中輸入域名或者IP訪問網站了。

輸入帳號和密碼，點擊「登陸」，登陸成功並跳轉。

以上內容大部分整理自互聯網，本人根據本身的實際需求稍加修改。