开发

关于部署本站的一些说明

如果你想使用本站的样式和结构的话

2023年3月26日
关于部署本站的一些说明
本文共有752字，预计阅读时间3分钟
也是出乎我的意料，竟然真的有人想把本站的代码跑起来。但是这个项目是完全按照我的需求打造的，也不是一个开箱即用的方案，直接clone是跑不起来的。
于是本文做一个简单说明，介绍一下如何让本站代码运行起来。如果你想完全拷贝本站的结构和设计，可以遵从本文的说明。

Strapi端

本站数据源依赖于Strapi，你需要先运行起一个Strapi实例。
如何运行起一个Strapi实例，此前有过介绍：《如何部署一个Strapi服务器》。
建议你直接clone本站Strapi的代码：koktohay-cms，这样会把数据结构也一起拷贝，Next那边就不会报错。
把网站迁到腾讯云后，Strapi的数据库就被我改成了MySQL。如果你想用其他数据库，修改config/database.ts文件：
1export default ({ env }) => ({
2
3 connection: {
4   client: 'mysql',
5   connection: {
6     host: env('DATABASE_HOST'),
7     port: env.int('DATABASE_PORT'),
8     database: env('DATABASE_NAME'),
9     user: env('DATABASE_USERNAME'),
10     password: env('DATABASE_PASSWORD'),
11     ssl: env.bool('DATABASE_SSL'),
12     charset: 'utf8mb4',
13     collation: 'utf8mb4_unicode_ci',
14   },
15 },
16});
Client填写数据库，其他变量在.env里设置。charset和collation是MySQL相关设置，PostgreSQL不需要。更多设置建议参考Strapi官方文档：Database configuration。
将你的数据库相关信息写入Strapi项目的环境变量，就可以启动Strapi了。
登录http://localhost:1337，创建管理员帐号，会发现数据类型已经添加。最好添加一些内容进去。
Strapi已经运行，暂时不用管它了。

Next端

clone本站Next代码：koktohay-next。
进入文件夹，创建.env文件：
1NEXT_PUBLIC_STRAPI_URL=api地址
2NEXT_PUBLIC_STRAPI_TOKEN=strapi的访问token
3NEXT_PUBLIC_EZ_FORM_URL=https://api.darmau.design/api/ezforms/submit/
4NEXT_PUBLIC_EZ_FORM_TOKEN=提交表单token
5HOSTNAME=域名
6NEXT_PUBLIC_MAPBOX_TOKEN=地图token
7NEXT_PUBLIC_BARK=推送服务url
8STATIC_CDN_URL=静态资源域名
9UMAMI_TOKEN=访问分析的token
10MEMO=碎片想法的url
你应该不需要跟我这个完全一样。除了前两个是必须的。
NEXT_PUBLIC_STRAPI_URL是Strapi接口地址，因为已经安装了GraphQL插件，所以如果你的Strapi运行在本地，这里的地址就应该是http://localhost:1337/graphql。
第二个是访问Strapi的token。登录Strapi，在Settings - API Tokens创建一个Read - only权限的token，填在这里。
其他变量都不是必需的，你可以搜索变量名找到应用的地方，删去无关组件和页面即可。
如果你想使用获取EXIF信息的功能，可以将fetch-exif项目部署到一个地方，然后将其url替换exif.darmau.design这个域名。
Next这个项目的包管理器是pnpm，你可能也需要安装好pnpm。
这时候在终端输入pnpm next dev应该就能运行起本站的前端项目了。如果还有错，一般就是数据源出错的问题。根据报错信息找到组件，删掉或注释掉就可以了。

评论