PassNAT LogoPassNAT

免费生成网易云音乐海报工具 MusicCard 极简部署教程,无公网设置帕斯内网穿透远程访问制作专业音乐海报

作者

小编

发布时间

Curving abstract shapes with an orange and blue gradient

项目介绍

MusicCard 是一个基于 Next.js 14 开发的在线音乐海报生成工具,让用户能够为自己喜爱的网易云音乐创建精美的可视化海报。这个项目受到 BeatPrints 的启发,旨在提供一个现代化的 Web 版本音乐海报生成工具。

该项目支持多种海报主题和布局,用户只需要输入网易云音乐链接,就能自动解析歌曲信息并生成精美的音乐海报。界面采用响应式设计,支持移动端使用,用户可以自定义海报样式和颜色,还支持歌词展示和高清图片导出功能。

项目基于 Next.js 14 + TypeScript + Tailwind CSS 构建,界面美观现代,操作简单直观。无需复杂配置,开箱即用,让每个人都能轻松制作出专业级的音乐海报。

项目地址: 点我跳转

部署安装

如需在外也打开项目需要配置内网穿透使用,点击前往 帕斯内网穿透,先注册好账号备用。

由于该项目是 Next.js 应用,没有提供官方的 Docker 镜像,我们需要手动构建。最简单的方式是使用 Node.js 环境直接运行。

打开飞牛 NAS 或其他的 NAS 设备

首先需要安装 Node.js 环境。在 NAS 应用中心搜索并安装 Node.js。

接下来通过 SSH 连接到 NAS,执行以下命令:

1# 克隆项目
2git clone https://github.com/aidaox/MusicCard.git
3cd MusicCard
4
5# 安装依赖
6npm install
7
8# 构建项目
9npm run build
10
11# 启动项目
12npm start

如果你想要使用 Docker 方式部署,可以创建一个简单的 Dockerfile:

1FROM node:18-alpine
2
3WORKDIR /app
4
5COPY package*.json ./
6RUN npm install
7
8COPY . .
9RUN npm run build
10
11EXPOSE 3000
12
13CMD ["npm", "start"]

然后使用以下命令构建和运行:

1docker build -t musiccard .
2docker run -d -p 3000:3000 --name musiccard musiccard

端口设置:项目默认运行在 3000 端口,如果端口冲突可以通过环境变量 PORT 修改,例如:

1docker run -d -p 8080:8080 -e PORT=8080 --name musiccard musiccard

环境变量设置: 该项目为纯前端应用,无需特殊环境变量配置。

创建成功后可以访问 ip:3000 到这里就可以正常显示项目了

穿透公网

打开帕斯内网穿透控制台,点击隧道管理-隧道列表

点击创建新隧道

隧道节点可以随便选,一般选个负载低的就可以

接下来填写信息,隧道名称可以随便填写

本地 IP 默认就可以

传输协议可以选择 TCP 也可以选择 HTTP/HTTPS

HTTP 就是域名的形式,教程以使用 TCP 为演示

本项目中如果没有修改端口的话默认是 3000 端口,这里本地端口就填 3000

远程端口可以留空也可以自定义。下图仅做参考,请按照实际项目端口添加。

填写完毕点击确定

点击刚才创建好的隧道,点击获取配置文件

回到飞牛 NAS,点击应用中心下载 frpc 客户端

打开后粘贴刚才复制的配置文件,点击确定即可

复制帕斯内网穿透控制台的访问 IP 和端口

可以看到已经正常穿透成功了

本篇教程结束