本地部署 Mix-Space 前后端指南

9 个月前(已编辑)

476

这篇文章上次修改于 7 个月前，可能部分内容已经不适用，如有疑问可询问作者。

基本要求

一台任意地区的 VPS，本文默认您已安装宝塔，您的 VPS 位于中国大陆
一个域名
一个健全的脑子和手

后端部署

安装 Docker

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

拉取配置文件

cd && mkdir -p mx-space/core && cd $_
wget https://ghproxy.com/raw.githubusercontent.com/mx-space/core/master/docker-compose.yml

在当前目录下创建 .env 文件，打开并补充以下内容

#填写长度不小于 16 个字符，不大于 32 个字符的字符串
JWT_SECRET=
#填写被允许的域名，此处通常是博客域名
ALLOWED_ORIGINS=
ENCRYPT_ENABLE= false
ENCRYPT_KEY=

启动后端

docker compose up -d

宝塔后台创建网站（这里默认您已完成 SSL 配置），放行端口 2333，创建完成后添加 反向代理，其中 目标 URL 填写 http://127.0.0.1:2333，点击确定保存
如图所示
编辑反代配置文件，用下面内容替换原有配置，然后点击保存 P.S:下方内容也在此可见

#PROXY-START/
location /socket.io {
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade
 $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://127.0.0.1:2333/socket.io;
}
location /
{
    proxy_pass http://127.0.0.1:2333/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP
 $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    set $static_fileJsNv8TWb 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileJsNv8TWb 1;
        expires 12h;
        }
    if ( $static_fileJsNv8TWb = 0 )
    {
    add_header Cache-Control no-cache;
    }
}
#PROXY-END/

打开 https://<your back-end domain>/qaqdmin ,进行配置，其中 前端地址 配置项请修改为您的 博客地址（前端地址）

前端部署

环境部署

《中国大陆机器连不上 nvm 连不上官方镜像源怎么装 nodejs 和 npm》.webp

apt update
apt install nodejs npm -y
npm -v
node -v
npm config set registry http://mirrors.cloud.tencent.com/npm/
npm install -g @pnpm/exe
pnpm setup
source /root/.bashrc
pnpm install -g node npm
node -v
npm -v
apt purge nodejs npm -y

拉取前端资源

cd && cd mx-space
git clone https://ghproxy.com/github.com/Innei/Shiro
# 如果出现 Command not found 提示，请安装 git (Debian/Ubuntu: apt install git ) , (CentOS: yum install git )

将 .env.template 重命名为 .env，并编辑变量，可参考下方示例

NEXT_PUBLIC_API_URL=https://<your back-end domain>/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://<your back-end domain>
## Clerk
## 下方请参阅 https://mx-space.js.org/themes/shiro 其中的 第 3 和第 5 步
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

## 2023.10.1新增
## OpenAI
OPENAI_API_KEY=<your chatgpt key>

进入 https://<your_back-end_domain>/qaqdmin ,进入「配置与云函数」页面，点击右上角的新增按钮，在编辑页面中，填入以下设置：
名称：shiro 引用：theme 数据类型：JSON 数据：（点击下方的按钮复制，请自己修改成符合你的需求再用，否则可能会导致你的博客无法按照你的预期运行）

{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}"
    },
    "linkSections": [
      {
        "name": "关于",
        "links": [
          {
            "name": "关于本站",
            "href": "/about-site"
          },
          {
            "name": "关于我",
            "href": "/about-me"
          },
          {
            "name": "关于此项目",
            "href": "https://github.com/innei/Shiro",
            "external": true
          }
        ]
      },
      {
        "name": "更多",
        "links": [
          {
            "name": "时间线",
            "href": "/timeline"
          },
          {
            "name": "友链",
            "href": "/friends"
          }
        ]
      },
      {
        "name": "联系",
        "links": [
          {
            "name": "写留言",
            "href": "/message"
          },
          {
            "name": "发邮件",
            "href": "mailto:wibus@qq.com",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/wibus-wee",
            "external": true
          }
        ]
      }
    ]
  },
  "config": {
    "site": {
      "favicon": "/wibus.jpg"
    },
    "custom": {
      "scripts": null,
      "styles": null
    },
    "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": {
      "donate": {
        "enable": true,
        "link": " https://afdian.net/@Innei ",
        "qrcode": [
          " https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png ",
          " https://cdn.innei.ren/bed/2023/0424213144.png "
        ]
      },
      "bilibili": {
        "liveId": 1434499
      }
    }
  }
}

依次执行以下指令（可能会出现假死/没动静/错误等情况，遇到请使用您的富强民主文明和谐工具）

pnpm i
pnpm build

使用 screen 实现后台保活

如果您没有安装 screen

Debian / Ubuntu:

apt install screen

CentOS:

yum install screen

安装后，使用 screen -R Shiro 新建窗口

然后执行

cd && cd mx-space && cd Shiro
npx next start -p 2323

随后按 Ctrl+a，再按 d 即可完成后台保活，更多用法请前往：终端命令神器--Screen 命令详解

宝塔后台创建网站，网址为您的博客地址，配置反代，可部分参考第 5 步，目标 URL 填写 http://127.0.0.1:2323
编辑反代配置文件，用下方内容替换原有配置，然后点击保存

# See: https://github.com/mx-space/docker/blob/master/configs/nginx.conf

# This is a example for nginx configure if you host mx-space manually
location ~* \.(gif|png|jpg|css|js|woff|woff2)$ {
  proxy_pass http://127.0.0.1:2323;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header REMOTE-HOST $remote_addr;
  expires 30d;
}
location ~* \/(feed|sitemap|atom.xml) {
  proxy_pass http://127.0.0.1:2333/$1;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header REMOTE-HOST $remote_addr;

  add_header X-Cache $upstream_cache_status;

  add_header Cache-Control max-age=60;
}


location / {
  proxy_pass http://127.0.0.1:2323;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header REMOTE-HOST $remote_addr;

  add_header X-Cache $upstream_cache_status;

  add_header Cache-Control no-cache;
  proxy_intercept_errors on;
}

完成✅