歌词滚动姬在线部署教程

type

status

date

slug

summary

🎵 LRC-Maker 部署到 Cloudflare Pages 教程

LRC-Maker（歌词滚动姬） 是一个强大的工具，用于创建带时间标签的滚动 .lrc 文件。本教程将教你如何将这个基于 Vue 的项目部署到 Cloudflare Pages，快速拥有一个在线运行的歌词编辑网站。

这是作者直接部署在GitHub的网址直接可用

LRC Maker

歌词滚动姬｜可能是你所能见到的最好用的歌词制作工具

http://lrc-maker.github.io

🛠 前提条件

在开始之前，请确保你已准备好以下内容：

🐙 GitHub 账户：已 fork 或 clone magic-akari/lrc-maker 仓库。

☁️ Cloudflare 账户（免费套餐即可）。

1️⃣ 创建 Cloudflare Pages 项目

左侧菜单选择 Pages → Create a project。

点击 Connect to Git，授权 Cloudflare 访问你的 GitHub 账户。

选择你 fork 的 lrc-maker 仓库。

2️⃣ 配置构建设置

在项目设置页面中，填写以下内容：

配置项	示例
项目名称	`lrc-maker`
框架预设	`Vue`构建之后貌似不一样见下图
构建命令	`npm run build`
构建输出目录	`build`
环境变量（可选）	根据项目需求添加

💡 提示：如果项目中有依赖或特定环境变量，请确保在这里配置，否则可能导致构建失败。

配置完成后，点击 保存并部署。

3️⃣ 部署项目

🚀 触发首次部署

Cloudflare Pages 会自动从 GitHub 拉取代码，执行 npm run build，并将 build 目录中的静态文件部署到 CDN。

部署过程通常需要几分钟。

📄 检查部署状态

在 Cloudflare Pages 仪表板中查看部署日志，确保构建成功。如果遇到错误：

确认仓库分支是否正确（默认 master）。

检查依赖是否正确安装（package.json）。

🌐 访问网站

部署完成后，Cloudflare 会提供一个默认 URL，例如：

打开该网址即可使用 LRC-Maker 功能：拖放文件、添加时间戳、生成 .lrc 文件等。

4️⃣ （可选）绑定自定义域名

在 Cloudflare 仪表板 Pages 项目中选择 自定义域名。

添加你的域名并按照提示配置 DNS 记录。

等待 DNS 传播（通常几分钟到几小时），即可通过自定义域名访问你的 LRC-Maker 网站。

✅ 小结

通过以上步骤，你已经成功将 LRC-Maker 部署到 Cloudflare Pages，享受免费 CDN 加速的在线歌词制作工具。

🚀 快速部署

☁️ 自动 CDN 加速

🎶 在线创建 .lrc 文件

以下作为拓展部分

🛡️ 如何设置仅允许特定账号访问 Cloudflare Pages

Cloudflare Pages 默认是公开访问的，但在某些场景下，我们希望只允许特定的账号访问。通过 Cloudflare Zero Trust 的访问策略功能，可以轻松实现这一目标。以下是完整教程。

1️⃣ 登录 Cloudflare 仪表盘

打开 Cloudflare 仪表盘并登录您的账户。

在左侧导航栏中，点击 零信任（Zero Trust）。

⚠️ 开通 Zero Trust 需要添加付款方式，我这里选择 PayPal，并绑定大陆的银联卡（即使卡内无余额也可以）。

绑定时请使用大陆 IP。

开通后，即可开始添加受保护的应用程序，并配置访问策略。

2️⃣ 将 Cloudflare Pages 添加为受保护的应用程序

在 Zero Trust 控制台中，点击 访问（Access） → 应用程序（Applications）。

点击 添加应用程序（Add an application），选择 自托管（Self-hosted）。

在弹出的配置页面中填写信息：

应用程序名称（Application Name）：例如 My Pages

域名（Domain）：输入您的 Cloudflare Pages 域名，例如 https://my-site.pages.dev

会话持续时间（Session Duration）：根据需要设置会话的有效期

点击 下一步（Next） 完成应用程序添加。

3️⃣ 配置访问策略

为了限制只有特定账号可以访问，需要创建访问策略：

在刚才添加的应用程序页面中，点击 策略（Policies） → 添加策略（Add a policy）

在弹出的配置页面中填写信息：

策略名称（Policy Name）：例如 Allow Specific Users

操作（Action）：选择 Allow

包含（Include）：选择 Emails，输入允许访问的邮箱地址，例如 user1@example.com

排除（Exclude）：如果希望排除某些用户，可以在此设置

点击 下一步（Next） 完成策略配置。

4️⃣ 测试访问控制

使用未授权邮箱尝试访问 Cloudflare Pages 站点，无法接收验证码，更不可能登录。

使用已授权邮箱访问，验证可以正常打开页面。

✅ 注意事项

邮箱验证：如果使用邮箱进行身份验证，用户首次访问时需要完成邮箱验证。

会话持续时间：请合理设置会话有效期，以平衡安全性与用户体验。

策略优先级：Cloudflare 会根据策略顺序匹配，确保您的策略顺序正确。

通过以上步骤，您就可以轻松将 Cloudflare Pages 设置为仅允许特定账号访问，保障站点的安全性。

注意：在 Cloudflare Zero Trust 中，你只需添加一个允许策略指定特定邮箱即可访问你的 Pages，其他邮箱虽然可以在登录框输入，但无法收到验证码，也无法登录，因此无需额外配置拒绝策略。策略外的邮箱默认被拒绝访问，确保只有允许的邮箱可以登录，同时注意邮箱填写要精确、免费计划最多支持 50 个席位。应用程序数量没有硬性限制，你可以添加多个受保护应用（例如多个 Cloudflare Pages、内部网站、SSH 或 SaaS 应用）。