无公网搭建个性化头像生成器 Avataaars Generator，React应用轻松自定义卡通头像，配置帕斯内网穿透实现远程访问部署教程

Avataaars Generator 是一个简单易用的头像生成器 Web 应用，由 Fang-Pen Lin 开发。这个项目基于 Pablo Stanley 设计的 Avataaars 头像库，让用户可以轻松创建个性化的卡通头像。

该项目采用 React + TypeScript 技术栈构建，提供了直观的界面让用户自定义头像的各种特征，包括发型、面部表情、服装、配饰等。生成的头像可以下载保存，非常适合用作社交媒体头像、个人资料图片或项目中的用户头像。

界面简洁美观，操作简单直观，无需任何设计技能就能创建出专业的卡通头像。项目完全开源，可以自由部署和定制。

项目地址：点我跳转

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

由于该项目是一个前端 React 应用，没有提供官方的 Docker 镜像，我们需要手动构建。最简单的方式是使用 Docker 单命令部署。

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

点击本地镜像-添加镜像-从 URL 添加。这一步先添加 Node.js 基础镜像

镜像填 node:16-alpine 等待下载完成后点击启动按钮启动容器

勾选开机自动启动后下一步，端口设置这里。请设置容器端口为 3000，主机端口可以设置为 3000（如果端口冲突可以修改主机端口，但容器内端口必须保持 3000）

存储位置这里，需要创建一个文件夹映射到容器的 /app 目录，用于存放项目代码。

环境变量设置：无需设置特殊环境变量

启动命令需要设置为：

1sh -c "cd /app && git clone https://github.com/fangpenlin/avataaars-generator.git . && yarn install && yarn start"

其他的都不用填写，直接下一步启动就好了。

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

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

点击创建新隧道

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

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

本地 IP 默认就可以

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

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

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

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

填写完毕点击确定

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

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

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

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

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

本篇教程结束