构建部署自定义商店源

本文将介绍如何构建部署自定义商店源。

商店数据格式规范

Npplication Store 使用 JSON 格式存储数据，参考示例：

json

{
    "category": [ // 分类
        {
            "tools": "工具", // 对应分类在商店中显示的标题
            "style": "主题", 
            "translate": "翻译"
        }
    ],
    "tools": [// 对应分类标题
        {
            "插件 ID": {
                "url": "插件文件 URL",
                "screenshots": ["截图 URL1", "截图 URL2"] // 可以添加多个截图
            }
        }
    ],
    "style": [
        {
            "插件 ID": {
                "url": "插件文件 URL",
                "screenshots": ["截图 URL"] // 可以只添加一个截图
            }
        }
    ],
    "translate": [
        {
            "插件 ID": {
                "url": "插件文件 URL"
                // 可以不添加截图
            }
        }
    ]
}

特性

如果有其它商店源有相同的分类 (这里不管你给分类定义的名称是什么，分类对应的名称如果有冲突则按照商店源的顺序 [ 靠前的优先级＞往后的优先级 ] )，那么对应的插件列表将会合并，但相同插件不会合并，即使是相同 ID
插件可以在元数据中设置截图，在插件详细页读取截图时会优先读取元数据中的截图

部署

1. 准备商店数据文件

创建 store.json 文件，包含所有插件信息，以下是包含一个插件数据的示例：

json

{
    "category": [
        {
            "001": "工具"
        }
    ],
    "001": [
        {
            "id": {
                "url": "https://example.com/plugins/index.js",
                "screenshots": [
                    "https://example.com/screenshots/index.webp"
                ]
            }
        }
    ]
}

2. 上传插件文件到云服务器

确保所有插件文件都可以通过 HTTPS 访问，并且文件 URL 正确无误

3. 配置服务器

根据你的服务器类型，配置相应的 CORS 规则 (参考上面的配置示例)

4. 测试

直接将 .json 文件的完整 URL 填入到 nitaiPage 的商店源中进行测试如果没有问题，直接分享这个链接即可

跨域问题 (CORS)

Nginx 配置

nginx

server {
    listen 80;
    server_name your-store-domain.com;
    root /var/www/store;
    index store.json;

    # CORS配置
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

    # 预检请求处理
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

Apache 配置

apache

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range"
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]
</IfModule>

Node.js Express 配置

javascript

const express = require('express');
const cors = require('cors');
const app = express();

// 配置 CORS
app.use(cors({
    origin: '*', // 允许所有来源
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['DNT', 'User-Agent', 'X-Requested-With', 'If-Modified-Since', 'Cache-Control', 'Content-Type', 'Range']
}));

// 静态文件服务
app.use(express.static('public'));

// 商店数据接口
app.get('/store.json', (req, res) => {
    res.sendFile(__dirname + '/public/store.json');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`商店服务器运行在端口 ${PORT}`);
});

CDN配置

如果使用 CDN 服务，需要在 CDN 控制台配置 CORS 规则：

Cloudflare 配置

登录 Cloudflare 控制台
选择域名
进入 "CORS" 或 "HTTP Headers" 设置
添加以下规则：
- Header Name: Access-Control-Allow-Origin
- Header Value: *
- Apply to: All requests

阿里云 CDN 配置

登录阿里云 CDN 控制台
选择域名管理
进入 "HTTP响应头" 设置
添加自定义响应头：
- 响应头参数: Access-Control-Allow-Origin
- 响应头值: *
- 允许重复: 否

构建部署自定义商店源 ​

商店数据格式规范 ​

特性 ​

部署 ​

1. 准备商店数据文件 ​

2. 上传插件文件到云服务器 ​

3. 配置服务器 ​

4. 测试 ​

跨域问题 (CORS) ​

Nginx 配置 ​

Apache 配置 ​

Node.js Express 配置 ​

CDN配置 ​

Cloudflare 配置 ​

阿里云 CDN 配置 ​