AI建站工具生成代码后,怎么部署到自己的服务器?
学完这篇,你能把 AI 建站工具(v0、Bolt.new、Lovable、Cursor 之类)导出的项目,从本地压缩包一路跑到自己服务器上,用域名 HTTPS 正常访问。
第一步:先搞清楚你拿到的是什么类型的项目
这一步决定后面用哪种部署方式,做完你会在 package.json 里找到答案。导出代码后(v0 右上角 Download ZIP,Bolt.new 的 Download 按钮,Lovable 走 GitHub 连接),解压到本地,打开 package.json 看两处:
dependencies里有next→ Next.js 项目,需要 Node 进程常驻dependencies里有vite且scripts.build是vite build→ 纯静态站,Nginx 直接托管scripts.build里是remix build、nuxt build→ 属于 Node 服务端渲染类,按 Next.js 那套处理
同时在本地跑一次 npm install && npm run build。本地 build 不过,服务器上也一定不过。
注意:AI 生成的代码经常带
"type": "module"和锁定版本的依赖,别急着npm update,先把本地 build 跑通再动。
第二步:准备服务器和基础环境
这一步要得到一台能 SSH 登录、装好 Node 20 和 Nginx 的机器。以 Ubuntu 22.04(阿里云 / 腾讯云 / Vultr 均可,最低 1 核 2G)为例,SSH 登进去后依次执行:
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs nginx git
node -v # 应输出 v20.x
然后开放防火墙端口:
sudo ufw allow 22 && sudo ufw allow 80 && sudo ufw allow 443 && sudo ufw enable
注意:云厂商还有一层「安全组」,阿里云在控制台「实例 → 安全组 → 配置规则」里手动放行 80/443,只开 ufw 是不够的,这是最常见的「部署成功但打不开」原因。
第三步:把代码传到服务器并构建
这一步把源码变成可运行的产物。在服务器上:
cd /var/www
sudo git clone https://github.com/你的用户名/你的仓库.git mysite
sudo chown -R $USER:$USER mysite
cd mysite
npm install
npm run build
如果代码只在本地没进 Git,用本机执行 scp -r ./项目目录 root@服务器IP:/var/www/mysite 上传。
构建产物位置要看项目类型:静态站是 dist/,Next.js 是 .next/。
注意:1G 内存的服务器跑
next build容易 OOM 被杀。临时加 swap:sudo fallocate -l 2G /swapfile && sudo chmod 600 /swapfile && sudo mkswap /swapfile && sudo swapon /swapfile。
第四步:分类型启动服务
静态站最简单,Nginx 配置文件 /etc/nginx/sites-available/mysite 写:
server {
listen 80;
server_name 你的域名;
root /var/www/mysite/dist;
index index.html;
location / { try_files $uri $uri/ /index.html; }
}
Next.js 项目则要先用 pm2 常驻 Node 进程:
sudo npm install -g pm2
cd /var/www/mysite
pm2 start npm --name mysite -- start
pm2 save && pm2 startup # 按输出的那行命令再执行一次,实现开机自启
再让 Nginx 反代到 3000 端口:
server {
listen 80;
server_name 你的域名;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
启用配置并重载:
sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx
第五步:配上域名和 HTTPS
在域名 DNS 后台加一条 A 记录,主机记录 @,记录值填服务器公网 IP,等待生效(通常几分钟)。然后:
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d 你的域名
certbot 会自动改写 Nginx 配置加上 443 监听和证书路径,并注册自动续期。跑完访问 https://你的域名 就能看到页面了。
第六步:处理环境变量
AI 建站工具里常带 API Key(比如调大模型、Supabase)。这些不会随代码导出,要手动补。在项目根目录建 .env.local:
nano /var/www/mysite/.env.local
填入 KEY=值 后保存,然后 pm2 restart mysite 重启生效。静态站的环境变量必须在 npm run build 之前注入,因为构建时就被编译进 JS 里了。
注意:
.env.local不要提交进 Git;前端能读到的变量(Vite 的VITE_前缀、Next.js 的NEXT_PUBLIC_前缀)会暴露在浏览器里,密钥类只能用服务端变量。
小结
- 先看
package.json判断类型:静态站用 Nginx 托管dist/,Next.js 用 pm2 + Nginx 反代 - 本地 build 必须先通过,服务器上只做重复动作
- 云服务器安全组和 ufw 两层都要放行 80/443
- 小内存机器构建前加 swap,否则
next build会被 OOM 杀掉 - 域名解析生效后再跑
certbot --nginx,证书自动续期不用管 - 环境变量补齐后记得重启进程或重新构建
原文链接:https://www.gj0.com/thread-381.html
转载请注明出处并保留本声明;内容仅代表作者观点,与本站立场无关。若本文涉嫌侵权,请联系本站处理。