网站建设

从无到有网站搭建全过程：Vue+Flask+Mysql阿里云服务

2019-07-14  本文已影响0人  走错说爱你

环境说明

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

阿里云配置

点击那个数字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
  1. 现在设置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保存并退出

  1. 通过如下命令进入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

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


    导出数据库

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


    导入数据

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


    查看数据

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

虚拟环境配置

  1. 首先安装虚拟环境，执行以下命令
pip3 install virtualenv
pip3 install virtualenvwrapper
  1. 编辑bashrc文件：
vi ~/.bashrc

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

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

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

  1. 执行以下命令，使配置生效：
source ~/.bashrc
  1. 创建虚拟环境：
mkvirtualenv -p python3 虚拟环境名称
  1. 执行下述命令，进入虚拟环境（如果不知道虚拟环境名，可以输完workon 点击两下tab键既可以提示你的虚拟环境名），之后所有操作均在该环境中进行：
workon 虚拟环境名称

nginx配置

  1. 输入命令，即可直接安装nginx：
sudo apt-get install nginx

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

  1. 编辑配置文件：
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的端口必须在阿里云添加安全组规则

  1. 执行命令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
  1. 执行命令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()

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

  1. 在本地项目根目录下执行以下命令把所有需要下载的pip 名带出成文件：
pip freeze > requirements.txt
  1. 将本地的项目文件拷贝到服务器上（back_code为项目文件夹的名字，-r表示将文件夹里面的所有文件都复制过去）：
scp -r back_code root@IP地址:~/
  1. 在服务器执行以下命令进入项目文件夹：
cd back_code
  1. 执行以下命令安装flask：
pip3 install flask
  1. 安装项目依赖
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"'
}
  1. 修改文件当中的数据请求地址为服务器地址（注意端口为上面配置nginx时设置的端口，这里为8080）
  2. 在项目根目录下运行以下命令：
npm run build
  1. 将dist文件夹里的所有文件拷贝至服务器的/var/www/html/中，确保和配置的路径一致

配置完成

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

上一篇下一篇

猜你喜欢

热点阅读