用 Nuxt3+Strapi 重构博客，第一章：搞个CMS，用Strapi 现出你原来的样式

准备CMS
- 快速安装
- ‼️‼️重要
- 增加插件[可选]
- 构建镜像
- 部署
总结

国内因网络环境，没有交流属性的个人站点，个人站点玩的意义真的很小，所以我的博客也更多的也只是充当简历的作用。因现公司是用nuxt2开发的资讯类网站，网站现阶段性能上有一定的瓶颈与历史遗留问题，刚好最近没啥练手的东西，就拿博客来做重构可行性分析。

准备CMS

博客的内容管理，调研了一下，懒的自己写，刚好之前就想玩一玩的Strapi的CMS系统，功能强大且自由度高，管理UI还好看。

快速根据文档起始项目。因无官方docker镜像直接使用，需要自行创建项目并打包成镜像。个人感觉这个项目可重复使用率蛮高的，可以安装上自己喜欢的插件后构建镜像到自己的镜像库中。

快速安装

根据参考文档快速初始化一个 Strapi 项目。

 yarn create strapi-app strapi
 // choose options

‼️‼️重要

安装好后大部分的配置都不用动。

我选择是mysql做为数据源，所以中需要注意配置下数据库的编码格式设置，否则保存内容包含中文会报错。
将编码与编码集合分别设置为 utf8mb4 与 utf8mb4_unicode_ci，用其它数据源的也可上网查一下相关编码问题

// config/database.js
// ...
  mysql: {
    connection: {
      connectionString: env('DATABASE_URL'),
      host: env('DATABASE_HOST', 'localhost'),
      port: env.int('DATABASE_PORT', 3306),
      database: env('DATABASE_NAME', 'strapi'),
      user: env('DATABASE_USERNAME', 'strapi'),
      password: env('DATABASE_PASSWORD', 'strapi'),
      charset: 'utf8mb4', // 将编码与编码集合分别设置为`utf8mb4`与`utf8mb4_unicode_ci`
      collation: 'utf8mb4_unicode_ci',
//...

增加插件[可选]

strapi-plugin-local-image-sharp

如果使用云存储就随意

可以通过 yarn add strapi-plugin-local-image-sharp 增加此插件，为 Media 库增加高性能的图片处理能力

问问阿Chat AI：nodejs 的 sharp 特性 Sharp 是一个 Node.js 中的一个图像处理库，它具有以下特性：

高性能：Sharp 使用 C 语言实现了图像处理的核心逻辑，因此它的性能比较高。

轻量级：Sharp 的代码体积非常小，只有几十KB，非常适合用于Node.js 应用程序。

易于使用：Sharp 提供了一个简单易用的 API，可以帮助开发者快速地实现图像处理功能。

支持多种图像格式：Sharp 支持多种图像格式，包括 JPEG、PNG、GIF、BMP、TIFF 等。

可扩展：Sharp 可以通过加载其他的模块来扩展其功能，例如可以加载一个模块来支持 WebP 格式。

支持图像 filters：Sharp 支持多种图像 filters，例如 Gaussian 滤波、 median 滤波、阈值滤波、缩小细节、延伸等。

支持图像 adjustment：Sharp 支持多种图像调整功能，例如亮度调整、对比度调整、饱和度调整等。

支持图像生成：Sharp 支持生成图像，可以将数据、随机数据等转换成图像。

支持图像读取和写入：Sharp 可以读取和写入多种图像格式，可以将图像数据保存到文件中或者图像数据从文件中。

可以用于服务端和客户端：Sharp 可以用于服务端和客户端，可以在 Node.js 服务端上使用来实现图像处理功能，也可以在客户端上使用来实现图像处理功能。总之，Sharp 是一个功能强大且易于使用的 Node.js 图像处理库，适合各种图像处理需求。

构建镜像

在项目根目录新建Dockerfile文件并复制 Strapi Docker安装文档的 Dockerfile 源码注意文件名 Dockerfile 大小写不要写错，写错默认 docker build 会失败。

# Dockerfile
FROM node:18-alpine
# 为alpine增加镜像源加快基础服务安装速度
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories
# Installing libvips-dev for sharp Compatibility
RUN apk update && apk add --no-cache build-base gcc autoconf automake zlib-dev libpng-dev nasm bash vips-dev
ARG NODE_ENV=development
ENV NODE_ENV=${NODE_ENV}

WORKDIR /opt/
COPY package.json yarn.lock ./
RUN yarn config set network-timeout 600000 -g && yarn install
ENV PATH /opt/node_modules/.bin:$PATH

WORKDIR /opt/app
COPY . .
RUN chown -R node:node /opt/app
USER node
RUN ["yarn", "build"]
EXPOSE 1337
CMD ["yarn", "develop"]

通过 CICD 构建自己的 Strapi 镜像

# .drone.yml
kind: pipeline
type: docker
name: drone

trigger:
  branch:
    - master

steps:
  - name: build
    image: plugins/docker
    settings:
      registry: registry.cn-hangzhou.aliyuncs.com
      username:
        from_secret: ALIYUN_DOCKER_USR
      password:
        from_secret: ALIYUN_DOCKER_PWD
      auto_tag: true
      repo: registry.cn-hangzhou.aliyuncs.com/[命名空间]/strapi
      tags: 
        - ${DRONE_BUILD_NUMBER}
        - latest

或手动构建

  docker build . -t registry.cn-hangzhou.aliyuncs.com/[命名空间]/strapi
  docker login registry.cn-hangzhou.aliyuncs.com # 登陆
  docker push registry.cn-hangzhou.aliyuncs.com/[命名空间]/strapi

部署

#docker-compose.yml
version: "3.5"
services:
  backend:
    container_name: blog-be
    image: registry.cn-hangzhou.aliyuncs.com/kwokronny/strapi:latest
    restart: unless-stopped
    environment:
      DATABASE_CLIENT: mysql
      DATABASE_HOST: MySql
      DATABASE_PORT: 3306
      DATABASE_NAME: ${DATABASE_NAME}
      DATABASE_USERNAME: ${DATABASE_USERNAME}
      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
      API_TOKEN_SALT: ${API_TOKEN_SALT}
      JWT_SECRET: ${JWT_SECRET}
      ADMIN_JWT_SECRET: ${ADMIN_JWT_SECRET}
      TRANSFER_TOKEN_SALT: ${TRANSFER_TOKEN_SALT}
      APP_KEYS: ${APP_KEYS}
      NODE_ENV: production
    ports:
      - "1337:1337"
    volumes:
      - ./config:/opt/app/config
      - ./src:/opt/app/src # 重要，存储你的CMS数据结构
      - ./public:/opt/app/public #上传目录，如果你用云存储就随意
    networks:
      - strapi

  strapiDB:
    container_name: strapiDB
    image: mysql:5.7
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_USER: ${DATABASE_USERNAME}
      MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD}
      MYSQL_PASSWORD: ${DATABASE_PASSWORD}
      MYSQL_DATABASE: ${DATABASE_NAME}
    volumes:
      - strapi-data:/var/lib/mysql
    ports:
      - "3306:3306"
    networks:
      - strapi

volumes:
  strapi-data:

networks:
  strapi:
    name: strapi

编排任务上架

docker-compose up -d

完成后即可通过访问 宿主IP:1337/admin 进入CMS内容管理平台的后台了。

总结

安装过程还是很简单的，有了 Strapi 之后基础的 CURD 与表关联的任务、用户权限、文件管理等能力都能满足了。