使用的技术

Gatsby、Strapi、Caddy、Docker

Strapi作为Headless CMS来使用，Gatsby 用作前端展示（Gatsby的数据交互主要使用GraphQL），Caddy用作反向代理，用Docker作为容器分别运行各个镜像。

碰到的问题

Strapi和gatsby在本地开发的时候用着都挺舒服，但是迁移到服务器把我折腾坏了，这俩的文档写的都挺详细，但是build起来就各种问题，一步一个坑。目前图像加载速度的问题就还没解决。

然后就是docker了，docker费了我最大的功夫，当然之前写网站也花了挺多精力，可是这两件事的体验感很不一样。从设计网站到写网站，一步一个脚印，所见即所得，成就感很足。docker就不一样了，由于我之前从来没用过，零基础，然后gatsby也没有官方镜像，得自己写Dockerfile，这可真是把我难为死了（你说我直接在服务器起服务就行了呗，就是爱瞎折腾啊），一开始使用node镜像发现太大了，然后用node:alpine，就各种依赖缺失，alpine很多依赖的安装不太好查，废了好多时间也没起起来，后来跟我一个后端朋友聊到这个，他教我先起个基础的镜像，然后再镜像内一步一步的安装依赖，最后把Dockfile完善起来，我是个很听劝的人，就这么干了。先用node:alpine发现各种问题，想着费那个劲干嘛，直接alpine搞起啊，按需安装它不香么。嗯，搞起，前面都挺顺利，最后一步卡住了，用CMD运行shell脚本权限各种不对，最后在docker-compose里解决了，but问题又来了，这个还好，就是gatsby起服务默认localhost，但实际得改一下，改成0.0.0.0。

总结一下吧，有些问题忘了记录：

  1. Gastsby 和 Strapi 都依赖 sharp这个图像处理工具，这个工具的依赖在alpine下装的很费劲，因为我用的国内服务器，得把alpine和yarn的源改成国内的，然后就是安装各种依赖（我一步步试出来的...）。Dockefile代码如下：
FROM alpine
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
RUN apk update && apk add yarn \
    && yarn config set registry https://registry.npm.taobao.org\
    && yarn global add node-gyp
RUN apk add autoconf automake libtool vips-dev g++ make nasm
  1. localhost改成0.0.0.0
  2. 在docker内运行shell脚本要记得加权限 chomd a+x
  3. strapi镜像的生产环境记得加（docker-compose.yml）:
environment:
      - NODE_ENV=production
  1. strapi修改一下配置，不然首页文件10多M。。。可以看下他们在Github上的Issue，官方文档的说明点这里，config文件夹下的middleware.js
module.exports = {
  settings: {
    gzip: {
      enabled: true,
      options: {
        br: false
      }
    }
  }
}
  1. caddy 可以自动添加TLS证书，我试了一下，虽然成功了但是chrome和Edge都显示不安全（可能是我配的不对）。然后本身服务器有免费的证书，我就用了免费的，现在你也看到了，是OK的，配一下路径就行。

使用体验

  • Strapi

其实还好，功能够用了，可以自定义字段，也可以关联字段。界面也还可以，有gatsby的插件可以直接用GraphQL拿数据。刚才也提到了一个问题，就是首页文件太大，加载有点慢，按照上面的方法仍然有2M多。

最近都在吹Ghost，我之前看他们官网，以为收费就没用，但其实在他们那里托管才收费，可以本地部署，以后可以试试。另外netlifycms托管确实方便，但我代码都写好了，也没用这个，它们外网加载速度一般，应该需要配CDN。

  • Gastaby

真香~我之前用Next.js写过一版官网，后来有事就搁置了，各有各的好。Gatsby有个很不错的地方就是直接可以用markdown作为数据源，这个很省事，我爱折腾就没用这个方案。

  • Caddy

caddy是真的方便，几行代码就搞定了。由于我的后端基础一般般，不想搞得太复杂，就用这个了。