1panel 面板怎么部署静态网站

学完这篇，你能在自己的 1Panel 面板上把一个纯静态网站（HTML/CSS/JS）部署到公网可访问，并顺手配好 HTTPS 证书。下面按操作顺序一步步来。

第一步：确认 1Panel 已装好，并放行端口

这一步要确认面板能正常登录、网站要用的端口已经打开，做完后你才有地方创建站点。

假设你用的是 Ubuntu 22.04 / Debian 12 / CentOS 7 以上系统，1Panel 版本以 v1.10.x 为例。如果还没装，SSH 登录服务器执行官方安装脚本：

curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

安装过程会让你设置面板端口、安全入口和账号密码，记下来。装完浏览器访问 http://服务器IP:面板端口/安全入口 登录。

接着把 80、443 端口放行：云服务器控制台的「安全组」里添加规则放行 TCP 80 和 443；服务器本机防火墙则在 1Panel 左侧菜单「主机」→「防火墙」里，点「添加端口规则」，端口填 80、443，协议 TCP，策略放行。

注意：面板端口本身也要在安全组放行，否则登录页面打不开。很多「部署完访问不了」的问题，根源都在安全组没放行。

第二步：创建静态网站

这一步在 1Panel 里登记一个站点，做完后网站列表会出现你的域名，Nginx 配置自动生成。

左侧菜单点「网站」，进入「网站」标签页，点右上角「创建网站」按钮。在弹出的表单里：

• 「网站类型」选「静态网站」
• 「主域名」填你的域名，例如 www.example.com
• 「代号」会自动生成，也可以自己改，比如 example
• 「网站目录」会自动填成 /opt/1panel/www/sites/example/index，保持默认即可
• 「端口」默认 80，如果 80 已被其他站点占用，面板会提示，按提示改或先停掉占用者

点「确认」，网站列表里出现这条记录，说明站点创建成功。此时访问域名大概率会看到一个 1Panel 的默认欢迎页，这是因为目录里还没有你的文件。

注意：如果提示 Nginx/OpenResty 未安装，先在「应用商店」里安装 OpenResty，再回来创建网站。

第三步：上传静态文件

这一步把你的 HTML、CSS、JS 放进去，做完后域名就能显示你自己的页面。

左侧菜单点「文件」，地址栏进入 /opt/1panel/www/sites/example/index。先勾选目录里的默认 index.html 删除，再点「上传」按钮，把本地打包好的文件（至少包含 index.html）传上去。如果文件在压缩包里，上传后右键压缩包选「解压」。

也可以从网站列表直接点网站名称，在「根目录」处点进去，效果一样。

注意：入口文件必须叫 index.html 并放在根目录，否则访问会 404 或仍然显示默认页。Vue、React 打包后 dist 目录里的文件要传到这个目录，而不是再套一层文件夹。

第四步：解析域名并验证

这一步让域名指向服务器，做完后公网能正常打开网站。

到你的域名服务商控制台，添加一条 A 记录，主机记录填 www（或 @），记录值填服务器公网 IP，TTL 默认即可。等待几分钟生效后，浏览器访问 http://www.example.com，能看到你的页面就成了。

注意：解析没生效前不要急着申请证书，会失败。可以用 ping www.example.com 看返回的 IP 是不是你的服务器。

第五步：配置 HTTPS 证书

这一步给站点加上 https，做完后浏览器地址栏出现小锁。

左侧「网站」→「网站」列表点你的网站名称，进入详情页，切到「HTTPS」标签，点「申请证书」。证书类型选「Let's Encrypt」，填一个常用邮箱，勾选你的域名，点「确认」。1Panel 会自动完成验证、签发并重载 Nginx。签发成功后开启「强制 HTTPS」，访问 http 会自动跳到 https。

注意：Let's Encrypt 申请证书需要 80 端口对公网可达，Cloudflare 之类的 CDN 如果开了「代理」模式可能干扰验证，申请时先临时切到「仅 DNS」，成功后再开回来。

第六步：单页应用补一条伪静态规则

这一步只针对 Vue/React 这类前端路由项目，做完后刷新子页面不会 404。

在网站详情页找到「配置文件」标签（部分版本叫「伪静态」），在 server {} 块里加入：

location / {
    try_files $uri $uri/ /index.html;
}

保存后 1Panel 会自动校验并重载 Nginx。

注意：配置写错会导致重载失败，站点直接 502/无法访问，改完先看面板有没有报错提示。

小结

• 部署静态网站的核心就三步：在「网站」里创建「静态网站」类型站点、往 /opt/1panel/www/sites/站点代号/index 传文件、解析域名。
• 访问不了的排查顺序：安全组是否放行 80/443 → 域名解析是否生效 → 根目录是否有 index.html。
• HTTPS 在网站详情页的「HTTPS」标签里申请 Let's Encrypt 证书，申请前确保 80 端口可达。
• 前端路由项目记得加 try_files $uri $uri/ /index.html;，否则刷新子页面 404。