一文搞懂两台电脑一台做服务器网站的完整方案

网站被黑挂马不知道怎么办？网站被黑后不仅数据可能丢失，还会影响SEO排名，甚至导致用户信任度暴跌。很多人以为要花大钱请专业团队才能解决这类问题，其实自己也能搞定，只要掌握【两台电脑一台做服务器网站】的正确方法。本文将一文搞懂怎么用最基础的配置，搭建一个安全、稳定的网站服务器环境。

一、两台电脑一台做服务器网站的技术选型

想要搭建【两台电脑一台做服务器网站】的架构，你至少需要两台设备：一台作为服务器，一台作为客户端或测试机。这并非是高大上的云计算服务器方案，而是利用本地资源构建一个简单的私有网站环境，特别适合小型项目、测试环境、或者个人博客的搭建。

服务器端建议选择：

操作系统：Linux 系统（推荐 Ubuntu 20.04 或 CentOS 7）因其安全性强、资源占用少；
Web 服务器软件：Apache 或 Nginx，推荐使用 Nginx，因其轻量、性能高；
数据库：MySQL 或 PostgreSQL，MySQL 更适合小型项目；
代码部署：推荐使用 Git 管理版本，结合 Node.js 或 Python 环境部署前端和后端。

客户端/测试端建议配置：

操作系统：Windows 或 macOS，根据习惯选择；
开发工具：VS Code + Git + Postman（用于测试接口）；
浏览器：Chrome 或 Firefox，用于测试网站的兼容性。

选择技术栈时，务必遵循W3C 标准，确保前端代码的兼容性和可维护性，这对后期SEO优化、安全防护都有很大帮助。

二、两台电脑一台做服务器网站的搭建步骤

搭建【两台电脑一台做服务器网站】的流程可分为以下几个步骤：

1. 服务器端准备

安装操作系统

使用虚拟机（如 VMware 或 VirtualBox）或物理电脑安装 Ubuntu 20.04。
安装过程中选择“最小化安装”，减少不必要的软件资源占用。

安装 Nginx、MySQL 和 PHP

sudo apt update
sudo apt install nginx mysql-server php php-mysql

启动并配置 Nginx

sudo systemctl start nginx
sudo systemctl enable nginx

然后在 /etc/nginx/sites-available/ 下创建一个网站配置文件，例如 example.com.conf，并添加以下内容：

server {listen 80;server_name example.com;location / {root /var/www/html;index index.php index.html;try_files $uri $uri/ =404;}location ~ \.php$ {include snippets/fastcgi-php.conf;fastcgi_pass unix:/var/run/php/php-fpm.sock;}
}

接着使用以下命令启用配置并测试：

sudo ln -s /etc/nginx/sites-available/example.com.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

安装 PHP 并配置 MySQL

确保 PHP 和 MySQL 正常运行，使用以下命令检查：

php -v
mysql -u root -p

在 MySQL 中创建数据库和用户，并授权访问权限。

2. 客户端/测试端准备

配置本地 DNS

如果希望在本地测试访问 example.com，可以通过修改 hosts 文件，添加如下内容：

192.168.1.100 example.com

其中 192.168.1.100 是服务器的 IP 地址，确保客户端与服务器在同一局域网内。

使用 VS Code + Git 搭建前端环境

安装 VS Code 后，使用 Git 克隆前端项目到本地，运行 npm install 安装依赖，然后使用 npm start 启动开发服务器，检查页面是否正常加载。

3. 客户端与服务器端连接测试

在客户端浏览器中访问 http://example.com，确保能看到前端页面，并且后端 PHP 接口也能正常返回数据。

三、两台电脑一台做服务器网站的优化与安全策略

搭建好【两台电脑一台做服务器网站】后，还需做一些优化与安全防护，防止网站被黑、挂马。

1. 配置防火墙与 UFW

使用 Ubuntu 的 UFW 防火墙限制不必要的端口开放：

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw enable

2. 安装 SSL 证书（HTTPS）

虽然本地测试环境可能不需要 HTTPS，但为了保证安全性，建议配置 Let's Encrypt 免费 SSL 证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d example.com

这会自动更新 Nginx 配置并启用 HTTPS。

3. 定期备份与日志监控

设置定时备份脚本，每周备份数据库和网站文件：

sudo crontab -e

添加如下内容：

0 0 * * 0 /bin/bash /path/to/backup_script.sh

监控日志文件 /var/log/nginx/error.log 和 /var/log/auth.log，发现异常及时处理。

4. 限制用户权限与最小化安装

确保服务器运行的用户权限最小化，避免使用 root 账户登录，使用 sudo 时需输入密码。

四、前端设计与实现规范

在【两台电脑一台做服务器网站】中，前端设计也是关键一环，不仅要保证视觉美观，还要确保性能、可维护性与兼容性。

1. 设计原则

遵循以下原则可以提升网站的整体质量：

一致性：统一字体、颜色、间距、按钮样式等，提升用户认知；
可读性：文本层级清晰，字体大小、行高、颜色对比度合理；
响应式设计：适应不同屏幕尺寸，符合 W3C 响应式网页设计标准；
性能优化：图片压缩、代码精简、懒加载等策略，减少加载时间。

2. 布局与间距规范

布局采用 F 型视觉结构，主内容居中，左右为辅助信息；组件之间留出 16px 间距，按钮间距不小于 24px。

.container {max-width: 1200px;margin: 0 auto;padding: 0 20px;
}.section {margin-bottom: 24px;
}

3. 色彩与字体

推荐使用 Material Design 色系，主色使用 #2196F3（蓝色），辅助色使用 #FFC107（黄色），文字颜色推荐 #333333。

字体方面，推荐使用系统默认字体或 Google Fonts，如 Roboto、Open Sans。

body {font-family: 'Roboto', sans-serif;color: #333333;
}

4. 组件设计

组件如按钮、输入框、导航栏、卡片等，需保持统一样式与交互反馈。

button {padding: 10px 20px;border: none;border-radius: 4px;background-color: #2196F3;color: #fff;cursor: pointer;
}button:hover {background-color: #1976D2;
}

5. 前端代码实现

使用 HTML + CSS + JS 实现响应式页面，代码如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例网站</title><link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"><style>body {font-family: 'Roboto', sans-serif;margin: 0;padding: 0;background-color: #f9f9f9;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}.header {background-color: #2196F3;color: #fff;padding: 20px;text-align: center;}.content {margin-top: 20px;}.card {background: #fff;border: 1px solid #ddd;padding: 20px;margin-bottom: 20px;border-radius: 8px;}</style>
</head>
<body><div class="container"><div class="header"><h1>示例网站</h1></div><div class="content"><div class="card"><h2>欢迎来到示例网站</h2><p>这是使用 HTML、CSS 和 JS 构建的响应式页面。</p></div></div></div>
</body>
</html>