如何快速部署AtSea示例商店应用：Docker容器化电商平台完整指南

【免费下载链接】atsea-sample-shop-app A sample app that uses a Java Spring Boot backend connected to a database to display a fictitious art shop with a React front-end. 项目地址: https://gitcode.com/gh_mirrors/at/atsea-sample-shop-app

AtSea示例商店应用是一个基于Java Spring Boot后端和React前端构建的容器化电商平台，通过Docker技术实现快速部署和扩展。本指南将帮助你从零开始搭建这个功能完整的在线商店系统，体验现代容器化应用的部署流程。

📋 准备工作：部署前的环境检查

在开始部署AtSea示例商店应用前，请确保你的系统满足以下要求：

• Docker Engine (20.10.0+)
• Docker Compose (v2.0+)
• Git
• 至少2GB内存和5GB可用磁盘空间

你可以通过以下命令检查Docker是否已正确安装：

docker --version
docker compose version

🔄 第一步：获取项目代码

首先克隆AtSea示例商店应用的代码仓库到本地：

git clone https://gitcode.com/gh_mirrors/at/atsea-sample-shop-app
cd atsea-sample-shop-app

项目结构中包含多个关键组件：

• app/：包含Spring Boot后端和React前端代码
• database/：数据库配置文件
• payment_gateway/：支付网关服务
• reverse_proxy/：Nginx反向代理配置

🐳 第二步：使用Docker Compose一键部署

AtSea应用提供了预配置的Docker Compose文件，让部署过程变得极其简单。在项目根目录下执行以下命令：

# 使用生产环境配置
docker compose -f docker-compose.yml up -d

# 如需开发环境配置（包含热重载功能）
# docker compose -f docker-compose-dev.yml up -d

这个命令会自动构建并启动所有必要的服务：

• Spring Boot后端API
• React前端应用
• PostgreSQL数据库
• Nginx反向代理
• 支付网关服务

图：Docker容器编排示意图，展示AtSea应用的多容器协作架构

🌐 第三步：访问AtSea商店应用

部署完成后，打开浏览器访问以下地址即可使用AtSea商店应用：

http://localhost:8080

你将看到AtSea商店的主页面，展示各类虚构艺术品商品：

图：AtSea商店主页面，展示产品列表和购物功能

🛒 第四步：体验完整购物流程

AtSea应用提供了完整的电商功能，包括：

1. 浏览商品：首页展示所有可用商品
2. 添加到购物车：点击商品下方的"ADD"按钮
3. 查看购物车：点击右上角购物车图标
4. 结账流程：填写信用卡信息和账单地址

图：AtSea应用结账页面，展示订单信息和支付表单

⚙️ 常用操作与维护

查看服务状态

docker compose ps

查看应用日志

# 查看所有服务日志
docker compose logs

# 查看特定服务日志（如后端API）
docker compose logs app

停止应用

docker compose down

数据持久化

应用数据默认存储在Docker卷中，位于：

• 数据库数据：/var/lib/docker/volumes/atsea-sample-shop-app_db-data/_data

📚 项目目录结构解析

AtSea应用采用模块化设计，主要目录结构如下：

• app/src/main/java/com/docker/atsea/：Spring Boot后端源代码
  • controller/：API控制器
  • model/：数据模型
  • service/：业务逻辑服务
• app/react-app/src/：React前端源代码
  • components/：UI组件
  • containers/：页面容器
  • reducers/：Redux状态管理

❓ 常见问题解决

端口冲突

如果8080端口已被占用，可以修改docker-compose.yml中的端口映射：

services:
  reverse_proxy:
    ports:
      - "8081:80"  # 将8081替换为可用端口

数据库连接问题

检查database/目录下的配置文件，确保数据库服务正常启动：

docker compose logs database

前端资源加载失败

确认Nginx配置正确：

cat reverse_proxy/nginx.conf

🎯 总结

通过Docker容器化技术，AtSea示例商店应用实现了快速部署和环境一致性。本指南展示了从代码获取到完整运行的全过程，让你能够在几分钟内搭建一个功能完善的电商平台。无论是学习容器技术还是作为电商项目的起点，AtSea应用都是一个理想的选择。

现在你已经掌握了AtSea示例商店应用的部署方法，可以开始探索其源代码，定制自己的电商功能了！

【免费下载链接】atsea-sample-shop-app A sample app that uses a Java Spring Boot backend connected to a database to display a fictitious art shop with a React front-end. 项目地址: https://gitcode.com/gh_mirrors/at/atsea-sample-shop-app