静态网站部署

发表于

#静态网站部署

##案例环境

本案例所使用的本地计算机系统为Windows 11；云服务器位于香港，系统为Debian 12.7，全程使用root账户。

##1、本地计算机配置

###a 安装WinCSP

WinCSP是一种方便易用的免费图形化工具，用于远程连接计算机并进行文件传输。

它的使用十分简单，界面逻辑类似于安卓端的MT管理器。以下是远程连接你的服务器的步骤：

####下载并安装WinCSP

Download WinCSP

####启动软件，新建会话：

1
2
3
4
协议：SFTP
主机名：服务器IP
端口：22
用户名/密码：依据你所设置的服务器凭证而定

如无法连接，请首先检查用户名/密码，其次检查服务器防火墙中的端口是否放通。如无意外基本都能顺利连接。

界面左侧为本地计算机文件，右侧为服务器目录。拖曳即可实现文件上传/下载操作。该软件支持断点续传与权限修改。

##2、服务器端配置

###a 安装Nginx

更新系统。

1
sudo apt upgrade && sudo apt upgrade -y

安装Nginx。

1
sudo apt install nginx -y

启动并设置开机自启动。

1
2
sudo systemctl start nginx
sudo systemctl enable nginx

###b 配置网站目录

这里假设你已经申请了形如yourdomain.com的域名并进行了DNS解析。解析过程很简单，网络上的相关资料很多，在此不再赘述。

如果你所使用的云服务器位于中国境内，则需要进行ICP备案与公安备案才可以被合法访问；如果你已经进行过备案或所使用的服务器位于中国境外，则忽略备案需求。请务必保证网页内容合法合规。

请自行将代码块内的yourdomain.com替换为你的域名。

创建网站根目录并设置所有权与权限。

1
2
3
sudo mkdir -p /var/www/yourdomain.com/public_html
sudo chown -R www-data:www-data /var/www/yourdomain.com
sudo chmod -R 755 /var/www/yourdomain.com

###c 创建Nginx配置文件

请注意，配置文件的文件名中不包含域名后缀即yourdomain.com中形如“.com”的部分。

运行如下命令编辑配置。

1
sudo nano /etc/nginx/sites-available/yourdomain.conf

在打开的文件编辑图形化界面中清空内容并粘贴如下内容（替换yourdomain.com）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    
    root /var/www/yourdomain.com/public_html;
    index index.html index.htm;
    
    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    location ~ /\.ht {
        deny all;
    }
}

在这里，如果你使用的服务器为境内大厂的云服务器，可以直接使用控制台中集成的SFTP文件管理器完成配置的创建与编辑操作。但务必保证文件的权限至少为各用户可读的权限。

也可以用前面所在本地计算机安装并配置的WinCSP进行上述操作。

###d 启用配置

1
2
3
4
sudo ln -s /etc/nginx/sites-available/yourdomain.conf /etc/nginx/sites-enabled/#创建符号连接
sudo rm /etc/nginx/sites-enabled/default#删除默认配置
sudo nginx -t#测试配置，请注意此处的报错信息（如有）
sudo systemctl restart nginx#重启Nginx

###e 配置防火墙

1
2
sudo ufw allow 'Nginx HTTP'
sudo ufw enable

###f 配置SSL证书

直接部署网站是缺乏加密的，在这种情况下终端与服务器的数据传输是明文进行的，很容易受到窃听而泄密。即使你的网站不涉及密码等敏感信息，也建议进行证书配置，这是因为现代浏览器一般会对用户访问未配置加密的网站的行为进行警告，以督促网站运营者进行配置以提高安全性。

SSL证书的配置十分简单。我们可以使用Let’s Encrypt免费证书与Certbot工具，结合我们前面所安装的Nginx进行自动配置。

此外，DNS解析也是必要的，如果DNS未广泛解析，可能导致自动配置失败，建议尝试其它方法或等待一段时间再进行。

####安装Certbot

1
2
sudo apt update && sudo apt upgrade -y
sudo apt install certbot python3-certbot-nginx -y

####获取并安装SSL证书

1
sudo certbot --nginx -d yourdomain.com

请按提示输入你的信息，并按提示同意服务条款。

此外，请在“是否将HTTP重定向到HTTPS”选择“强制重定向”所对应的选项。

####验证证书生效

1
2
sudo nginx -t
sudo systemctl reload nginx#测试并重载配置

同时，请清除浏览器缓存并访问你的域名，确认显示🔒安全标识。

使用SSL Labs 测试检查证书评分。

如果评分为A以上，恭喜你成功配置了SSL证书并生效。

####设置自动续期

Let’s Encrypt证书的有效期为90天，需要自动续期：

1
2
sudo certbot renew --dry-run
sudo crontab -e

选择第一个文件打开并在末尾添加以下行：

1
30 2 * * * /usr/bin/certbot renew --quiet && systemctl reload ngin

这就完成了SSL证书配置的全部操作。

#3、#本地计算机操作

这里假设你已经制作好了你的静态网页文件。本案例使用hexo生成，网页文件存在于根目录下的public目录中。

启动WinCSP并连接服务器。

在左侧打开本地静态网站目录（此处为Hexo的public文件夹目录）

在右侧服务器路径打开/var/www/yourdomain.com/public_html

全选左侧本地文件并拖曳上传到右侧服务器窗口。如弹出“是否覆盖”则确认。

这样就完成了部署操作。

##测试与维护

###服务器端检查

1
2
3
ls -la /var/www/yourdomain.com/public_html# 检查文件是否存在
systemctl status nginx# 检查 Nginx 状态
tail -f /var/log/nginx/access.log# 查看访问日志

###浏览器访问

进行DNS解析后访问你的域名，如显示与在本地localhost:4000相同的内容则成功（废话）

###维护命令

服务器端：

1
2
3
4
sudo tail -f /var/log/nginx/access.log# 查看实时访问日志
sudo apt update && sudo apt upgrade -y# 安全更新
sudo systemctl restart nginx# 重启服务
sudo tar -czvf website_backup.tar.gz /var/www/yourdomain.com# 备份网站