如何将 AI 生成的 Vibe Coding 网站部署到 Plesk 主机

如何将 Vibe Coding 网站部署到 Plesk 主机 —— 如今越来越多的人使用 Claude Code、Cursor、Lovable、Bolt、v0 或 Replit 等 AI 工具来搭建网站，也就是所谓的 "Vibe Coding"：用自然语言描述需求，由 AI 编写代码，几个小时就能得到一个可用的网站。但很多人卡在下一步：如何把网站放到自己的主机上。本文介绍在 Plesk 上可用的三种方法，从简单的文件上传，到从 GitHub 自动部署，再到运行 Node.js 应用。

什么是 Vibe Coding 网站，应该选择哪种方法

AI 生成的代码大多是现代 JavaScript 项目（React、Vite、Next.js、Astro、Express 等），上线前需要先构建（build）。首先要确认项目的输出属于哪一类：

• 静态网站：构建后得到一个只包含 HTML/CSS/JS 文件的文件夹（如 dist/ 或 out/），任何 Web 服务器都能直接提供访问，无需常驻运行 Node.js。
• Node.js 应用：包含需要持续运行的服务器端代码，例如 API、登录系统或服务器端渲染（SSR）。

如果不确定，可以直接问生成项目的 AI 工具："这个项目能否构建为静态网站？输出文件夹叫什么？"

上传前准备项目

1. 先在本地构建成功。本地构建失败，服务器上也一定会失败。
2. 检查输出文件夹。Vite 和 Astro 使用 dist/，Next.js 静态导出使用 out/。确认其中有 index.html。
3. 不要提交密钥。API 密钥、数据库密码应放在 .env 文件中，并且该文件必须写入 .gitignore。有些 AI 工具会把密钥直接写进代码，每次都要检查。

# 安装依赖并构建
npm ci
npm run build

# 确认输出文件夹中有 index.html
ls dist/        # Vite / Astro
ls out/         # Next.js（output: 'export'）

# 确认 .env 没有被 Git 跟踪
git check-ignore .env && echo "OK: .env 已被忽略"

Next.js 静态导出需在 next.config.js 中这样配置（建议加上 trailingSlash: true，让每个页面生成为 /about/index.html，普通 Web 服务器即可直接提供访问）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
};

module.exports = nextConfig;

注意：静态导出不能使用需要服务器的功能，例如 Server Actions、Cookies、配置中的 Rewrites/Redirects，以及默认的图片优化。如果项目用到这些功能，请使用方法三。

方法一：通过文件管理器上传静态网站

适合很少更新的小型网站，无需额外配置。

1. 将 dist/（或 out/）文件夹里面的文件压缩为 ZIP。不要压缩整个文件夹，否则网站会出现在 /dist/ 路径下。
2. 在 Plesk 中进入 Websites & Domains，在域名的 Dashboard 中点击 Files（位于 Files & Databases 分组）打开文件管理器（File Manager）。
3. 打开 httpdocs 文件夹（主域名的默认文档根目录，路径栏显示 Home directory › httpdocs），勾选 Plesk 默认页面的文件并点击 Remove 删除。
4. 点击蓝色 + 按钮 › Upload File，选择 ZIP 文件；也可以直接把 ZIP 拖放到文件列表中。
5. 点击 ZIP 文件所在行 › Extract Files。如果是覆盖更新，请勾选 Replace existing files，然后点击 OK。

# 将 dist 里面的文件打包为 ZIP（macOS / Linux）
cd dist && zip -r ../site.zip . && cd ..

文件管理器支持解压 ZIP、RAR、TAR、TGZ 和 TAR.GZ。如果习惯使用 FTP/SFTP，也可以直接把 dist/ 中的文件上传到 httpdocs。

方法二（推荐）：通过 Plesk Git 从 GitHub 自动部署

几乎所有 AI 工具（Lovable、Bolt、Replit、Cursor、Claude Code）都能把代码推送到 GitHub。将仓库连接到 Plesk Git 后，每次 push 网站都会自动更新，无需重复上传。Plesk 中 Git 的基础用法请参阅 在 Plesk 中从 Git 仓库部署代码。

第 1 步：添加仓库

1. 进入 Websites & Domains › Git › Add Repository，选择 Remote Git hosting like GitHub or BitBucket。
2. 填写仓库 URL。私有仓库建议使用 SSH 格式，并把 Plesk 显示的 SSH public key 添加到 GitHub 的 Deploy key 中（详细步骤见 通过 GitHub 在 Plesk 上自动部署）。
3. 在 Change branch and path 中选择分支（如 main），并将目标设为 httpdocs 之外的文件夹，例如 /app。

为什么不直接部署到 httpdocs？仓库中包含源代码、package.json 和配置文件，不应被公众下载。应把代码放在公开目录之外，只让文档根目录指向输出文件夹。

第 2 步：设置部署模式和 Webhook

1. 打开 Repository Settings，选择 Automatic deployment（默认），或者如果想手动点击 Deploy，选择 Manual deployment。
2. 复制 Plesk 生成的 Webhook URL，在 GitHub › Settings › Webhooks 中添加，并设置为 push 时触发。

第 3 步：让服务器执行构建（进阶）

勾选 Enable additional deploy actions，填写 shell 命令（每行一条），每次部署后都会执行：

# 使用 Plesk 自带 Node.js 的 npm 完整路径（将 22 替换为实际安装的版本）
/opt/plesk/node/22/bin/npm ci > deploy.log 2>&1
/opt/plesk/node/22/bin/npm run build >> deploy.log 2>&1

注意：部署动作可能在可用命令受限的 chroot 环境中运行，即使使用完整路径也可能出现 npm: command not found。遇到这种情况，请查看 deploy.log，联系我们的技术支持，或改用下面的方案。

始终可用的方案：先构建再推送

让 GitHub Actions（或你自己的电脑）完成构建，只把输出文件夹推送到单独的分支（如 deploy），再让 Plesk Git 拉取该分支。这样服务器完全不需要运行 npm。工作流示例见 使用 GitHub Actions 自动部署到 Plesk。

第 4 步：将文档根目录指向输出文件夹

打开域名的 Hosting Settings，将 Document root 从 httpdocs 改为输出文件夹，例如 app/dist（Next.js 为 app/out），然后点击 OK。如果使用只包含输出文件的 deploy 分支方案，则指向 app。

方法三：通过 Plesk Node.js 运行 Node.js 应用

适用于需要服务器的项目，例如 Express API 或使用 SSR 的 Next.js。服务器需先安装 Node.js Toolkit（详见 在 Plesk 上使用 Node.js Toolkit 运行 Node.js 应用）。如果你的套餐中看不到 Node.js 菜单，请联系我们的技术支持。

1. 将代码放到服务器上（建议按方法二使用 Plesk Git，部署到如 /app 的文件夹）。
2. 进入 Websites & Domains › 域名 › Node.js。Node.js on <您的域名> 页面有 Dashboard 和 Run Node.js commands 两个标签页。在 Dashboard 中进行以下设置：
   • Node.js Version：与项目使用的版本一致（查看 package.json 中的 engines）。
   • Package Manager：Plesk 会自动检测（例如 npm），并提示 “This is what we detected, you can change it”。
   • Application Root：包含 package.json 的文件夹，例如 /app。
   • Document Root：静态文件所在文件夹。Plesk 提示 “It is recommended to set the document root to a subdirectory of the application root (such as public/) due to security considerations.”（出于安全考虑，建议设为 Application Root 的子目录），例如 /app/public。
   • Application Mode：选择 production（该值会设置 NODE_ENV）。
   • Application Startup File：启动应用的文件，必须位于 Application Root 中。默认为 app.js，请改为你的文件，例如 server.js。
   • Custom environment variables：把 .env 中的值（如 API 密钥）填写在这里，而不是提交到 Git。
3. 点击 Enable Node.js。Application URL 字段会显示应用的访问地址。
4. 打开 Run Node.js commands 标签页安装依赖（例如 npm install）；如果需要先构建，也在这里执行构建（例如 npm run build）。
5. 每次更新代码或修改环境变量后，点击 Restart App（启用 Node.js 后会出现在 Dashboard 中）。

从环境变量读取端口的 Express server.js 示例：

const express = require('express');
const app = express();

app.use(express.static('public'));
app.get('/api/health', (req, res) => res.json({ ok: true }));

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`listening on ${port}`));

使用 SSR 的 Next.js 需要一个服务器入口文件作为 Application Startup File。请参考所用版本的 Next.js 文档，或让生成项目的 AI 工具准备该文件，然后先在 Run Node.js commands 标签页中构建，再点击 Restart App。

如果点击 Restart App 没有效果，可以通过 SSH 在 Application Root 中创建 tmp/restart.txt：

cd /var/www/vhosts/example.com/app
mkdir -p tmp && touch tmp/restart.txt

使用免费 SSL 启用 HTTPS

网站上线后，请在域名的 SSL/TLS Certificates 菜单中安装免费的 Let's Encrypt 证书，并开启 HTTP 到 HTTPS 的跳转。详细步骤见 在 Plesk 中安装 Let's Encrypt SSL 证书。

常见问题排查

单页应用的 .htaccess 示例，放在文档根目录中。在开启 nginx Proxy mode（Plesk 默认）时有效。Vite 会把 public/ 中的文件复制到 dist/，所以可以把它放在项目的 public/.htaccess：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

如果网站只由 nginx 提供服务（关闭 Proxy mode），.htaccess 不会生效，需要使用下面的 nginx 指令。普通客户通常无法自行修改，请联系我们的技术支持添加：

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

总结

• 小型静态网站：构建后通过文件管理器把 dist/ 或 out/ 中的文件上传到 httpdocs。
• 经常更新的网站：推送到 GitHub，由 Plesk Git 自动部署，并将文档根目录指向输出文件夹。
• 带后端的网站：通过 Plesk Node.js 运行，设置好 Application Root、Startup File 和环境变量。
• 无论使用哪种方法，都不要把密钥提交到 Git，并始终启用 HTTPS。

需要带有 Plesk、Git 和 Node.js 的主机来上线你的 Vibe Coding 网站？欢迎查看 Dot Enterprise 的 Secure Cloud Hosting 套餐。