本文用於記錄自己在阿里雲部署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訪問網站了。
輸入賬號和密碼，點擊“登錄”，登錄成功並跳轉。
以上內容大部分整理自互聯網，本人根據自己的實際需求稍加修改。