flask+vue全栈部署方式

新公司项目技术栈用的falsk+vue，在这里记录一下部署方式，以备以后回顾。
我这边的是用systemctl+nginx+gunicorn+virtualenv的架构进行部署的。大概介绍一下，systemctl是一个后台进程管理的工具，nginx是进行反向代理的工具，gunicorn是一个 Python 的高性能 WSGI HTTP 服务器。
ps：上面的介绍也只是简介，详细资料可自查。这种时候，我总会想起来我初中历史老师说了“中国开始沦为半殖民地半封建社会”后，却从不解释什么是“殖民地”而我又不懂却只是硬记的感觉。但以前考研时看了张宇的视频，他说了一句话，让我受益颇深。他说当一节课上说了某个不懂的概念，先别深究，记录下来；在接下来的课程中都要有一种默认该理论成立的的潜意识；那么需要该理论所推导得出的其他结论自己也能理解了；在课后再找时间去理解那个理论……
好了，碎碎念完毕，说正事！（下面有ps的都是写文章时内心的小九九，和本文主题无关）

项目准备

感觉项目准备这里好多细枝末节的东西，可以直接跳过这part。

后端flask

后端的话是使用flask，先用pycharm创建一个最小的flask应用。在创建flask应用时选择使用virtualenv作为虚拟环境。但是谨记虚拟环境要放在项目外的地方
ps：新公司用的virtualenv需要自行找地方存放，感觉好不方便。至于为什么要另外找地方是因为更新项目代码时不需要把虚拟环境也搞乱了。（找个时间自行对比一下我最爱的pipenv和virtualenv的区别）

1. 创建flask项目
   我把项目命名为csdnblog,虚拟环境csdnblog_venv放在和项目的同一级目录下。然后点击create。
   
2. 在命令行里执行下下面语句生成requirements.txt文件，可以记录安装的python包

pip freeze > requirements.txt

执行完后项目结构如下图：

3. 修改请求地址
在app.py唯一的试图函数里，把路由改为:

@app.route('/api')

加多一个api的原因是为了方便nginx做路由的转发，用来区分来自前后端的请求。

好了，简单的后端就这样了，接下来看前端

前端vue

1. 在csdnblog项目根目录下创建一个front目录，用来放置前端代码
   其实开发中后端代码也是放在back文件夹下面的，不过现在为了方便记录就没放，顺带删了后端没用的static和template文件夹
   

2. 新建一个vue项目在front里
   因为我pycharm装了个vue插件，直接在pycharm里新建vue项目了
   

3. 在终端进入front文件夹下，执行npm install vue-axios安装axios
   

4. 在src目录下新建utils文件夹，然后在utils下新建requests.js文件，在requests里如下简单封装一下axios。baseURL是我服务器的域名。

// 对于axios进行二次封装
import axios from "axios";

// axios.defaults.withCredentials = true

// 1.利用axios对象的方法create，去创建一个axios实例
const requests = axios.create({
    // 配置对象
    // 基础路径，发请求的时候
    baseURL: 'http://myurl.com',
    // 代表请求超时的时间5s
    timeput:5000,
})

// 对外暴露
export default requests;

5.创建接口调用
在src目录下，创建api文件夹，然后在api文件夹下创建helloworld.js文件，helloworld.js里写前端的接口调用。

import request from "../utils/request";

export function getmsg(params) {
  return request({
    url: `/api`,
    method: 'get',
    params
  })
}

6. 接着是修改项目本身创建的helloworld.vue和app.vue
HelloWorld.vue

<template>
  <div class="hello">
    <button @click="handleMsg">获取msg</button>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import {getmsg} from "@/api/helloworld";

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg:''
    }
  },
  methods: {
    handleMsg() {
      getmsg().then(res => {
        this.msg = res.data
      })
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

7. 接下来在终端front目录下给vue项目打个包
   npm run build
   可以看到build目录下出现了一个dist文件夹
   

好了，前端方面也准备好了

安装gunicorn

执行：pip3 install gunicorn

解决跨域

1. 安装flask-corspip3 install flask-cors
2. 在app.py里添加如下代码：

from flask_cors import CORS
CORS(app, supports_credentials=True)

如下图，注意位置：

项目上传到服务器（虚拟机也行）

上传到git

阿这，跳过……
(反正我的项目地址在这了：https://github.com/LuGuanzong/csdnblog.git）

克隆到自己制定的文件夹

我克隆在了projects文件夹下。放在哪里不重要，这里说文件夹名字只是为了待会好分辨虚拟环境路径

配置虚拟环境

安装virtualenv
pip3 install virtualenv

生成虚拟环境

下面的命令生成虚拟环境，后面是虚拟环境的路径（我进入了项目根目录，然后把虚拟环境创建在项目根目录的上一级目录，即projects文件夹下）
virtualenv ../csdnblog_venv

激活虚拟环境

进入项目目录，执行：
source ../csdnblog_venv/bin/activate
可以看到命令行前面出现了一个括号括着的刚刚创建的虚拟环境名字，那么此时我们的虚拟环境就启动成功了；所安装的依赖不会污染到全局环境中。

安装第三方库

安装requirements.txt里面指定的包，执行：
pip3 install -r requirements.txt
现在我们就已经得到和本地开发时一样的虚拟环境了。
为了防止之后环境不对，我们接下来的操作都在虚拟环境中吧～

配置nginx

首先，先安装nginx，跳过……
对nginx进行配置，配置文件一般在/etc/nginx/nginx.conf,执行：
sudo vi /etc/nginx/nginx.conf
进入后在http的大括号内编辑,第二个location表示请求里有/api的转发到服务器的5000端口，第一个location里面表示除带api外所有请求都转发到vue包，如下：

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
                root /root/projects/csdnblog/f	ront/dist;
                index index.html;
                try_files $uri $uri/ /index.html;
        }  

        location ^~/api {
                proxy_pass http://127.0.0.1:5000;
        }

    }

可能大家会问疑惑为啥我终端颜色变了，后面可能还会发现我主机名也变了。。。这是因为我也是边配置边写，刚刚发现谷歌缓存了我以前的网站信息，我还以为我配置错了，左搞又搞没搞出来。一气之下重装镜像了，后面发现是清楚缓存就可以了。现在连python版本是3.6我都忍了，就为了写完这个。。。tmd
虽然系统都换了，但操作也是基本一样的。建议改配置文件前先备份。

改完nginx配置之后，查看配置语法是否错误，无误的话让nginx重新加载配置启动：
nginx -t
sudo nginx -s reload

好了，一个完整的项目就这样子了，我们可以在项目根目录下执行下面的命令尝试启动flask。

gunicorn -w 2 -b 127.0.0.1:5000 app:app

接下来要配置后台进程管理

配置service

详细可查看这篇博客，反正就是像supervisor一样的东西，有时间也看看这个和supervisor的区别
首先查看systemctl管理状态（随便看一眼就行，没啥大作用）
systemctl status
然后按q键退出
进入/usr/lib/systemd/system
cd /usr/lib/systemd/system
创建并编辑一个csdnblog.service的文件，内容如下：

[Unit]
Description=test flask_and_vue

[Service]
WorkingDirectory=/root/projects/csdnblog/
ExecStart=/root/projects/csdnblog_venv/bin/gunicorn -w 2 -b 127.0.0.1:5000 app:a
pp
Restart=always

[Install]
WanteBy=multi-user.target

配置好之后就启动服务sudo systemctl start csdnblog
启动后再查看systemctl status，发现我们的项目已经纳入systemctl管理中了

为了让我们的项目可以开机启动，执行下面命令
sudo systemctl enable csdnblog.service

好了，完结了，上面的各项内容都是一切从简。深入理解还是要看文档。