部署个人博客系统 Mix Space + Shiro
关于博客站的部署，这里使用了mx-space作为后端，shiro为前端主题，部署过程可以参考官方文档。
我这里根据两个项目的docker-compose.yaml文件，合并并改写为了一个docker-compose.yaml如下：
services:
shiro:
container_name: shiro
image: innei/shiro:latest
environment:
- TZ=Asia/Shanghai
- NODE_ENV=production
# SSR 使用容器内网访问
- NEXT_PUBLIC_API_URL=http://mx-server:2333/api/v2
# 浏览器端使用公网 API 域名
- NEXT_PUBLIC_CLIENT_API_URL=${API_URL}
- NEXT_PUBLIC_GATEWAY_URL=${GATEWAY_URL}
ports:
- "2323:2323"
depends_on:
mx-server:
condition: service_healthy
networks:
- mx-space
restart: unless-stopped
mx-server:
container_name: mx-server
image: innei/mx-server:latest
environment:
- TZ=Asia/Shanghai
- NODE_ENV=production
- PORT=2333
- DB_HOST=mongo
- REDIS_HOST=redis
- JWT_SECRET=${JWT_SECRET}
- ALLOWED_ORIGINS=${ALLOWED_ORIGINS}
volumes:
- ./data/mx-space:/root/.mx-space
ports:
- "2333:2333"
depends_on:
mongo:
condition: service_started
redis:
condition: service_healthy
networks:
- mx-space
restart: unless-stopped
healthcheck:
test: ["CMD", "curl", "-f", "http://127.0.0.1:2333/api/v2/ping"]
interval: 1m30s
timeout: 30s
retries: 5
start_period: 30s
mongo:
container_name: mongo
image: mongo:7
volumes:
- ./data/db:/data/db
networks:
- mx-space
restart: unless-stopped
redis:
container_name: redis
image: redis:alpine
volumes:
- ./data/redis:/data
healthcheck:
test: ["CMD-SHELL", "redis-cli ping | grep PONG"]
start_period: 20s
interval: 30s
retries: 5
timeout: 3s
networks:
- mx-space
restart: unless-stopped
networks:
mx-space:
driver: bridge
driver: 桥以及.env文件：
# 注意{}中填自己的内容
# ========== 必填项 ==========
# JWT 密钥：16-32 字符，用于用户认证
JWT_SECRET={}
# CORS 允许的域名（逗号分隔，勿加空格）（我在这里填了前后端的两个域名）
ALLOWED_ORIGINS={}
# 前端/后端公网地址（浏览器访问用，与 Nginx 实际协议一致）
# HTTP ：
API_URL=http://{后端域名}/api/v2
GATEWAY_URL=http://{后端域名}
# HTTPS（配置 SSL 后改为）：
# API_URL=https://{后端域名}/api/v2
# GATEWAY_URL=https://{后端域名}
# ========== 可选项 ==========
TZ=Asia/Shanghai注意配置了SSL后需改为https版本的，不然前端会无法访问后端api
将两个文件上传到服务器中的某个文件夹下后，执行
bash
docker compose up -d
即可启动前后端，此时需要将准备好的前后端域名配置Ngnix反向代理到两个服务的ip、端口，在宝塔面板中配置即可，后端服务端口默认为2333，前端服务端口默认为2323。
配置完后访问前端网页，发现此时依然无法从后端api中获取到数据，因为还未在后端中配置名为shiro的主题项，需要先进入你的后端控制面板https://{后端域名}/proxy/qaqdmin进行初始化。
初始化并登陆后，参照官方文档的准备步骤1，进入 Mix Space 后台，进入「配置与云函数」页面，点击右上角的新增按钮，在编辑页面中，填入以下设置：
- 名称：shiro
- 引用：theme
- 数据类型：JSON
- 数据：（点击下方的按钮复制）
{
"footer": {
"otherInfo": {
"date": "2020-{{now}}",
"icp": {
"text": "萌 ICP 备 20236136 号",
"link": "https://icp.gov.moe/?keyword=20236136"
}
},
"linkSections": [
{
"name": "关于",
"links": [
{
"name": "关于本站",
"href": "/about-site"
},
{
"name": "关于我",
"href": "/about"
},
{
"name": "关于此项目",
"href": "https://github.com/innei/Shiro",
"external": true
}
]
},
{
"name": "更多",
"links": [
{
"name": "时间线",
"href": "/timeline"
},
{
"name": "友链",
"href": "/friends"
},
{
"name": "监控",
"href": "https://status.innei.in/status/main",
"external": true
}
]
},
{
"name": "联系",
"links": [
{
"name": "写留言",
"href": "/message"
},
{
"name": "发邮件",
"href": "mailto:i@innei.ren",
"external": true
},
{
"name": "GitHub",
"href": "https://github.com/innei",
"external": true
}
]
}
]
},
"config": {
"color": {
"light": [
"#33A6B8",
"#FF6666",
"#26A69A",
"#fb7287",
"#69a6cc",
"#F11A7B",
"#78C1F3",
"#FF6666",
"#7ACDF6"
],
"dark": [
"#F596AA",
"#A0A7D4",
"#ff7b7b",
"#99D8CF",
"#838BC6",
"#FFE5AD",
"#9BE8D8",
"#A1CCD1",
"#EAAEBA"
]
},
"bg": [
"/static/images/F0q8mwwaIAEtird.jpeg",
"/static/images/IMG_2111.jpeg.webp.jpg"
],
"custom": {
"css": [],
"styles": [],
"js": [],
"scripts": []
},
"site": {
"favicon": "/innei.svg",
"faviconDark": "/innei-dark.svg"
},
"hero": {
"title": {
"template": [
{
"type": "h1",
"text": "Hi, I'm ",
"class": "font-light text-4xl"
},
{
"type": "h1",
"text": "Innei",
"class": "font-medium mx-2 text-4xl"
},
{
"type": "h1",
"text": "👋。",
"class": "font-light text-4xl"
},
{
"type": "br"
},
{
"type": "h1",
"text": "A NodeJS Full Stack ",
"class": "font-light text-4xl"
},
{
"type": "code",
"text": "<Developer />",
"class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
},
{
"type": "span",
"class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
}
]
},
"description": "An independent developer coding with love."
},
"module": {
"activity": {
"enable": true,
"endpoint": "/fn/ps/update"
},
"donate": {
"enable": true,
"link": "https://afdian.net/@Innei",
"qrcode": [
"/static/images/20191211132347.png",
"/static/images/0424213144.png"
]
},
"bilibili": {
"liveId": 1434499
}
}
}
}注意这里仅为官方示例配置，具体配置项请参照官方文档自行按需修改。
保存后再次进入前端网页便可以看到主页面了。