PassNAT LogoPassNAT

C-Shopping现代化电商平台Docker一键部署教程,帕斯内网穿透实现外网访问

作者

小编

发布时间

Curving abstract shapes with an orange and blue gradient

项目介绍

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'
2
3services:
4 web:
5 container_name: web
6 build:
7 context: .
8 dockerfile: Dockerfile
9 restart: always
10 ports:
11 - '3000:3000'
12 environment:
13 - WAIT_HOSTS=db:27017
14 - WAIT_HOSTS_TIMEOUT=300
15 - WAIT_SLEEP_INTERVAL=30
16 - WAIT_HOST_CONNECT_TIMEOUT=30
17 depends_on:
18 - db
19
20 db:
21 container_name: db
22 image: 'mongo:4.4.13'
23 restart: always
24 volumes:
25 - type: volume
26 source: MONGO_DATA
27 target: /data/db
28 - type: volume
29 source: MONGO_CONFIG
30 target: /data/configdb
31 ports:
32 - '27017:27017'
33
34volumes:
35 MONGO_DATA:
36 name: MONGO_DATA
37 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 和端口

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

本篇教程结束