内容型网站后端一把梭

Web 全栈工程师经常遇到一些内容型网站的开发需求,比如个人博客、机构官网、新闻门户。这些虽是 Web 1.0、2.0 时代就烂大街的典型 Web-site,但面对不同的甲方,看似雷同的需求往往又有各种细节的定制化。

虽然 WordPress、Discuz!X 等建站系统早已非常成熟,但在人们更看重 UI/UX 设计的今天,它们专用的模板引擎反而成了二次开发最大的障碍。只要是近两年做过 Web 前端开发的同学就知道,不能利用基于 Node.js 的现代化工具链的项目,开发起来有多蛋疼。

Web 前后端分离催生了 Web 前端岗位,也让 WordPressGhost 这些老牌 CMS 系统开放了 RESTful API。但有的开源项目做得更加激进 —— Headless CMS,前台界面都省了,只有后端 API后台界面,普通用户看啥你们自己写~

这其中最为优秀的便是 Strapi,因为它的后台设计不局限于传统的博客、门户,而是:

  1. 数据模型灵活可配置(可用 Git 管理 JSON 配置文件)
  2. RESTful API 完全支持 CRUD(增删查改)和 RBAC(角色权限)
  3. 自身是个标准的 Node.js 后端项目,并有留有二次开发接口
  4. 包括 Swagger Documentation 在内的插件生态

这使得它既像 BaaS 中的 LeanCloud,又像 Python 开发框架 Django,在简单易用的同时,又不束缚专业开发者。

本地开发

创建项目

以下命令会一键创建项目骨架安装依赖包启动开发模式

npm init strapi-app ~/my-project --quickstart

开发模式启动

下次继续开发时,则执行以下命令:

cd ~/my-project
npm run develop

如果执行 npm start,启动的后台系统只能添加数据,不能修改数据结构,是线上生产模式。

创建代码库

在 GitHub 上创建代码库后,把生成的代码传上去:

git init
git remote add origin https://github.com/my-id/my-project.git
git add .
git commit -m "[add] Strapi framework"
git push

服务器部署

下面以 Linux (Ubuntu 18.04) 为例,简介线上部署。

安装容器环境

# 安装 Docker
curl -fsSL https://get.docker.com | sh
# 安装 Python pip
apt install python-pip
# 安装 Docker Compose
pip install docker-compose

初始化 Git

为了后面自动化部署的方便,需要生成好 SSH 密钥对

# 生成 SSH Key
ssh-keygen -t rsa -b 4096 -C "[email protected]"

cd ~/.ssh
# 添加 SSH Key 私钥
ssh-add id_rsa
# 信任 SSH Key 公钥
cat id_rsa.pub > authorized_keys

并将上述公钥添加到 https://github.com/my-id/my-project/settings/keys 页面。

如此,便可无需用户名、密码,直接克隆代码库:

git clone [email protected]:my-id/my-project.git /var/www

部署配置文件

将以下两个文件放在代码库相应路径中,并提交:

Docker 服务编排

~/my-project/docker-compose.yml

version: '3'

services:
  strapi:
    image: strapi/strapi
    volumes:
      - ./:/srv/app
    ports:
      - '80:1337'
    environment:
      - NODE_ENV=production

以上配置的是最简单的 SQLite 数据库,小型网站完全足够。

GitHub Actions 持续部署

以下配置让我们无需每次更新 Strapi 配置、代码时,登录服务器手动部署新版本:

~/my-project/.github/workflows/main.yml

name: Deploy Server
on:
  push:
    branches:
      - master
jobs:
  SSH:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/[email protected]
      - name: Deploy
        uses: appleboy/ssh-[email protected]
        with:
          host: ${{ secrets.HOST }}
          username: root
          key: ${{ secrets.SSH_KEY }}
          script: |
            cd /var/www
            git fetch --all
            git reset --hard
            git pull
            docker-compose down
            docker-compose up -d

【注意】在推送代码前,务必去 https://github.com/my-id/my-project/settings/secrets 页面创建好上述配置中的变量:

名称 内容
HOST 服务器 IP 地址
SSH_KEY ssh-keygen 命令生成的私钥,通常存在 ~/.ssh/id_rsa

总结

经过前面的一顿折腾,开发者只需在本机浏览器中点点鼠标、轻敲键盘,就能实现网站数据结构的设计;推送代码到 GitHub,就能实现网站后台的更新。而运营专员访问的线上后台锁定了数据结构,他们只能在现有数据表中添加具体数据。这样一来,面对单纯的数据存取,后端 API后台 UI 都不用开发了~

【后台操作视频】

参考文档

  1. https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent
  2. https://docs.docker.com/engine/install/ubuntu/#install-using-the-convenience-script
  3. https://yq.aliyun.com/articles/514624
  4. https://strapi.io/documentation/3.0.0-beta.x/installation/docker.html

上一篇
「像素级还原」的误解 「像素级还原」的误解
freeCodeCamp 中文社区 首次直播分享会 互联网公司“金句” 这个很简单,技术我不懂,明天我就要! —— 产品经理 前端应该“像素级还原”设计图! —— UI 设计师 Web 前端开发的真相 几乎不用“像素”这个
2020-05-22
下一篇
安徒生童话:技术人的群聊 安徒生童话:技术人的群聊
加过技术群的同学想必听过一句话 —— 技术人不谈政治~ 不少群公告还直接明文规定 —— 不要讨论敏感话题! 最初我以为,大家真的不喜欢探讨政治,直到最近我所在的 FCC 成都社区遭受一次网络暴力…… 事件原文前两天我的一篇技术博文被
2020-04-01