前后端分离项目的部署记录

前段时间使用 Vue Amin Template + Python Flask 提供 API 做了一个前后端分离的小项目。

这里简单记录一下部署过程中遇到的问题。

开发时是在 macOS 上开发的，部署是在 Ubuntu 12.04 上部署的。

各种配置

Nginx 配置

Nginx 用来做反向代理，转发前端发给后端的接口请求。安装部署都比较简单，可能主要因为项目比较简单，不需要什么特殊配置。

Mac下Nginx的安装和配置

常用命令
1
2
3
4
sudo nginx -s reload 部署一下
sudo service nginx restart 重启部署
sudo nginx -s stop && sudo nginx
sudo nginx -s reload
问题记录

本地 Mac 配置完以后没有问题，在服务器上配置的时候，有个问题，报错忘了记录了，似乎是默认的 80 端口访问出错。Google 了一下，Nginx 的 配置文件 /etc/nginx/sites-enabled/default 需要修改一下，改了一下端口，就 OK 了。

https://stackoverflow.com/questions/10829402/how-to-start-nginx-via-different-portother-than-80

前端打包部署

前端这块有几个问题， 接下来一段时间内应该不会再接触，没有去深究，简单记录一下问题。

问题记录
  • 打包使用 npm run build:prod
  • 打包出来的 dist 文件夹放到一个目录，根据自己的实际情况来，在 Nginx 的配置文件中设置对应的目录就可以了
  • modules 中的 user.js 有 login action，api 中的 user.js 有 auth/login, 本地调试没有问题。部署以后，这个接口有时候会发不出去。没有去深究原因，确定要研究 VUE 了，再来看这个问题
  • 跨域问题，直接使用 flask_cors 解决。似乎是加了一个响应头来解决的。修改 Nginx 的配置似乎也可以解决跨域问题， 回头再研究一下，再来更新
后端打包部署

因为只需要后端提供 API，这次开发直接使用 cookiecutter-flask-restful ，使用方便，快速生成项目，然后就可以开发了。

问题记录
1
2
3
4
5
6
# config.py 文件中增加以下两行代码
basedir = os.path.abspath(os.path.dirname('__file__'))
load_dotenv(os.path.join(basedir, '.flaskenv'))

ENV = os.getenv("FLASK_ENV")
DEBUG = ENV == "development"

  • pip 安装包时会提示下面这个错误

    1
    2
    3
    pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.

    Retrying (Retry(total=1, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError("Can't connect to HTTPS URL because the SSL module is not available.")'

    搜索试了几种方法，最终使用这篇文章里的方法解决 ssl issue，稍有不同的是，稍有不同的是 文章中修改的是 Modules/Setup.dist, Ubuntu 12.04 中修改的是 Modules/Setup (记不清了，懒得再看了, 回头看了再修改…)

其他
  • 通过跳板机上传文件的命令
1
scp -P 12345  -oProxyCommand="ssh -W %h:%p 跳板机user@host -p 12345" /Users/Downloads/abc.txt  target-machine-user@host:/home/abc.txt

收获

17 年也写过这种类似的小型项目，但是当时只是运行在自己的开发机上，没有部署经验。

这次开发之后，也进行了部署，算是积累了一些服务部署方面的经验。

后面看情况再完善下该文章，因为目前只是部署在测试服务器上，尚未部署在生产服务器上。