真的很简单，在服务器上部署带域名带HTTPS的静态网站

前言

最近写了一个小网站，想把它放到互联网上给朋友看看。
既然都要上线，就顺便把整个部署过程记录下来，方便以后自己复盘，也让遇到类似问题的人少踩坑。

这篇文章会从零开始：
先讲准备工作（域名、服务器、证书），再一步步配置 Nginx、申请 HTTPS 证书，最后把网站跑起来。
整个过程我会尽量保持简单清晰，能复用的配置都整理好。

我的操作环境

• 操作系统：Ubuntu 22.04
• 软件版本：Nginx 1.18.0, Certbot 2.x
• 硬件环境：腾讯云 2 核 4G 云服务器 (海外)
• 域名：9link.vip

国内服务器部署网站需要备案，不想备案可以选择香港服务器或海外服务器

必要条件

• 服务器能够ssh 登录，并拥有root 权限
• 云服务器拥有公网 IP
• 已注册可用的域名，并能修改 DNS

准备工作

• @ → 指向你的服务器 IP
  表示*.[域名]都会解析到你的服务器
• www → 指向你的域名
  表示www.[域名]会解析到[域名]
• [子域名] → 指向你的服务器 IP （可选）
  例如 子域名是pixel 域名是9link.vip 完整域名就是pixel.9link.vip
  如果不想搞子域名可以不加，这样完整域名就是9link.vip
  下面的示例都是以pixel.9link.vip为完整域名展示
  

sudo apt update && sudo apt -y upgrade
sudo apt install nginx curl -y

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

网站内容展示出来了，同时左侧展示的是小锁，而不是不安全字样，就是成功了

总结

整个过程难度并不大，希望你也能亲手试试，能在网上直接访问到自己的作品，感觉还是蛮不错的