环境说明

最开始是在本地已经实现的一个前后端分离的项目（教程以后再写），分别使用了：

• 前端：Vue框架
• 后台： Python 3 + Flask框架
• 数据库： Mysql，使用navicat可视化管理工具
• 开发环境： Windows 7
• 服务器：Wamp

阿里云配置

• 首先注册一个阿里云账号，这里使用邮箱注册
• 然后登陆账号，购买域名（过程略）
• 购买云服务器（过程略），这里购买的服务器的操作系统是ubuntu 16.04，购买的服务器可以通过进入云服务器ESC查看：
  云服务器

点击那个数字1，就可以查看自己服务器的详细信息，这里重点查看ip地址，后面会用到：

服务器详细信息

云服务器安全组配置

• 在服务器详情页依次点击更多-网络和安全组-安全组配置：
  

  安全组配置

• 点击配置规则：
  

  配置规则

• 添加安全组如下：

  
  添加安全组

域名解析

• 进入域名控制台，查看到自己购买的域名，点击解析
  查看域名
• 点击新增记录，新增两条记录：
  域名解析
• 然后等待即可，可以使用官方提供的方法查看是否解析成功

服务器配置

进入服务器

下载并安装xshell或者git，这里使用的是git：
在桌面，点击右键，单击git bash here打开命令行工具（xshell直接打开软件即可）：

git bash
输入命令ssh root@你的服务器IP地址，敲击enter键，这里会让你输入密码，输入自己的服务器密码再次enter即可（注：linux系统输入密码没有任何显示，这不是bug，是故意设定成这样的），如果登陆成功，会显示：
登录服务器
此后大部分操作都在这里面进行

python版本配置

阿里云服务器中已经存在Python2.7和Python3.5版本，默认Python环境是Python2.7，因为我需要使用的是Python3.5版本，所以使用alternatives机制修改默认Python成Python3.5
输入命令：

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@iZuf63gpxv4kgz83iid4ewZ:~# python --version
Python 3.5.2

下面安装pip，执行命令

sudo apt-get update
sudo apt-get install python3-pip

此时执行pip3 --version，pip已经安装成功

root@iZuf63gpxv4kgz83iid4ewZ:~# pip3 --version
pip 8.1.1 from /usr/lib/python3/dist-packages (python 3.5)

Mysql配置

1. 首先执行下面三条命令：

sudo apt-get install mysql-server
sudo apt isntall mysql-client
sudo apt install libmysqlclient-dev

期间会让你两次输入密码，该密码即是mysql的登录密码
安装成功后可以通过下面的命令测试是否安装成功：

sudo netstat -tap | grep mysql

出现如下信息证明安装成功：

root@iZuf63gpxv4kgz83iid4ewZ:~# sudo netstat -tap | grep mysql
tcp6       0      0 [::]:mysql              [::]:*                  LISTEN      2452/mysqld

2. 现在设置mysql允许远程访问，首先编辑文件/etc/mysql/mysql.conf.d/mysqld.cnf，运行如下命令：

sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf

敲击i进入编辑模式，找到bind-address = 127.0.0.1，并在该句代码之前添加#注释该行代码：

修改配置文件

按下esc键，输入:wq保存并退出

3. 通过如下命令进入MySQL服务：

mysql -uroot -p你的密码

执行授权命令：

grant all on *.* to root@'%' identified by '你的密码' with grant option;
flush privileges;

然后按住ctrl+Z退出mysql服务，执行如下命令重启mysql：

service mysql restart

现在在Windows下可以使用navicat远程连接Ubuntu下的MySQL服务，新建连接如下：

远程连接mysql

4. 找到本地要导出的数据库，右键，选择导出为sql文件-结构和数据

   
   导出数据库

5. 在刚刚建立的连接里新建一个和之前一样的数据库，右键导入数据，文件选择之前导出的sql文件：

   
   导入数据

6. 在表那里右键刷新，即可看到导入的数据

   
   查看数据

至此，数据库已经配置完毕

虚拟环境配置

1. 首先安装虚拟环境，执行以下命令

pip3 install virtualenv
pip3 install virtualenvwrapper

2. 编辑bashrc文件：

vi ~/.bashrc

按下i键，在末尾添加以下代码：

export WORKON_HOME=$HOME/.virtualenvs
export PROJECT_HOME=$HOME/workspace
source /usr/local/bin/virtualenvwrapper.sh

添加完毕按下esc键，输入:wq保存并退出

3. 执行以下命令，使配置生效：

source ~/.bashrc

4. 创建虚拟环境：

mkvirtualenv -p python3 虚拟环境名称

5. 执行下述命令，进入虚拟环境（如果不知道虚拟环境名，可以输完workon 点击两下tab键既可以提示你的虚拟环境名），之后所有操作均在该环境中进行：

workon 虚拟环境名称

nginx配置

1. 输入命令，即可直接安装nginx：

sudo apt-get install nginx

在本地浏览器输入云服务器IP地址或者域名地址可以看到nginx欢迎字样即为安装成功（如果输入IP地址能看到而域名地址看不到就说明域名解析出了问题）。

2. 编辑配置文件：

vi /etc/nginx/sites-available/default

修改如下：

# 如果是多台服务器的话，则在此配置，并修改 location 节点下面的 proxy_pass 
#upstream flask {
#        server 127.0.0.1:5000;
#        server 127.0.0.1:5001;
#}
server {
        listen 80; #阿里云添加安全组规则端口80
        server_name 域名或者公网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 8080; #阿里云添加安全组规则端口8080
       server_name 域名或者公网IP; 

       location / {
          proxy_pass http://127.0.0.1:5000; #指向gunicorn host的服务器地址，即后台程序的端口
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }

}

注意：server当中listen的端口必须在阿里云添加安全组规则

3. 执行命令nginx -t查看是否配置成功，出现以下信息则成功：

root@iZuf63gpxv4kgz83iid4ewZ:~# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

4. 执行命令sudo service nginx restart重启nginx

安装gunicorn

执行以下命令：

pip3 install gunicorn

后台项目部署

1. 在项目的入口文件加两行代码，加完之后如下：

#run.py
from app import app

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

并修改文件里的数据库信息使之与服务器的数据库信息一致

2. 在本地项目根目录下执行以下命令把所有需要下载的pip 名带出成文件：

pip freeze > requirements.txt

3. 将本地的项目文件拷贝到服务器上（back_code为项目文件夹的名字，-r表示将文件夹里面的所有文件都复制过去）：

scp -r back_code root@IP地址:~/

4. 在服务器执行以下命令进入项目文件夹：

cd back_code

5. 执行以下命令安装flask：

pip3 install flask

6. 安装项目依赖

pip3 install -r requirements.txt

运行和结束项目

运行项目：

gunicorn -w 2 -b 127.0.0.1:5000 运行文件名称:Flask程序实例名 -D

其中-w表示进程（worker），-b表示绑定ip地址和端口号（bind），-D表示后台运行（在末尾加上-preload即可在报错时查看详细的报错信息）

结束项目：

ps -aux |grep gunicorn

kill -9 对应最小的进程号

前端项目部署

1. 修改文件config/prod.env.js内容（将'ip'换成正确的域名或IP地址）：

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

2. 修改文件当中的数据请求地址为服务器地址（注意端口为上面配置nginx时设置的端口，这里为8080）
3. 在项目根目录下运行以下命令：

npm run build

4. 将dist文件夹里的所有文件拷贝至服务器的/var/www/html/中，确保和配置的路径一致

配置完成

完成以上步骤即可打开浏览器输入你的域名或者服务器IP访问网站了。期间遇到许多问题，解决方法如下：

• 后台运行不成功，主要是因为nginx的配置中的端口和gunicorn的运行端口不一致，正确的关系为：

  
  前后端配置的关系
• 运行后台程序，数据库报错(1045, "Access denied for user 'root'@'localhost' (using password: NO)")，主要是程序当中数据库密码填写错误，修改不全导致，可以在gunicorn运行时在末尾加上-preload查看错误信息，找到具体报错的原因
• 程序在本地不报错，在服务器运行报错TypeError: the JSON object must be str, not 'bytes'，发现是python版本导致的语法错误，解决方法为将bytes数据decode为str