Appearance
项目2:搭建个人静态网站(Nginx)
安装Nginx服务器
Nginx是一个高性能的Web服务器,我们将学习如何在Linux系统上安装和配置Nginx。
在Ubuntu/Debian系统上安装
- 更新软件包列表:
bash
sudo apt update- 安装Nginx:
bash
sudo apt install nginx- 检查Nginx服务状态:
bash
sudo systemctl status nginx- 启动Nginx服务:
bash
sudo systemctl start nginx- 设置Nginx开机自启:
bash
sudo systemctl enable nginx在CentOS/RHEL系统上安装
- 安装EPEL仓库(如果尚未安装):
bash
sudo yum install epel-release- 安装Nginx:
bash
sudo yum install nginx- 启动Nginx服务:
bash
sudo systemctl start nginx- 设置Nginx开机自启:
bash
sudo systemctl enable nginx验证安装
打开浏览器,访问服务器的IP地址,如果看到Nginx的欢迎页面,则说明安装成功。
配置Nginx,部署静态网页
创建网站目录结构
- 创建网站根目录:
bash
sudo mkdir -p /var/www/mywebsite- 设置目录权限:
bash
sudo chown -R $USER:$USER /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite创建静态网页
- 创建index.html文件:
bash
nano /var/www/mywebsite/index.html- 添加以下内容:
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人网站</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的个人网站</h1>
</header>
<main>
<h2>关于我</h2>
<p>这是一个使用Nginx搭建的静态网站。</p>
<p>通过这个项目,我们学习了如何:</p>
<ul>
<li>安装Nginx服务器</li>
<li>配置Nginx虚拟主机</li>
<li>部署静态网页</li>
<li>测试网站访问</li>
</ul>
<h2>联系我</h2>
<p>邮箱:example@example.com</p>
</main>
<footer>
<p>© 2026 我的个人网站</p>
</footer>
</body>
</html>配置Nginx虚拟主机
- 创建Nginx配置文件:
bash
sudo nano /etc/nginx/sites-available/mywebsite- 添加以下内容:
nginx
server {
listen 80;
server_name example.com www.example.com;
root /var/www/mywebsite;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}- 创建符号链接:
bash
sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/- 测试Nginx配置:
bash
sudo nginx -t- 重新加载Nginx配置:
bash
sudo systemctl reload nginx测试网站访问,排查常见故障
测试网站访问
通过IP地址访问:
- 打开浏览器,输入服务器的IP地址
- 应该能看到我们创建的静态网页
通过域名访问(如果有域名):
- 确保域名已解析到服务器IP
- 打开浏览器,输入域名
- 应该能看到我们创建的静态网页
常见故障排查
1. Nginx服务未启动
- 检查服务状态:
bash
sudo systemctl status nginx- 启动服务:
bash
sudo systemctl start nginx2. 端口被占用
- 检查80端口占用情况:
bash
sudo netstat -tuln | grep 80- 如果端口被占用,停止占用端口的进程或修改Nginx配置使用其他端口
3. 防火墙阻止访问
- 检查防火墙状态:
bash
sudo ufw status- 允许80端口访问:
bash
sudo ufw allow 80/tcp4. 配置文件错误
- 检查Nginx配置:
bash
sudo nginx -t- 查看错误日志:
bash
sudo tail -f /var/log/nginx/error.log5. 文件权限问题
- 检查网站目录权限:
bash
ls -la /var/www/mywebsite/- 修复权限:
bash
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite性能优化建议
- 启用Gzip压缩:
在Nginx配置文件中添加:
nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1024;- 启用缓存:
在Nginx配置文件中添加:
nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}- 限制请求大小:
在Nginx配置文件中添加:
nginx
client_max_body_size 10M;通过以上步骤,我们成功搭建了一个基于Nginx的个人静态网站,并学习了如何排查常见故障。
