## 一、前言：为什么把它搬上云

FlowPick是一个**隐私优先**的流媒体下载工具，支持 HLS（.m3u8）、DASH（.mpd）视频流、音频、图片的嗅探、下载、合并与转码，核心处理全部在浏览器内用 FFmpeg WASM 完成，文件不落第三方服务器。

它原生是「浏览器扩展 + 在线网页」双形态。把在线网页部分部署到自己的腾讯云上，常见的诉求有三类：团队内部分享一个合规的采集/归档入口、给不懂装扩展的同事一个网页版、或者单纯想把数据留在自己可控的域名下。

好消息是：**这个项目的在线工具页面是纯客户端逻辑 + 预渲染（SSG）**，没有强制的服务端依赖，所以既能当静态站托管，也能跑 Node 服务。下面给两套实战方案。

---

## 二、部署前的三个前提

**1.源码获取**
 - 从GitHub上获取FlwoPick源码：https://github.com/ezwebtools/flowpick

**2. 环境与构建**

- Node.js 20 LTS 及以上；包管理用 pnpm；
- 仓库默认 Nitro 预设是 `cloudflare-pages-static`，产物在 `.output/`。上腾讯云我们要按目标改预设。

**3. 一个必须保留的响应头**

下载器页面（`/m3u8-downloader`、`/dash-downloader`）在 `nuxt.config.ts` 里配了：

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

这俩头用来开启 **cross-origin isolation**，直接影响两件事：FFmpeg WASM 能否跑多线程（依赖 `SharedArrayBuffer`），以及大文件能否走 StreamSaver 跨源流式写入。**无论用哪种部署方式，这两个头都不能丢。**

---

## 三、方案一：CloudBase 静态网站托管（最省心）

适合「只要一个稳定可访问的网页版」的场景，零服务器运维。

**第 1 步：改成静态预设并构建**

编辑 `nuxt.config.ts`：

```ts
export default defineNuxtConfig({
  nitro: {
    preset: 'static'   // 改为静态预设
  }
})
```

```bash
pnpm build
# 产物在 .output/public
```

**第 2 步：上传到 CloudBase**

登录腾讯云控制台 → 进入 **CloudBase** → 静态网站托管，把 `.output/public` 整个目录上传。也可以用 CloudBase CLI 部署。

**第 3 步：绑定自定义域名 + 开启 HTTPS**

在托管设置里绑定你的域名（DNS 解析到 CloudBase 提供的 CNAME），并开启 HTTPS（CloudBase 自带证书能力，也可绑定腾讯云 SSL 的免费 DV 证书）。

**第 4 步：补上 COOP/COEP 响应头**

静态托管不会自动读取 Nuxt 的 routeRules，需要在托管配置里手动为下载器路由加上那两个响应头（控制台「自定义响应头」或等价配置项）。加完用 curl 验一下：

```bash
curl -I https://你的域名/m3u8-downloader | grep -i "cross-origin"
# 应能看到 cross-origin-opener-policy 与 cross-origin-embedder-policy
```

> 提示：FFmpeg WASM 首载约 8MB，建议在 CDN/托管层开启缓存，弱网首次会快很多。

---

## 四、方案二：轻量应用服务器 Lighthouse 跑 Node 服务

适合需要服务端渲染、或者你本来就有一台 Lighthouse 想统一管的情况。

**第 1 步：改 Node 预设并构建**

```ts
nitro: { preset: 'node-server' }
```

```bash
pnpm build
node .output/server/index.mjs   # 默认监听 3000
```

> 用 Nitro 的 `node-server` 预设时，`nuxt.config.ts` 里的 routeRules 响应头会由服务端自动注入，下载器路由的 COOP/COEP 一般已经就位，无需 nginx 再补。

**第 2 步：进程守护**

用 pm2 或 systemd 守护，避免退出后服务中断：

```bash
pnpm add -D pm2
pm2 start .output/server/index.mjs --name flowpick
pm2 save
```

**第 3 步：Nginx 反代 + 域名 + HTTPS**

在 Lighthouse 上装 Nginx，反代到 3000，并配置域名与 SSL（腾讯云免费 DV 证书）：

```nginx
server {
    listen 443 ssl;
    server_name flowpick.example.com;

    ssl_certificate     /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

HTTPS 是**必需**的：浏览器很多媒体/隔离相关 API 只在安全上下文（HTTPS 或 localhost）下可用。

---

## 五、方案三（简述）：云函数 SCF

理论上也能塞进 SCF（Serverless 云函数）+ API 网关，把构建产物挂到函数。但要注意两点：静态资源走 API 网关带宽不太划算，且同样要保证下载器路由的 COOP/COEP 头在网关/函数响应里就位。小规模自用可以，团队高频建议走前两种。

---

## 六、踩坑与优化清单

1. **COOP/COEP 头丢了 = 大文件退化**：这是最容易踩的坑，上线后用 curl 必验一次。
2. **务必 HTTPS**：localhost 之外，隔离与 WASM 相关能力都要求安全上下文。
3. **路由重定向已配好**：`/docs` 等会重定向到 `/docs/getting-started`，静态托管若用 SPA 回退要留意别把预渲染页覆盖掉。
4. **DRM 内容仍然解不了**：这是设计边界，跟部署方式无关。
5. **FFmpeg WASM 首次体积**：开启缓存，体验更顺。

---

## 七、结语与合规提醒

两套方案里，CloudBase 静态托管零运维、上线最快；Lighthouse + Node 更灵活、便于后续接服务端能力。无论哪种，数据都留在你自己的腾讯云域名下，配合 FlowPick 的本地处理，隐私账比较干净。

下载得到的素材请只做个人/团队合规用途，遵守各平台服务条款与当地法律，不要二次分发没有版权的资源。






FlowPick是一个隐私优先的流媒体下载工具，支持 HLS（.m3u8）、DASH（.mpd）视频流、音频、图片的嗅探、下载、合并与转码，核心处理全部在浏览器内用 FFmpeg WASM 完成，文件不落第三方服务器。

把开源流媒体下载工具 FlowPick 部署到腾讯云：静态托管与 Node 服务两种实战

FlowPick 是一个隐私优先的流媒体下载工具，支持 HLS（.m3u8）、DASH（.mpd）视频流、音频、图片的嗅探、下载、合并与转码，核心处理全部在浏览器内用 FFmpeg WASM 完成，文件不落第三方服务器。

开发工具

运维

云计算

FlowPick是一款隐私优先的流媒体下载工具，支持HLS/DASH视频、音频、图片的嗅探与下载，核心处理在浏览器内完成。本文提供两种腾讯云部署方案：CloudBase静态托管（零运维）和Lighthouse+Node服务（灵活扩展），确保数据安全可控。部署需注意COOP/COEP响应头配置和HTTPS环境，适合团队合规采集与归档使用。

轻量应用服务器

静态网站托管

代码解释

云函数

服务器

路由

GitHub

Nginx

热销域名限时优惠，新客首年免费！


domain

4核4G3M云服务器 新用户低至38元/年！

lighthouse

2026上云采购 | AI焕新·智启新局

cngw

CDN免费试用


serverless-catalog

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

FlowPick是一款隐私优先的流媒体下载工具，支持HLS/DASH视频、音频、图片的嗅探与下载，核心处理在浏览器内完成。本文提供两种腾讯云部署方案：CloudBase静态托管（零运维）和Lighthouse+Node服务（灵活扩展），确保数据安全可控。部署需注意COOP/COEP响应头配置和HTTPS环境，适合团队合...

把开源流媒体下载工具 FlowPick 部署到腾讯云：静态托管与 Node 服务两种实战-腾讯云开发者社区-腾讯云

把开源流媒体下载工具 FlowPick 部署到腾讯云：静态托管与 Node 服务两种实战

把开源流媒体下载工具 FlowPick 部署到腾讯云：静态托管与 Node 服务两种实战

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐