HTML项目部署到服务器的完整步骤

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《HTML项目部署到服务器的步骤详解》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

HTML项目部署本质是将文件放入Web服务器可访问目录，需确认Nginx/Apache已运行、文件放对路径（如/var/www/html）、权限正确、静态资源路径合理，并配置try_files支持前端路由，HTTPS和域名需同步处理DNS与证书续期。

HTML 项目不需要编译或运行时环境，部署本质就是把文件放到 Web 服务器能访问的目录里——但很多人卡在权限、路径、域名绑定或 HTTP 重定向上。

确认服务器有没有 Web 服务（Nginx / Apache）

很多新手以为“上传文件就完事”，结果浏览器打不开，其实是服务器根本没开 Web 服务。先 SSH 登录，检查：

• systemctl status nginx 或 systemctl status apache2 —— 看是否 active (running)
• 如果没装，Ubuntu/Debian 用 sudo apt install nginx；CentOS 用 sudo yum install nginx
• 启动后记得开放端口：sudo ufw allow 'Nginx Full'（Ubuntu）或检查 firewalld

把 HTML 文件放对位置（别硬塞到 /root）

Nginx 默认网站根目录是 /var/www/html，Apache 是 /var/www/html（Ubuntu）或 /var/www（CentOS）。上传时必须放这里，或者改配置指向你自己的路径。

• 推荐做法：用 scp 把本地 dist/ 或 build/ 目录传上去：
  

  scp -r ./dist/* user@your-server-ip:/var/www/html/

• 别用 FTP 工具乱传到 /home/user/my-site —— 没配置的话，Nginx 根本不会读那个路径
• 上传后检查权限：sudo chown -R $USER:www-data /var/www/html（Ubuntu），否则可能 403 Forbidden

遇到 404 或 403 错误，优先查三件事

不是代码写错了，而是服务器层面拦住了请求。

• 403 Forbidden：多半是目录没开读取权限，或 index.html 不在根目录，或 Nginx 配置里漏了 index index.html;
• 404 Not Found：检查浏览器地址栏是不是带了多余路径（比如访问 http://ip/test/index.html 但你只传了 index.html 到 /var/www/html）
• 空白页 + 控制台报错 net::ERR_ABORTED：静态资源路径写死了绝对路径（如 /css/style.css），但你的站点没部署在域名根路径下——改用相对路径（css/style.css）或配 Nginx 的 location 前缀

需要 HTTPS 或自定义域名？别跳过证书和 DNS 步骤

Let’s Encrypt 免费证书很方便，但容易忽略两件事：自动续期和 DNS 解析生效时间。

• 用 certbot --nginx -d your-domain.com 一键配好 HTTPS，但必须确保 your-domain.com 的 A 记录已指向服务器 IP（DNS 可能缓存 24 小时）
• 证书默认 90 天，加个 cron 自动续期：

  0 12 * * 1 /usr/bin/certbot renew --quiet --post-hook "/usr/bin/systemctl reload nginx"

• 如果只是本地测试或内网访问，别折腾域名和证书——直接用 IP + 端口，或改 Hosts 绑定临时域名更省事

最常被忽略的是：HTML 项目没有后端路由，所以前端用 history.pushState（比如 Vue Router 的 history 模式）时，Nginx 必须配 try_files $uri $uri/ /index.html;，否则刷新页面就 404。这个点不在“部署流程”里，却让很多人反复重装服务器。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。