前端初始的数据获取失败（本地部署）

[ouyangyanhuo]

位于本地部署的前后端系统，在前端访问后端时，初始的数据获取失败，目前测试后端一切正常，我采用了双域名的形式，即api.blog.example.com & blog.example.com，目前后端均使用 Docker 部署

（在 report 时前后文中的 example.com 替换了自己的域名）

前端 Docker 日志

U [FetchError]: [GET] "https://api.blog.example.com/api/v2/aggregate?theme=shiro": <no response> fetch failed
    at async i (/app/.next/server/chunks/5448.js:1:51117)
    at async l (/app/.next/server/chunks/5448.js:1:51985)
    at async t (/app/.next/server/chunks/7655.js:1:49495) {
  digest: '2637684809',
  [cause]: TypeError: fetch failed
      at node:internal/deps/undici/undici:12618:11
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async i (/app/.next/server/chunks/5448.js:1:51000)
      at async l (/app/.next/server/chunks/5448.js:1:51985)
      at async t (/app/.next/server/chunks/7655.js:1:49495) {
    cause: Error: connect ECONNREFUSED 127.0.0.1:443
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:128:17) {
      errno: -111,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 443
    }
  }
}

后端 Docker 日志

 WARN   [UserService]  主人已登录，IP: 127.0.0.1 

 WARN   [AllExceptionsFilter]  IP: 172.19.0.1 错误信息：(404) Cannot GET / Path: / 

 WARN   [AllExceptionsFilter]  IP: 172.19.0.1 错误信息：(404) Cannot GET / Path: / 

目前均配置反向代理、ssl证书、后端云函数

前端 .env 配置如下

NEXT_PUBLIC_API_URL=https://api.blog.example.com/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://api.blog.example.com

后端 docker-compose.yml 中的 env 配置如下

    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - DB_HOST=mongo
      - REDIS_HOST=redis
      - ALLOWED_ORIGINS=api.blog.example.com,blog.example.com,127.0.0.1:*,localhost:*
      - JWT_SECRET=12345678901234567890

但当前前端仍旧提示

初始数据的获取失败，请检查 API 服务器是否正常运行。接口请求错误信息：
[GET] "https://api.blog.example.com/api/v2/aggregate?theme=shiro": <no response> fetch failed

[Innei]

code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 443

127.0.0.1:443 不可达啊，你没监听本地

[ouyangyanhuo]

code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 443

127.0.0.1:443 不可达啊，你没监听本地

我在 Nginx 的反向代理中已经监听过了，还是我的监听配置方法不正确，前往哪里配置这个监听呢？

[ouyangyanhuo]

寫一下我在部署過程中遇到的疑難雜症和解決方法 然后Close issue

使用 Docker 部署前後端.

理論上前後端都十分好部署，因爲它們都有使用 Docker 構建的版本，但實際上在 Docker 部署中依舊會遇到一大堆問題。

後端

目前來看，後端部署沒有什麽太大的問題，最多遇到網絡問題。

• 首先 關於 pull 的網絡問題，在大陸地區，會限制 Docker Hub 所以我們需要配置一個 Docker Hub 鏡像。
  然後按照教程的部署就好了 後端部署教程 推薦只填寫前兩項就好了。

注意：我們按照教程 wget 到的 docker-compose.yml 的 environment 是這樣的

    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - DB_HOST=mongo
      - REDIS_HOST=redis
      - ALLOWED_ORIGINS=localhost
      - JWT_SECRET=YOUR_SUPER_SECURED_JWT_SECRET_STRING

按照我說的只填寫教程中的前兩項，應該在這個 environment 中修改 ALLOWED_ORIGINS 配置項和 JWT_SECRET ，在部署中 JWT_SECRET 的作用位置，而 ALLOWED_ORIGINS 主要是用來解決跨域問題的。

注意：如果你要設置端口訪問，請在允許訪問的地址的後面加上端口，例如ALLOWED_ORIGINS=localhost:2333 或 ALLOWED_ORIGINS=localhost:*

• 其次 建議在 設定-系統 中填寫好 前端、後臺、API、Gateway 的地址。

例如：

前端地址  https://blog.example.com
管理后台地址  https://api.example.com/proxy/qaqdmin
API 地址  https://api.example.com/api/v2
Gateway 地址  https://api.example.com

• 我沒有設置反向代理的路徑配置，而是直接配置了整個站點的反向代理，所以地址是基於端口訪問的原始地址。

具體地址請參考 Nginx 反向代理規則：

location /api/v2 {
        proxy_pass http://127.0.0.1:2333/api/v2; 
}
## 简读 render 地址
location /render {
        proxy_pass http://127.0.0.1:2333/render; 
    }
    ## Kami 地址
location / {
        proxy_pass http://127.0.0.1:2323; 
}
## 后台地址
location /proxy {
        proxy_pass http://127.0.0.1:2333/proxy;
}
location /qaqdmin {
        proxy_pass http://127.0.0.1:2333/proxy/qaqdmin;
}
 ## RSS 地址
location ~* \/(feed|sitemap|atom.xml) {
        proxy_pass http://127.0.0.1:2333/$1; 
}

• 最後，記得配置云函數啊！！！！

前端

我的前端依舊使用 Docker 部署，我在拉取官方鏡像運行時，遇到了 禁止访问或者 API 服务出现问题 這個問題。

本著 力 大 砖 飞 的原則，我選擇直接依賴 Dockerfile 進行 Build.

其實更多的原因是，我在 Pull 到的 image 最後修改時間是 2024年10月 但 Github 倉庫在近幾日還有更新，説明 image 并不是最新鏡像，遂進行自構建

依舊是由於大陸地區特殊的網絡環境，需要一個鏡像 or 代理，我選擇了鏡像。

• 修改 Dockerfile 文件，經過檢查，整個項目依賴 pnpm 構建運行，所以要依靠 pnpm 拉取前端必須的模塊，遂對 pnpm 切換鏡像即可。

Dockerfile 中的第 14 行 和 第 23 行，都寫到了

RUN npm install -g pnpm

即使用 npm 安裝 pnpm，那就在它的緊跟著的下一行寫上切換鏡像的指令即可，推薦使用淘寶的鏡像，清華的鏡像好像有些不全

pnpm config set registry https://registry.npmmirror.com/

注：如果報錯 docker build 的報錯地點在 npm 安裝 pnpm 的那一行，建議再為 npm 切換成淘寶的鏡像源。

接下來進行 Docker build 就好了

docker build -t my-shiro .

等待構建完成后，按照官方提供的步驟稍加修改

wget https://raw.githubusercontent.com/Innei/Shiro/main/docker-compose.yml
wget https://raw.githubusercontent.com/Innei/Shiro/main/.env.template .env

vim docker-compose.yml # 修改你的 docker-compose，下文 注意 處講
vim .env # 修改你的 ENV 变量
docker compose up -d

這之後就成功啓動了

注意，在 vim docker-compose.yml 時，要將 image 修改成上面 build 時候設置的名稱，例如 my-shiro

我在這裏舉個例子，版本號也要根據你構建的版本鎖定，如果構建沒有指定版本，則默認為 latest

version: '3'

services:
  shiro:
    container_name: shiro
    image: shiro-my:latest
    volumes:
      - ./.env:/app/.env
    restart: always
    environment:
      - NEXT_SHARP_PATH=/usr/local/lib/node_modules/sharp
    ports:
      - 2323:2323

再有一點需要格外注意，我建議有 Linux 系統電腦的用戶這樣操作，因爲交給服務器構建的話會，在 RUN pnpm build 階段，可能會性能不足，導致服務器卡死且構建失敗，除非你有 8G 的内存

有關修改云函數不生效的問題

既然都是基於鏡像構建的，只要鏡像在就好了，停止原來的容器、刪掉原來的容器，開啓新的容器。

docker stop shiro
docker rmi shiro
docker compose up -d

有關主題更新

從 GitHub 上 clone 最新版本中的源代碼，然後 Docker build、停止原來的容器、刪掉原來的容器、啓動新的容器就好了。當然如果你要修改版本號，記得修改一下 docker-compose.yml 文件

docker build -t my-shiro .
docker stop shiro
docker rmi shiro
docker compose up -d

後記

本 issues 已經 Close，有興趣 or 遇到其他部署問題，可以移步 Discussions 進行