真的很简单，在服务器上部署带域名带HTTPS的静态网站
前言
最近写了一个小网站，想把它放到互联网上给朋友看看。
既然都要上线，就顺便把整个部署过程记录下来，方便以后自己复盘，也让遇到类似问题的人少踩坑。
这篇文章会从零开始：
先讲准备工作（域名、服务器、证书），再一步步配置 Nginx、申请 HTTPS 证书，最后把网站跑起来。
整个过程我会尽量保持简单清晰，能复用的配置都整理好。
我的操作环境
- 操作系统：Ubuntu 22.04
- 软件版本：Nginx 1.18.0, Certbot 2.x
- 硬件环境：腾讯云 2 核 4G 云服务器 (海外)
- 域名：9link.vip
国内服务器部署网站需要备案，不想备案可以选择香港服务器或海外服务器
必要条件
- 服务器能够ssh 登录，并拥有root 权限
- 云服务器拥有公网 IP
- 已注册可用的域名，并能修改 DNS
准备工作
- 域名解析
在 DNS 控制台添加几条记录：
@→ 指向你的服务器 IP
表示*.[域名]都会解析到你的服务器www→ 指向你的域名
表示www.[域名]会解析到[域名][子域名]→ 指向你的服务器 IP （可选）
例如 子域名是pixel 域名是9link.vip 完整域名就是pixel.9link.vip
如果不想搞子域名可以不加，这样完整域名就是9link.vip
下面的示例都是以pixel.9link.vip为完整域名展示
- 安装 Nginx
sudo apt update && sudo apt -y upgrade
sudo apt install nginx curl -y
- 安装 Certbot
sudo snap install core && sudo snap refresh core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
- 保证端口开放
操作步骤
第一步：申请泛域名证书
运行命令：
# 我这里申请的是泛域名，只要域名是以.9link.vip（包括9link.vip）为结尾的域名都可以用这个证书
sudo certbot certonly --manual --preferred-challenges dns -d '*.[域名]' -d [域名]
# 示例 sudo certbot certonly --manual --preferred-challenges dns -d '*.9link.vip' -d 9link.vip
# 如果不是泛域名的示例 sudo certbot certonly --manual --preferred-challenges dns
-d 9link.vip -d www.9link.vip
Certbot 会提示你添加两条 _acme-challenge TXT 记录，如上图，不需要写后面的.[域名]部分，会自动拼接
添加示例：
等待解析生效后按 Enter，成功后你会看到：
这样就是成功申请了，但是要注意，这种免费的证书只有三个月的有效期，所以过时之后要重新申请
第二步：创建站点目录
# 创建根目录
sudo mkdir -p /var/www/[域名]/html # 示例 sudo mkdir -p /var/www/pixel.9link.vip/html
# 创建好之后把静态网站的文件放在html里
# 比如vite项目打包后的dist文件夹里的东西
# 可以利用winScp把把文件上传到不用权限的目录，再利用sudo cp -r 复制过去
# 配置目录权限
sudo chown -R www-data:www-data /var/www/[域名] # 示例 sudo chown -R www-data:www-data /var/www/pixel.9link.vip
第步：配置 Nginx
新建配置文件：
/etc/nginx/sites-available/[域名]： 示例： /etc/nginx/sites-available/pixel.9link.vip`
配置文件内容：
server {
listen 80;
server_name [域名];
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2;
server_name [域名]; # 你的域名
ssl_certificate [证书地址]; # fullchain.pem
ssl_certificate_key [证书地址]; # privkey.pem
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'EECDH+AESGCM:EECDH+CHACHA20:!aNULL:!MD5:!DES:!RC4';
ssl_prefer_server_ciphers on;
root /var/www/[域名]/html; # 网站根目录
index index.html; # 指定网站根目录文件
location / {
try_files $uri $uri/ =404;
}
}
以我的配置为例：
server {
listen 80;
server_name 9link.vip www.9link.vip;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2;
server_name 9link.vip www.9link.vip;
ssl_certificate /etc/letsencrypt/live/9link.vip/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/9link.vip/privkey.pem;
root /var/www/9link.vip/html;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
启用配置并重载：
# 创建符号链接，让 Nginx 知道要加载你的站点配置文件
sudo ln -s /etc/nginx/sites-available/[域名] /etc/nginx/sites-enabled/[域名]
# 示例 sudo ln -s /etc/nginx/sites-available/pixel.9link.vip /etc/nginx/sites-enabled/pixel.9link.vip
检查配置文件：
sudo nginx -t
应该输出
重载配置：
# 重启nginx
sudo nginx -t sudo systemctl reload nginx
第四步：验证 HTTPS
用浏览器访问 https://[域名] 示例 https://pixel.9link.vip
网站内容展示出来了，同时左侧展示的是小锁，而不是不安全字样，就是成功了
总结
整个过程难度并不大，希望你也能亲手试试，能在网上直接访问到自己的作品，感觉还是蛮不错的
