C-Shopping现代化电商平台Docker一键部署教程,帕斯内网穿透实现外网访问
作者
小编
发布时间

项目介绍
C-Shopping 是一个基于 Next.js 14 + Tailwind CSS + TypeScript 构建的现代化开源电商平台。该项目采用了一系列前沿技术,包括 Headless UI、Redux-Toolkit-RTK Query、JWT 认证和 Docker 容器化部署等,为用户提供了极致的性能和体验。
C-Shopping 不仅界面美观现代,还具备完整的电商功能,包括商品展示、购物车、订单管理、用户中心、管理后台等。项目支持多设备响应式设计,无论是桌面端还是移动端都能提供流畅的购物体验。该平台还配备了完善的管理系统,支持商品管理、订单管理、用户管理、分类管理等功能,是一个功能完整的电商解决方案。
项目采用 MongoDB 作为数据库,支持阿里云 OSS 文件存储,具备高度的可扩展性和稳定性。无论是个人学习还是商业部署,C-Shopping 都是一个优秀的选择。
项目地址: 点我跳转
部署安装
如需在外也打开项目需要配置内网穿透使用,点击前往 帕斯内网穿透,先注册好账号备用。
项目提供了 Docker Compose 一键部署方案,是最简单快速的部署方式。
复制下列的配置文件
1version: '3.8'23services:4 web:5 container_name: web6 build:7 context: .8 dockerfile: Dockerfile9 restart: always10 ports:11 - '3000:3000'12 environment:13 - WAIT_HOSTS=db:2701714 - WAIT_HOSTS_TIMEOUT=30015 - WAIT_SLEEP_INTERVAL=3016 - WAIT_HOST_CONNECT_TIMEOUT=3017 depends_on:18 - db1920 db:21 container_name: db22 image: 'mongo:4.4.13'23 restart: always24 volumes:25 - type: volume26 source: MONGO_DATA27 target: /data/db28 - type: volume29 source: MONGO_CONFIG30 target: /data/configdb31 ports:32 - '27017:27017'3334volumes:35 MONGO_DATA:36 name: MONGO_DATA37 MONGO_CONFIG:38 name: MONGO_CONFIG
打开飞牛 NAS 或其他的 NAS 设备

项目名称可以随便填,点击创建 docker-compose.yml

点击 Compose -> 新建项目
如果提示端口被占用可以修改下面的字段,但是需要保持格式正确。如果 3000 端口被占用,可以将 '3000:3000' 修改为其他端口,比如 '3001:3000'。
创建成功后可以访问 ip:3000 到这里就可以正常显示项目了
穿透公网
打开帕斯内网穿透控制台,点击隧道管理-隧道列表

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

接下来填写信息,隧道名称可以随便填写
本地 IP 默认就可以
传输协议可以选择 TCP 也可以选择 HTTP/HTTPS
HTTP 就是域名的形式,教程以使用 TCP 为演示
本项目中如果没有修改端口的话默认是 3000 端口,这里本地 IP 就填 3000
远程端口可以留空也可以自定义。下图仅做参考,请按照实际项目端口添加。

填写完毕点击确定
点击刚才创建好的隧道,点击获取配置文件

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

打开后粘贴刚才复制的配置文件,点击确定即可
复制帕斯内网穿透控制台的访问 IP 和端口
可以看到已经正常穿透成功了
本篇教程结束