Vue + Flask + Nginx搭建自己的Blog

本着以项目驱动来学习Vue和Flask, 我搭建了一个自己的Blog. 下面贴上我实现的过程:

技术列表:

• 前端: Vue + Vuetify(UI框架)
• 后端: Flask + Orator(ORM框架)

技术细节:

前端:

• 安装Node.js(npm):

https://nodejs.org/

• 安装Vue CLI:

npm install -g @vue/cli

• 创建前端项目目录并添加依赖:

vue create client
cd client
vue add vuetify           #UI框架
npm install vue-router    #Vue前端路由
npm install vuex          #Vue状态管理
npm install axios         #Http Client工具, 主要用来与后端通讯

vuetify是我很喜欢的一个UI库, 文档大部分都有中文翻译(在右上角)

它有个预置布局可以让你配合vue-router快速搭建单页应用:

然后按照各个框架工具的文档完成前端部分, 前端的东西我也是个萌新, so此处省略一万字......

后端:

python的项目依赖管理工具一直都像个迷, 这里我选择的是Poetry

Python dependency management and packaging made easy.?python-poetry.org

按照官方文档说明安装完poetry和python, 接下来就是创建后端项目目录并添加依赖:

poetry new server
cd server
poetry add flask         #后端web框架
poetry add orator        #ORM框架
poetry add flask-cors    #解决前后端分离带来跨域问题的模块
poetry add gunicorn      #wsgi容器,用来运行flask项目

对于Flask,我采用了工厂模式, 项目结构如下:

/server
    /flaskr
        /__init__.py   #初始化flaskr app的文件,需要手动创建
        /__main__.py   #Debug阶段启动flaskr的文件, 需要手动创建
        /db.py         #定义数据库信息以配合Orator, 需要手动创建
        /route.py      #集中定义flask的路由, 需要手动创建
    /migrations        #迁移描述所在,由Orator创建
    /models            #后端模型所在,由Orator创建
    /flaskr.db         #项目所依赖的sqlite数据库,可由Orator自动生成
    /orator.yml        #Orator框架指定数据库信息的文件, 需要手动创建
    /poetry.lock       #依赖版本锁定文件, 由poetry自动创建
    /pyproject.toml    #项目描述文件, 由poetry自动创建

这里说一下Orator的使用:

orator make:model User -m

这个命令会同时创建名为User的model和对应的迁移文件, 第一次运行会同时创建models和migrations文件夹 (我使用Orator的一个最大的原因是我懒, 由于以前工作的时候用的Ruby ROR, 导致我对model需要描述table的字段感到很不爽,千寻万寻下发现了这个Python的ORM框架)

生成模型之后, 它默认继承于Orator未配置的Model, 所以我们要手动修改成配置好的Model

from flaskr.db import Model

被导入的db.py:

from orator import DatabaseManager, Model

db_file = 'flaskr.db'

config = {
    'sqlite': {
        'driver': 'sqlite',
        'database': db_file
    }
}

db = DatabaseManager(config)
Model.set_connection_resolver(db)    #这里的Model才是配置好的

代理服务器:

全部完成之后, 在服务器安装Nginx, 配置好证书, 我使用的是Let's Encrypt

https://letsencrypt.org/?letsencrypt.org

前端经过webpack打包会生成一个dist文件夹, 将location / 指向它:

location / {
                root /path/to/dist;    #这里填写自己的dist路径.
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }

再创建个static文件夹, 将location /static 指向它:

location /static {
                alias /path/to/static;
        }

然后用gunicorn运行flask app并绑定在指定端口,如5000.在nginx中配置 location /api 的反向代理, 指向服务器本地的5000端口:

location /api {
                proxy_redirect off;
                proxy_pass http://127.0.0.1:5000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

注意, 如果需要获取用户的真实IP, 需要使用请求头中的X-Forwarded-For, 而不是remoteaddr方法, 因为使用了反向代理服务器, 使用remote_addr得到的ip只会是反向代理服务器的ip也就是127.0.0.1.

最后附上项目上线的地址:

https://blog.gen.li/

项目源代码:

https://github.com/LeieXoyo/Blog