Published on

Flask+Nginx博客容器化部署

Flask博客部署到云服务器完整流程

Reading Time

6 min read

2019.03.05 更新内容 0x08 HTTPS

2019.08.09 更新内容 使用构建好的 Docker 镜像

2019.12.04 更新内容 更新.env 配置内容

2020.05.19 更新内容 简化部署步骤

我是一个爱折腾的人，2016 年才开始学会自建博客，到现在博文没写多少篇却折腾了好几回。经历了 Hexo+GitHub Page，再到 Flask+Heroku，现在终于用上了国内云服务+Nginx，感觉速度快了很多。总结起来，使用 Flask+Nginx，好处有以下几个方面：

  • 可 DIY 程度高，现在我用的自己开发的 Markdown 引擎，非常方便扩展，在此推荐一下：Marko
  • 依靠 Nginx 强大的反向代理，现在我终于不用到处存图片然后贴一个巨长的 URL 了，直接映射到/images/下，干净整洁。
  • HTTPS 支持，可以用云服务购买的免费证书，也可以用 Letsencrypt，甚至可以用自签名证书。

我之前部署 Flask 的网站一直都用的 virtualenv，现在既然切到云服务器，就干脆换成用 Docker 了，隔离化程度更高，我也可以用现在最新版本的 Python 了。博客系统可拆分为三个部分：

  • Flask 应用，负责处理请求，是系统的核心
  • 数据库
  • Nginx 服务器

三个部分分别独立为一个容器。从一个全新的云服务器开始（以 Ubuntu Server 16.04.1 为例，其余系统类似），部署步骤如下：

0x00 添加用户

使用一个非 root 的用户是一个好习惯，需要自己添加：

# adduser fming
# echo "fming   ALL=(ALL:ALL) NOPASSWD: ALL" >> /etc/sudoers

然后切换到 fming 用户登录

0x01 安装 Docker

$ curl -fsSL https://get.docker.com -o get-docker.sh
$ sudo sh get-docker.sh

此脚本将自动将 Docker CE 安装到系统上，若安装失败，可尝试其他安装方法。安装完成后，需添加当前用户到 docker 组：

$ sudo usermod -aG docker $USER

0x02 安装 Docker-compose

Docker-compose 是一款 Docker 的工具，它能让你高效管理多个容器，否则需要加一大堆选项到 Docker 命令后。它同样提供了一个一键安装脚本（其他安装方法）：

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

0x03 创建本地环境配置

在代码根目录下（与docker-compose.yml同级）创建.env文件，主要是数据库相关的环境变量，请自行填写缺失变量：

SECRET_KEY=<服务器密钥>
FLASK_APP=flaskblog.app
FLASK_MAIL_USERNAME=<发送邮件使用的用户名>
FLASK_MAIL_SERVER=<发送邮件的SMTP/IMAP地址>
FLASK_MAIL_PASSWORD=<发送邮件的密码>
FLASK_MAIL_SENDER=<显示名称 <邮箱地址>>

GITHUB_CLIENT_ID=<GitHub OAuth2 Client ID>
GITHUB_CLIENT_SECRET=<GitHub OAuth2 Client Secret>
GOOGLE_CLIENT_ID=<Google OAuth2 Client ID>
GOOGLE_CLIENT_SECRET=<Google OAuth2 Client Secret>
POSTGRES_USER=xxx
POSTGRES_PASSWORD=xxx
POSTGRES_DB=flog_db
DB_SERVICE=db
DATABASE_URL=postgresql+psycopg2://xxx:xxx@db:5432/flog_db
CERTBOT_EMAIL=<Your Email Address>

使用db就可以指代数据库容器的服务地址了。

注意：.env和./nginx/cert（证书目录）不可提交到版本控制平台上。

0x04 构建静态文件

博客的后台部分用到了 Vue.js + ElementUI，需要构建静态文件，使用起来也很简单：

$ cd static
$ npm i
$ npm run build:prod

0x05 Nginx 配置

在上一节的配置中可以看到我把 Nginx 的配置文件映射到了./nginx/conf.d/default.conf中。编辑该文件，修改servername为你的域名，ssl 开头的部分暂时不变，我们会在后面修改它。配置的一些说明：

主站

location / {
	proxy_pass http://web:5000;
	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

配置静态文件缓存

proxy_temp_path /tmp/temp_dir;
proxy_cache_path /tmp/cache levels=1:2 keys_zone=mycache:100m inactive=1d max_size=10g;
server {
...
location /static {
	alias /opt/static;
	proxy_set_header Host $host;
	proxy_cache mycache;
	expires 30d;
}

我之前已经把静态文件映射到 Nginx 容器中的/opt/static了。

0x06 启动容器

好了，万事俱备，现在可以启动容器了！转到仓库所在目录：

$ docker-compose up --build -d

拉取镜像，构建镜像，启动容器，一条命令足矣！一切都没有问题的话，你的网站已经跑起来了。

请参考此博客的 GitHub获取完整配置。

现在，你的博客已经启用 HTTPS 了，地址栏前面会出现一个锁标志，可以到Qualys SSL Labs检测你的网站安全分数。 我的是A+

更多阅读：LET'S ENCRYPT 给网站加 HTTPS 完全指南

0x07 初始化博客

第一次启动博客，请先到 <your domain>/admin/#/settings设置你的博客。

Share: