云服务器体验个人网站开发（前端react+后端python django框架开发个人网站）

领取华为云（或其他平台云服务）试用1个月。平台会提供云服务器、公网IP，在平台控制台领取即可。
以下内容在已完成系统安装、安全组、公网IP、SSH端口等相关配置之后，即ubuntu系统启动之后的所有配置
（华为云flexus服务器，试用一个月，ubuntu 22.04）

系统更新（强烈建议）

sudo apt update && sudo apt upgrade -y

可修复安全漏洞并保证软件包最新。

udo apt update && sudo apt install -y build-essential cmake git libboost-all-dev

可能遇到的问题

1 成功安装了 CMake 3.31.7，但运行时出现这个错误：

-bash: /usr/bin/cmake: 没有那个文件或目录
这是因为 系统依然指向旧的 /usr/bin/cmake，而你新编译的 CMake 安装到了其他路径，例如 /usr/local/bin/cmake。

✅ 解决方法：更新系统的 CMake 路径

① 确认新版本 CMake 安装位置：
运行以下命令：

which cmake

如果没有输出，尝试：

ls /usr/local/bin/cmake

输出应为：

/usr/local/bin/cmake

② 将 /usr/local/bin 加入优先路径
编辑你的 bash 配置文件（一般是 ~/.bashrc）：

nano ~/.bashrc

在文件末尾添加：

export PATH=/usr/local/bin:$PATH

保存并退出（Ctrl+O，回车，Ctrl+X），然后使配置生效：

source ~/.bashrc

③ 验证成功：

cmake –version

输出应为：

cmake version 3.31.7

开发和部署 React + Python + Django 的 Web 网页

环境配置

计划安排：

npm run build

本地虚拟机环境配置（开发环境）

sudo apt update
sudo apt upgrade -y

# 添加 NodeSource 仓库（Node.js 16.x LTS 版本）
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash –

# 安装 Node.js 和 npm
sudo apt install -y nodejs

# 验证安装
node -v
npm -v

# 安装 Python 3 和 pip（如果尚未安装）
sudo apt install -y python3 python3-pip

# 检查 Python 和 pip 版本
python3 –version
pip3 –version

# 安装 Django
pip3 install django

# 检查 Django 版本
django-admin –version

# 安装 MySQL 服务器
sudo apt install -y mysql-server

# 安装 MySQL Python 驱动
sudo apt install -y python3-mysqldb

# 安装完成后，启动 MySQL 服务
sudo service mysql start

# 配置 MySQL（设置 root 密码等）
sudo mysql_secure_installation

# 安装 Git
sudo apt install -y git

# 检查 Git 版本
git –version

创建项目

项目的整体架构可以如下所示：

• 前端 (React)

  • 显示初始界面和欢迎词。
  • 提供选择关卡数的下拉框。
  • 进行闯关游戏并展示每一关的状态。
  • 显示恭喜文本和返回按钮。
  • 提供返回按钮，允许在游戏过程中退出并回到初始界面。

• 后端 (Django)

  • 接收前端请求，处理游戏逻辑。
  • 根据选择的关卡数返回每一关的成功或失败结果。
  • 提供前端所需的API接口。

npx create-react-app game-frontend
cd game-frontend

2.2 设计初始界面
在 src/App.js 文件中，设计网页的初始界面：

import React, { useState } from 'react';
import './App.css';

function App() {
const [level, setLevel] = useState(null); // 当前关卡
const [status, setStatus] = useState(null); // 游戏状态
const [steps, setSteps] = useState(0); // 当前闯关步数

const startGame = (level) => {
setLevel(level);
setStatus("游戏进行中…");
setSteps(1);
};

const handleGame = () => {
const success = Math.random() < 0.5; // 50% 的成功概率
if (success) {
setSteps(steps + 1);
} else {
setSteps(1); // 失败，回到第一关
}
};

const resetGame = () => {
setLevel(null);
setStatus(null);
setSteps(0);
};

const handleReturn = () => {
resetGame();
};

return (
<div className="App">
{level === null ? (
<div className="start-screen">
<h1>欢迎来到闯关游戏</h1>
<label>请选择关卡数（3–10）：</label>
<input
type="number"
min="3"
max="10"
onChange={(e) => setLevel(e.target.value)}
value={level || ''}
/>
{level && (
<button onClick={() => startGame(parseInt(level))}>开始游戏</button>
)}
</div>
) : (
<div className="game-screen">
<h2>当前关卡: {steps}/{level}</h2>
<button onClick={handleGame}>闯关</button>
<button onClick={handleReturn}>返回初始界面</button>
{steps > level ? (
<div className="success-message">
<h1>恭喜你成功闯关！</h1>
<button onClick={resetGame}>返回初始界面</button>
</div>
) : (
<h3>{status}</h3>
)}
</div>
)}
</div>
);
}

export default App;

2.3 样式设计
创建简约风格的样式，修改 src/App.css：

.App {
text-align: center;
font-family: Arial, sans-serif;
}

.start-screen, .game-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}

button {
padding: 10px 20px;
margin-top: 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #45a049;
}

input {
padding: 10px;
font-size: 16px;
width: 60px;
}

.success-message {
margin-top: 30px;
}

2.4 运行前端

npm start

django-admin startproject game_backend
cd game_backend

3.2 创建 Django 应用
创建一个名为 game 的应用来处理游戏逻辑：

python3 manage.py startapp game

3.3 设置 Django REST Framework
安装 Django REST Framework 用于创建 API：

pip3 install djangorestframework

在 game_backend/settings.py 中添加 rest_framework 到 INSTALLED_APPS：

INSTALLED_APPS = [
...
'rest_framework',
'game',
]

3.4 创建 API 接口
在 game/views.py 中创建一个视图，用于处理游戏逻辑：

from rest_framework.views import APIView
from rest_framework.response import Response
import random

class GameView(APIView):
def get(self, request):
level = int(request.query_params.get('level', 3)) # 获取关卡数
success = random.random() < 0.5 # 50% 成功概率
return Response({'success': success, 'level': level})

3.5 配置 URL
在 game_backend/urls.py 中配置 API 路由：

from django.urls import path
from game.views import GameView

urlpatterns = [
path('api/game/', GameView.as_view(), name='game'),
]

3.6 启动 Django 服务器
运行以下命令启动 Django 开发服务器：

python3 manage.py runserver

安装 axios：

npm install axios

在 React 中调用后端 API：
修改 handleGame 方法，调用后端的 API 获取成功与否的信息。

import axios from 'axios';

// 修改 handleGame 方法
const handleGame = async () => {
try {
const response = await axios.get(`http://localhost:8000/api/game/?level=${level}`);
const success = response.data.success;
if (success) {
setSteps(steps + 1);
} else {
setSteps(1); // 失败，回到第一关
}
} catch (error) {
console.error("Error fetching data from backend", error);
}
};

python3 manage.py runserver 0.0.0.0:8000 &

前端启动方式：

npm start

部署

前端：使用 npm run build 打包 React 应用，并部署到 Nginx 或其他 Web 服务器。

后端：可以使用 Gunicorn 和 Nginx 部署 Django 后端。

云服务器环境配置（发布环境）

安装 Nginx
Nginx 用于反向代理，将请求转发到 Django 后端服务。

sudo apt update
sudo apt install nginx

安装完成后，你可以通过以下命令启动并检查 Nginx 服务是否正常运行：

sudo systemctl start nginx
sudo systemctl enable nginx
sudo systemctl status nginx

安装 Gunicorn
Gunicorn 是 Python WSGI 服务器，它用于部署 Django 应用。

pip install gunicorn

npm run build

这会在 build/ 目录中生成一个可供生产使用的静态文件集。
构建后端项目
运行

python manage.py collectstatic

收集所有静态文件，生成静态文件目录。

使用 pip freeze 导出当前的 Python 依赖环境，生成 requirements.txt 文件：

pip freeze > requirements.txt

这个文件会包含项目所需的所有 Python 包，可以在发布环境中通过 pip install -r requirements.txt 来安装。

scp -r /path/to/react/build user@your-server:/path/to/deploy/react-build
scp -r /path/to/django/project user@your-server:/path/to/deploy/django-project

# 压缩
tar -xzvf archive_name.tar.gz -C /path/to/destination_directory
#解压缩
tar -xzvf archive_name.tar.gz -C /path/to/destination_directory

修改 Nginx 配置文件：

sudo nano /etc/nginx/sites-available/default

添加以下内容：

server {
listen 80;
server_name 1.95.123.217;

# 提供 React 前端的静态文件
location / {
root /path/to/deploy/react-build;
try_files $uri /index.html;
}

# 提供 Django 的静态文件
location /static/ {
alias /path/to/deploy/django-project/static/;
}

# 反向代理请求到 Gunicorn，就是后端django的地址，在相同机器上使用127的方式即可
location /api/ {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}

这样，Nginx 会：

提供 React 前端的静态文件。

提供 Django 项目的静态文件。

将 /api/ 路径的请求代理到 Gunicorn 后端。

cd /path/to/deploy/django-project
gunicorn –workers 3 –bind unix:/path/to/deploy/django-project/your_project.sock your_project_name.wsgi:application

sudo nano /etc/systemd/system/gunicorn.service

内容如下：

[Unit]
Description=gunicorn daemon for Django project
After=network.target

[Service]
User=your_user
Group=your_user_group
WorkingDirectory=/path/to/deploy/django-project
ExecStart=/path/to/your/venv/bin/gunicorn –workers 3 –bind unix:/path/to/deploy/django-project/your_project.sock your_project_name.wsgi:application

[Install]
WantedBy=multi-user.target

然后启动 Gunicorn 服务并设置开机自启：

sudo systemctl start gunicorn
sudo systemctl enable gunicorn

重启 Nginx 服务：

sudo systemctl restart nginx