企业官网/B2B网站搭建部署完整教程（免费源码）

本教程将详细介绍如何从零开始搭建一个企业官网或B2B网站，包括产品展示、企业介绍等功能。即使您没有技术背景，按照本教程的步骤，也能成功部署一个专业的网站。

效果展示

http://010.fktool.com

技术栈介绍

• 前端：React/Next.js（现代化用户界面）
• 后端：Django（Python Web框架）
• 数据库：MySQL（数据存储）
• 服务器：Ubuntu + AWS
• Web服务器：Nginx（网站访问）
• SSL证书：Let’s Encrypt（安全访问）
• 域名：NameSilo
• 远程工具：SecureCRT

---

第一阶段：环境准备

1.1 本地开发环境搭建

安装必要软件

# 1. 安装Python 3.8+
# Windows: 从python.org下载安装包
# Mac: brew install python3
# Ubuntu: sudo apt install python3

# 2. 安装Node.js 16+
# 从nodejs.org下载安装包

# 3. 安装Git
# Windows: 从git-scm.com下载
# Mac: brew install git
# Ubuntu: sudo apt install git

# 4. 安装MySQL
# Windows: 下载MySQL安装包
# Mac: brew install mysql
# Ubuntu: sudo apt install mysql-server

验证安装

# 检查Python版本
python3 --version

# 检查Node.js版本
node --version

# 检查Git版本
git --version

# 检查MySQL版本
mysql --version

1.2 下载源码

克隆项目

# 创建项目目录
mkdir my-website
cd my-website

# 从GitHub下载源码
git clone https://github.com/geeeeeeeek/web_b2b.git

# 进入项目目录
cd web_b2b

项目结构说明

web_b2b/
├── frontend/          # 前端代码（React/Next.js）
├── backend/           # 后端代码（Django）
├── docs/             # 文档
├── README.md         # 项目说明
└── requirements.txt   # Python依赖

---

第二阶段：本地开发配置

2.1 后端配置

创建虚拟环境

# 进入后端目录
cd backend

# 创建Python虚拟环境
python3 -m venv venv

# 激活虚拟环境
# Windows:
venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate

# 安装依赖
pip install -r requirements.txt

配置数据库

# 启动MySQL服务
# Windows: 在服务中启动MySQL
# Mac: brew services start mysql
# Ubuntu: sudo systemctl start mysql

# 创建数据库
mysql -u root -p

在MySQL中执行：

CREATE DATABASE web_b2b CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'web_b2b_user'@'localhost' IDENTIFIED BY 'your_password';
GRANT ALL PRIVILEGES ON web_b2b.* TO 'web_b2b_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

配置Django设置

# 编辑配置文件
nano backend/web_b2b/settings.py

修改数据库配置：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'web_b2b',
        'USER': 'web_b2b_user',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

初始化数据库

# 执行数据库迁移
python manage.py makemigrations
python manage.py migrate

# 创建超级用户
python manage.py createsuperuser

# 启动开发服务器
python manage.py runserver

2.2 前端配置

安装依赖

# 进入前端目录
cd frontend

# 安装Node.js依赖
npm install

# 或者使用yarn
yarn install

配置环境变量

# 创建环境配置文件
nano .env.local

添加配置：

NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_SITE_NAME=我的企业网站

启动前端服务

# 启动开发服务器
npm run dev

# 或者使用yarn
yarn dev

2.3 测试本地环境

访问测试

• 后端管理：http://localhost:8000/admin
• 前端页面：http://localhost:3000
• API接口：http://localhost:8000/api

常见问题解决

# 如果端口被占用
# 后端：python manage.py runserver 8001
# 前端：npm run dev -- -p 3001

# 如果数据库连接失败
# 检查MySQL服务是否启动
# 检查用户名密码是否正确

---

第三阶段：自定义修改

3.1 基础信息修改

修改网站标题和描述

# 编辑前端配置文件
nano frontend/next.config.js

module.exports = {
  env: {
    SITE_NAME: '您的企业名称',
    SITE_DESCRIPTION: '您的企业描述',
  },
}

修改企业信息

# 编辑企业信息组件
nano frontend/components/CompanyInfo.js

修改企业信息：

const companyInfo = {
  name: '您的企业名称',
  address: '您的企业地址',
  phone: '您的联系电话',
  email: '您的邮箱地址',
  description: '您的企业介绍',
}

3.2 产品信息修改

添加产品数据

# 通过Django管理后台添加产品
# 访问 http://localhost:8000/admin
# 登录超级用户账号
# 在产品管理中添加您的产品信息

修改产品展示页面

# 编辑产品展示组件
nano frontend/components/ProductList.js

3.3 样式和主题修改

修改颜色主题

# 编辑样式文件
nano frontend/styles/globals.css

:root {
  --primary-color: #您的主题色;
  --secondary-color: #您的辅助色;
  --text-color: #您的文字颜色;
}

修改Logo和图片

# 替换Logo图片
# 将您的Logo文件复制到 frontend/public/images/ 目录
# 修改Logo引用路径

---

第四阶段：服务器准备

4.1 AWS服务器购买

选择服务器配置

• 实例类型：t3.micro（免费层）或 t3.small
• 操作系统：Ubuntu 20.04 LTS
• 存储：20GB SSD
• 安全组：开放80、443、22端口

连接服务器

# 使用SecureCRT连接服务器
# 主机：您的服务器公网IP
# 端口：22
# 用户名：ubuntu
# 认证方式：密钥文件或密码

4.2 服务器环境配置

更新系统

# 更新系统包
sudo apt update
sudo apt upgrade -y

# 安装必要软件
sudo apt install -y nginx mysql-server python3 python3-pip python3-venv nodejs npm git

配置防火墙

# 配置UFW防火墙
sudo ufw allow 22
sudo ufw allow 80
sudo ufw allow 443
sudo ufw enable

配置MySQL

# 安全配置MySQL
sudo mysql_secure_installation

# 创建数据库和用户
sudo mysql -u root -p

在MySQL中执行：

CREATE DATABASE web_b2b CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'web_b2b_user'@'localhost' IDENTIFIED BY 'your_secure_password';
GRANT ALL PRIVILEGES ON web_b2b.* TO 'web_b2b_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

---

第五阶段：代码部署

5.1 上传代码到服务器

使用Git部署

# 在服务器上克隆项目
cd /var/www
sudo git clone https://github.com/geeeeeeeek/web_b2b.git
sudo chown -R ubuntu:ubuntu web_b2b
cd web_b2b

或者使用SecureCRT上传

# 使用SecureCRT的文件传输功能
# 将本地修改后的代码上传到服务器
# 上传到 /home/ubuntu/web_b2b/ 目录

5.2 后端部署

配置Python环境

# 进入后端目录
cd backend

# 创建虚拟环境
python3 -m venv venv
source venv/bin/activate

# 安装依赖
pip install -r requirements.txt
pip install gunicorn

配置Django生产设置

# 编辑生产配置文件
nano web_b2b/settings.py

修改关键配置：

DEBUG = False
ALLOWED_HOSTS = ['your-domain.com', 'your-server-ip']

# 静态文件配置
STATIC_ROOT = '/var/www/web_b2b/static/'

# 数据库配置
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'web_b2b',
        'USER': 'web_b2b_user',
        'PASSWORD': 'your_secure_password',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

初始化数据库

# 执行数据库迁移
python manage.py makemigrations
python manage.py migrate

# 收集静态文件
python manage.py collectstatic

# 创建超级用户
python manage.py createsuperuser

5.3 前端部署

构建前端

# 进入前端目录
cd frontend

# 安装依赖
npm install

# 构建生产版本
npm run build

配置Nginx

# 创建Nginx配置文件
sudo nano /etc/nginx/sites-available/web_b2b

添加配置：

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;

    # 前端静态文件
    location / {
        root /var/www/web_b2b/frontend/out;
        try_files $uri $uri/ /index.html;
    }

    # 后端API
    location /api/ {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 静态文件
    location /static/ {
        alias /var/www/web_b2b/static/;
    }
}

启用站点

# 创建软链接
sudo ln -s /etc/nginx/sites-available/web_b2b /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重启Nginx
sudo systemctl restart nginx

---

第六阶段：域名和SSL配置

6.1 域名配置

在NameSilo购买域名

1. 访问 namesilo.com
2. 搜索并购买您想要的域名
3. 配置DNS解析

配置DNS记录

在NameSilo的DNS管理中添加：

类型: A
主机: @
值: 您的AWS服务器IP
TTL: 300

类型: A
主机: www
值: 您的AWS服务器IP
TTL: 300

6.2 SSL证书配置

安装Certbot

# 安装Certbot
sudo apt install certbot python3-certbot-nginx

# 获取SSL证书
sudo certbot --nginx -d your-domain.com -d www.your-domain.com

# 测试自动续期
sudo certbot renew --dry-run

配置自动续期

# 添加定时任务
sudo crontab -e

添加以下行：

0 12 * * * /usr/bin/certbot renew --quiet

---

第七阶段：服务管理

7.1 配置Gunicorn服务

创建服务文件

# 创建systemd服务文件
sudo nano /etc/systemd/system/web_b2b.service

添加配置：

[Unit]
Description=Web B2B Django Application
After=network.target

[Service]
User=ubuntu
Group=ubuntu
WorkingDirectory=/var/www/web_b2b/backend
Environment="PATH=/var/www/web_b2b/backend/venv/bin"
ExecStart=/var/www/web_b2b/backend/venv/bin/gunicorn --workers 3 --bind 127.0.0.1:8000 web_b2b.wsgi:application
Restart=always

[Install]
WantedBy=multi-user.target

启动服务

# 重新加载systemd
sudo systemctl daemon-reload

# 启动服务
sudo systemctl start web_b2b

# 设置开机自启
sudo systemctl enable web_b2b

# 检查服务状态
sudo systemctl status web_b2b

7.2 监控和维护

查看日志

# 查看应用日志
sudo journalctl -u web_b2b -f

# 查看Nginx日志
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

备份数据库

# 创建备份脚本
nano backup.sh

#!/bin/bash
DATE=$(date +%Y%m%d_%H%M%S)
mysqldump -u web_b2b_user -p web_b2b > backup_$DATE.sql

# 设置执行权限
chmod +x backup.sh

# 添加到定时任务
crontab -e

添加：

0 2 * * * /home/ubuntu/backup.sh

---

第八阶段：测试和优化

8.1 功能测试

测试清单

• 网站首页正常访问
• 产品展示页面正常
• 企业介绍页面正常
• 联系表单功能正常
• 管理后台可以登录
• 产品管理功能正常
• 移动端显示正常
• SSL证书正常工作

性能测试

# 测试网站加载速度
curl -w "@curl-format.txt" -o /dev/null -s "https://your-domain.com"

# 测试数据库连接
mysql -u web_b2b_user -p -e "SELECT COUNT(*) FROM django_content_type;"

8.2 SEO优化

配置SEO设置

# 编辑前端SEO组件
nano frontend/components/SEO.js

const SEO = {
  title: '您的企业名称 - 专业的产品和服务',
  description: '您的企业描述和关键词',
  keywords: '关键词1,关键词2,关键词3',
}

提交网站地图

# 生成网站地图
# 访问 https://your-domain.com/sitemap.xml
# 在Google Search Console提交网站地图

---

常见问题解决

问题1：网站无法访问

# 检查Nginx状态
sudo systemctl status nginx

# 检查防火墙设置
sudo ufw status

# 检查端口是否开放
sudo netstat -tlnp | grep :80

问题2：数据库连接失败

# 检查MySQL服务
sudo systemctl status mysql

# 检查数据库用户权限
mysql -u root -p -e "SHOW GRANTS FOR 'web_b2b_user'@'localhost';"

问题3：SSL证书问题

# 检查证书状态
sudo certbot certificates

# 重新申请证书
sudo certbot --nginx -d your-domain.com

问题4：静态文件404

# 重新收集静态文件
cd /var/www/web_b2b/backend
source venv/bin/activate
python manage.py collectstatic

# 检查Nginx配置
sudo nginx -t
sudo systemctl restart nginx

---

总结

恭喜您！现在您已经成功部署了一个完整的企业官网/B2B网站。这个网站具备以下特点：

✅ 已完成的配置

• 现代化的前端界面（React/Next.js）
• 强大的后端API（Django）
• 安全的数据存储（MySQL）
• 高性能的Web服务器（Nginx）
• 安全的HTTPS访问（Let’s Encrypt）
• 专业的域名配置（NameSilo）
• 稳定的服务器环境（AWS Ubuntu）

🚀 网站功能

• 企业信息展示
• 产品目录管理
• 响应式设计
• 管理后台
• SEO优化
• 安全防护

📈 后续优化建议

1. 性能优化：启用CDN、图片压缩
2. 安全加固：定期更新、安全扫描
3. 功能扩展：添加在线客服、支付功能
4. 营销推广：SEO优化、社交媒体推广

🔧 维护要点

• 定期备份数据库
• 监控服务器资源
• 更新SSL证书
• 检查安全漏洞