feat: 更新环境配置,添加 CORS 支持并修改服务器地址

This commit is contained in:
2026-01-19 22:30:12 +08:00
parent 944836c748
commit 3e2d1456eb
12 changed files with 208 additions and 13 deletions

View File

@@ -1,6 +1,8 @@
# Server # Server
SERVER_PORT=3001 SERVER_PORT=6667
SERVER_BASE_URL=http://localhost:3001 SERVER_BASE_URL=http://mark.cloud-xl.top:6667
# CORS (comma-separated)
CORS_ORIGINS=http://mark.cloud-xl.top:6666
# Postgres (server-side only) # Postgres (server-side only)
DATABASE_HOST=127.0.0.1 DATABASE_HOST=127.0.0.1

152
README.md
View File

@@ -20,3 +20,155 @@
## 配置 ## 配置
- 复制 `.env.example``.env` 并填写数据库与密钥。 - 复制 `.env.example``.env` 并填写数据库与密钥。
## 发布NAS / SSH / x86 Linux
以下步骤适用于你描述的环境x86 Linux NAS + SSH 部署,已安装 Node.js 24 与 pm2。
### 0) 本地已执行的命令(在本机开发环境)
- 路径:仓库根目录
- 已执行:
- `npm install`
- `npm run build`
这会生成下列产物:
- Web 构建产物:`apps/web/dist/`
- 扩展构建产物:`apps/extension/dist/`
- 后端为 Node 直接运行源代码(`apps/server/src/`
### 1) 服务器目录建议NAS
建议在 NAS 上建立如下目录结构(可按需调整):
```
/opt/browser-bookmark/
├── server/ # 后端源码与依赖
├── web/ # Web 静态站点
└── extension/ # 扩展构建产物(用于打包/发布或本地加载)
```
### 2) 通过 SSH 上传文件
以下是需要上传的内容与目标路径:
1. 后端(运行源码)
- 本地:`apps/server/`
- 服务器:`/opt/browser-bookmark/server/`
2. Web 前端(静态产物)
- 本地:`apps/web/dist/`
- 服务器:`/opt/browser-bookmark/web/`
3. 扩展产物(打包或本地加载)
- 本地:`apps/extension/dist/`
- 服务器:`/opt/browser-bookmark/extension/`
4. 部署配置文件
- 本地:`deploy/`
- 服务器:`/opt/browser-bookmark/deploy/`
你可以使用 `scp``rsync`(示例命令需替换服务器地址与用户名):
```bash
# 后端源码
rsync -avz ./apps/server/ user@YOUR_NAS:/opt/browser-bookmark/server/
# Web 构建产物
rsync -avz ./apps/web/dist/ user@YOUR_NAS:/opt/browser-bookmark/web/
# 扩展构建产物
rsync -avz ./apps/extension/dist/ user@YOUR_NAS:/opt/browser-bookmark/extension/
# 部署配置
rsync -avz ./deploy/ user@YOUR_NAS:/opt/browser-bookmark/deploy/
```
### 3) 服务器端安装依赖
登录到 NAS
```bash
ssh user@YOUR_NAS
```
在服务器的后端目录安装依赖:
```bash
cd /opt/browser-bookmark/server
npm install --omit=dev
```
### 4) 配置环境变量
在服务器 `server` 目录准备 `.env`
```bash
cd /opt/browser-bookmark/server
cp .env.example .env
```
根据你的数据库与密钥填写 `.env`
### 5) 初始化数据库(首次部署必做)
```bash
cd /opt/browser-bookmark/server
npm run db:migrate
```
### 6) 使用 systemd 启动后端
本仓库已生成 systemd 服务文件:`deploy/systemd/browser-bookmark-server.service`
将其复制到服务器并启用:
```bash
sudo cp /opt/browser-bookmark/deploy/systemd/browser-bookmark-server.service /etc/systemd/system/browser-bookmark-server.service
sudo systemctl daemon-reload
sudo systemctl enable browser-bookmark-server
sudo systemctl start browser-bookmark-server
```
查看服务状态:
```bash
sudo systemctl status browser-bookmark-server
```
### 7) 配置 Nginx端口 6666
本仓库已生成 Nginx 配置文件:`deploy/nginx/mark.cloud-xl.top.conf`
将其复制到服务器并启用:
```bash
sudo cp /opt/browser-bookmark/deploy/nginx/mark.cloud-xl.top.conf /etc/nginx/conf.d/mark.cloud-xl.top.conf
sudo nginx -t
sudo systemctl reload nginx
```
该配置将 `mark.cloud-xl.top:6666` 指向 `/opt/browser-bookmark/web/`
### 8) 扩展发布/加载
扩展产物位于服务器:`/opt/browser-bookmark/extension/`
- 如需本地加载:将该目录下载到你的桌面浏览器,用“加载已解压扩展”指向该目录。
- 如需打包发布到商店:以该目录为基础打包(按平台要求)。
### 9) 验证与排查
- 后端日志:
```bash
sudo journalctl -u browser-bookmark-server -f
```
- Web 是否可访问(浏览器访问你的域名/端口)。
- 扩展是否能正常登录与同步。
### 10) 版本更新流程(建议)
1. 本地执行:`npm install` 与 `npm run build`
2. 重新上传:`apps/server/`、`apps/web/dist/`、`apps/extension/dist/`
3. 服务器端:`npm install --omit=dev`(如依赖变更)
4. 重启服务:`sudo systemctl restart browser-bookmark-server`

View File

@@ -1,5 +1,5 @@
# Extension API base (Fastify server) # Extension API base (Fastify server)
VITE_SERVER_BASE_URL=http://localhost:3001 VITE_SERVER_BASE_URL=http://mark.cloud-xl.top:6667
# Web app base (used by Options -> 跳转 Web) # Web app base (used by Options -> 跳转 Web)
VITE_WEB_BASE_URL=http://localhost:5173 VITE_WEB_BASE_URL=http://mark.cloud-xl.top:6666

View File

@@ -23,10 +23,15 @@ loadEnv();
export function getConfig() { export function getConfig() {
const serverPort = Number(process.env.SERVER_PORT || 3001); const serverPort = Number(process.env.SERVER_PORT || 3001);
const adminEmail = String(process.env.ADMIN_EMAIL || "").trim().toLowerCase(); const adminEmail = String(process.env.ADMIN_EMAIL || "").trim().toLowerCase();
const corsOriginsRaw = String(process.env.CORS_ORIGINS || "").trim();
const corsOrigins = corsOriginsRaw
? corsOriginsRaw.split(",").map((item) => item.trim()).filter(Boolean)
: true;
return { return {
serverPort, serverPort,
adminEmail, adminEmail,
corsOrigins,
database: { database: {
host: process.env.DATABASE_HOST || "127.0.0.1", host: process.env.DATABASE_HOST || "127.0.0.1",
port: Number(process.env.DATABASE_PORT || 5432), port: Number(process.env.DATABASE_PORT || 5432),

View File

@@ -14,8 +14,9 @@ import { syncRoutes } from "./routes/sync.routes.js";
const app = Fastify({ logger: true }); const app = Fastify({ logger: true });
// Plugins // Plugins
const config = getConfig();
await app.register(cors, { await app.register(cors, {
origin: true, origin: config.corsOrigins,
credentials: true, credentials: true,
methods: ["GET", "POST", "PATCH", "DELETE", "OPTIONS"], methods: ["GET", "POST", "PATCH", "DELETE", "OPTIONS"],
allowedHeaders: ["Content-Type", "Authorization", "Accept"] allowedHeaders: ["Content-Type", "Authorization", "Accept"]
@@ -69,7 +70,6 @@ app.setErrorHandler((err, _req, reply) => {
app.get("/health", async () => ({ ok: true })); app.get("/health", async () => ({ ok: true }));
// Routes // Routes
const config = getConfig();
app.decorate("config", config); app.decorate("config", config);
await authRoutes(app); await authRoutes(app);

View File

@@ -95,8 +95,8 @@ router.afterEach(() => {
</RouterLink> </RouterLink>
<nav class="links"> <nav class="links">
<RouterLink to="/" class="link">首页</RouterLink> <RouterLink to="/" class="link">公开</RouterLink>
<RouterLink to="/my" class="link">我的</RouterLink> <RouterLink to="/my" class="link">个人</RouterLink>
<RouterLink v-if="!loggedIn" to="/login" class="link primary">登录</RouterLink> <RouterLink v-if="!loggedIn" to="/login" class="link primary">登录</RouterLink>
@@ -142,7 +142,12 @@ router.afterEach(() => {
.links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.link { color: var(--bb-text); text-decoration: none; padding: 9px 12px; border-radius: 14px; transition: transform 120ms ease, box-shadow 120ms ease, background 150ms, color 150ms; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.45); } .link { color: var(--bb-text); text-decoration: none; padding: 9px 12px; border-radius: 14px; transition: transform 120ms ease, box-shadow 120ms ease, background 150ms, color 150ms; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.45); }
.link:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10); transform: translateY(-1px); } .link:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10); transform: translateY(-1px); }
.link.router-link-active { background: rgba(255,255,255,0.55); } .link.router-link-active {
background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
color: white;
border-color: rgba(255,255,255,0.25);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}
.primary { background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-weak)); color: white; border-color: rgba(255,255,255,0.25); } .primary { background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-weak)); color: white; border-color: rgba(255,255,255,0.25); }
.primary:hover { filter: brightness(1.03); } .primary:hover { filter: brightness(1.03); }

View File

@@ -134,7 +134,7 @@ async function exportLocal() {
<p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p> <p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p>
<p class="bb-muted" style="margin-top: 10px;"> <p class="bb-muted" style="margin-top: 10px;">
未登录导入写入本机 localStorage使用 urlNormalized/urlHash 自动去重登录导入写入数据库并自动去重合并 未登录导入写入本机 localStorage并自动去重登录导入写入数据库并自动去重合并
</p> </p>
</div> </div>

View File

@@ -608,7 +608,7 @@ onBeforeUnmount(() => {
<div class="bb-row" style="justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;"> <div class="bb-row" style="justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;">
<div> <div>
<h1 style="margin: 0;">我的书签</h1> <h1 style="margin: 0;">我的书签</h1>
<div class="bb-muted" style="margin-top: 4px;">像课程进度一样管理你的链接分组搜索可公开</div> <div class="bb-muted" style="margin-top: 4px;">轻松管理你的书签分组搜索可公开</div>
</div> </div>
<div class="bb-row" style="gap: 10px; flex-wrap: wrap;"> <div class="bb-row" style="gap: 10px; flex-wrap: wrap;">

View File

@@ -111,7 +111,7 @@ onMounted(loadFolders);
<div class="bb-row" style="justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;"> <div class="bb-row" style="justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;">
<div> <div>
<h1 style="margin: 0;">公开书签</h1> <h1 style="margin: 0;">公开书签</h1>
<div class="bb-muted" style="margin-top: 4px;">无需登录即可浏览来自用户设置为公开书签</div> <div class="bb-muted" style="margin-top: 4px;">无需登录即可浏览本页面书签</div>
</div> </div>
<div v-if="loggedIn" class="bb-row" style="gap: 10px; flex-wrap: wrap;"> <div v-if="loggedIn" class="bb-row" style="gap: 10px; flex-wrap: wrap;">

View File

@@ -256,7 +256,8 @@ input:focus-visible {
left: 0; left: 0;
top: 0; top: 0;
right: auto; right: auto;
z-index: 2147483000; /* Must be above BbModal overlay (2147483500) */
z-index: 2147483600;
} }
.bb-selectOption { .bb-selectOption {

View File

@@ -0,0 +1,14 @@
server {
listen 6666;
server_name mark.cloud-xl.top;
root /opt/browser-bookmark/web;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
access_log /var/log/nginx/mark.cloud-xl.top.access.log;
error_log /var/log/nginx/mark.cloud-xl.top.error.log;
}

View File

@@ -0,0 +1,16 @@
[Unit]
Description=Browser Bookmark Server
After=network.target
[Service]
Type=simple
WorkingDirectory=/opt/browser-bookmark/server
EnvironmentFile=/opt/browser-bookmark/server/.env
ExecStart=/usr/bin/node src/index.js
Restart=always
RestartSec=5
User=root
Group=root
[Install]
WantedBy=multi-user.target