跳到正文
一AllOne
关注

上手教程

把网站免费部署上线的通用流程

不管用 Vercel、Netlify、Cloudflare Pages 还是别的平台，把网站部署上线的流程几乎一样：代码进仓库、平台连仓库、填构建命令、配环境变量、绑域名、学会回滚。这篇把这套通用流程拆开讲，换平台也照样适用。

发布于 2026-10-22 · 最后核实：2026-10-22 · 文中价格与额度以各官网为准

部署平台每隔一段时间就会改版界面、调整免费额度，但「把一个网站放到网上」这件事的底层流程这些年几乎没变过。把这套流程弄懂，你就不必每换一个平台都重新查一遍教程。

结论先说：现代托管平台的标准模式是「Git 仓库 → 自动构建 → 全球分发」。你要做的只有六件事：准备好能本地构建的代码、推到 Git 仓库、在平台导入仓库、填对构建设置、配好环境变量、绑定域名。 学会预览部署和回滚，你就能放心地频繁更新。

先分清：你的网站是哪一种

类型 特点 部署难度
纯静态站 构建后就是一堆 HTML/CSS/JS 文件，比如博客、作品集、文档站 最简单，几乎所有平台都免费支持
带服务端逻辑的站 有 API 接口、服务端渲染、需要读写数据库 需要平台支持对应的运行时（Serverless 函数、边缘函数等）
需要常驻进程的应用 长时间运行的后台服务、WebSocket、定时任务密集 免费的静态托管平台通常不适合，需要容器或服务器类服务

一个人起步时，尽量把网站做成前两种：内容用静态生成，少量动态功能交给 Serverless 函数，数据交给 Supabase 这类托管数据库。这样部署最省心，也最容易落在免费额度内。

第一步：确认代码能在本地构建成功

这是最容易被跳过、也最常导致部署失败的一步。在推代码之前，先在本地跑一遍项目的构建命令（常见的是 npm run build），确认：

  • 构建能成功结束，没有报错；
  • 你知道构建产物输出到哪个目录（比如 dist、build、out、.next）；
  • 依赖都写进了 package.json 之类的清单文件，并且锁文件（package-lock.json、pnpm-lock.yaml 等）也提交了。

本地都构建不过，平台上一定也过不了。平台的构建环境是一台干净的机器，你电脑上「碰巧装过」的东西它没有。

第二步：把代码推到 Git 仓库

在 GitHub 或 GitLab 上新建仓库，把代码推上去（Git 的基本操作见本站的 Git 入门教程）。私有仓库也完全可以，主流平台都支持。

推之前检查 .gitignore：node_modules、构建产物目录、.env 这类存放密钥的文件，都不应该进仓库。

第三步：在平台导入仓库

以 Vercel、Netlify、Cloudflare Pages 为例，流程几乎一样：

  1. 用 GitHub 账号登录平台，授权它读取你的仓库。授权时可以只勾选需要部署的那几个仓库，而不是全部。
  2. 选择要部署的仓库。
  3. 选择生产分支，通常是 main。推到这个分支的代码会部署成正式网站，推到其他分支的代码会生成预览版本。

国内访问为主的项目，也可以考虑 腾讯 EdgeOne 这类在国内有节点的平台，流程同样是连接仓库、填构建设置；但网站如果使用中国内地节点，需要先完成 ICP 备案。

第四步：填对构建设置

平台通常会自动识别 Next.js、Astro、Vite 等常见框架，并预填好设置。但你要能看懂这三项，因为出错时就要靠它们排查：

  • 构建命令（Build command）：比如 npm run build。
  • 输出目录（Output directory）：构建产物所在的文件夹，必须和你本地看到的一致。
  • 根目录（Root directory）：如果项目不在仓库根目录（比如放在 web/ 子目录里），要在这里指定。

另外留意 Node.js 等运行时的版本。本地用的版本和平台默认版本不一致，是「本地好好的，线上构建失败」的常见原因。可以在项目里声明版本（比如 package.json 的 engines 字段或 .nvmrc 文件），或在平台设置里指定。

第五步：配置环境变量

API 密钥、数据库地址这类信息，不要写在代码里，而是放在平台的「环境变量」设置中，代码通过变量名读取。

几个要点：

  • 区分环境：大多数平台允许为生产环境和预览环境设置不同的值。预览环境最好连测试数据库，别让测试数据写进正式库。
  • 改了变量要重新部署：Vercel 文档明确写了，对环境变量的修改只作用于新的部署，不会影响已有的部署。改完记得触发一次重新部署。
  • 分清公开和私密：很多前端框架约定带特定前缀的变量（例如 NEXT_PUBLIC_、VITE_）会被打包进浏览器端代码，任何访客都能看到。真正的密钥绝不能用这种前缀。

第六步：绑定自己的域名

部署成功后，平台会给你一个免费的子域名（如 项目名.平台域名）。在项目的域名设置里添加你自己的域名，按提示去 DNS 里加 A 记录或 CNAME 记录，平台会自动签发 HTTPS 证书。具体的 DNS 原理、带不带 www 的选择，见本站的 DNS 教程。

上线之后：预览部署和回滚

这是托管平台最值钱、却最常被忽略的两个功能。

预览部署：每当你推送一个非生产分支或打开一个 Pull Request，平台会生成一个独立的预览网址。Cloudflare Pages 的文档描述得很清楚：每个 PR 都会得到一个唯一的预览链接，并随着你继续推送而更新。养成习惯：大改动先开分支，看过预览链接没问题，再合并到 main。

回滚：线上出了问题，第一反应不应该是赶紧改代码，而是先回滚到上一个正常的版本，止住损失，再慢慢查原因。Vercel、Netlify 等平台都支持把生产环境切回之前的某次部署，通常几秒钟生效（不同套餐能回滚的范围不同，以平台文档为准）。注意：回滚恢复的是代码和构建产物，数据库里已经改掉的数据不会跟着回去。

免费方案要留意的几件事

  • 读一遍免费计划的使用条款。 有的平台的免费计划只允许个人、非商业用途，网站开始挂广告或卖东西后，按条款应升级或换平台。
  • 了解超额后的处理方式。 有的平台超出额度会暂停网站，有的会开始计费。具体额度变化频繁，请以官网定价页为准。
  • 免费数据库可能会休眠。 部分托管数据库的免费项目长期无活动会被暂停，正式项目要留意。
  • 构建次数和构建时长也是额度。频繁推送小改动，可能比你想象的更快用完构建额度。

常见的坑

  1. 输出目录填错：构建成功但网站一片空白或 404，八成是输出目录不对。
  2. 大小写问题：你的电脑可能不区分文件名大小写，而构建服务器（Linux）区分。import './Header' 和文件名 header.tsx 在本地能跑，上线就报错。
  3. 把密钥提交进了仓库：即使后来删掉，它仍留在 Git 历史里。正确做法是立刻到对应服务后台作废并重新生成这个密钥。
  4. 单页应用刷新 404：用前端路由的单页应用，直接访问子路径时需要配置「所有路径回退到 index.html」的重写规则，各平台写法不同，查对应文档。
  5. 只看首页：上线后至少点一遍主要页面、提交一次表单、在手机上打开一次。
  6. 忘了告诉搜索引擎：上线后在 Google Search Console 验证网站并提交站点地图，再装一个统计工具（比如 Umami），你才知道有没有人来。

一张上线检查清单

  • 本地 build 成功，知道输出目录
  • .gitignore 排除了依赖、构建产物和 .env
  • 平台的生产分支、构建命令、输出目录、运行时版本都确认过
  • 环境变量按生产 / 预览分开，密钥没有使用公开前缀
  • 自定义域名已绑定，HTTPS 正常
  • 知道在哪里点「回滚」
  • 读过免费计划的条款和超额规则

这套流程走熟一遍，以后无论换到哪个平台，你需要找的只是「这个平台把这几个设置放在哪里」。

参考资料

常见问题

把网站部署上线需要做哪几步？
六件事：准备好能本地构建的代码、推到 Git 仓库、在平台导入仓库、填对构建设置、配好环境变量、绑定域名。学会预览部署和回滚，就能放心地频繁更新。
为什么本地能跑，部署到平台就构建失败？
平台的构建环境是一台干净的机器，你电脑上碰巧装过的东西它没有。常见原因包括依赖没写进清单、锁文件没提交、本地和平台的 Node.js 版本不一致，以及构建服务器（Linux）区分文件名大小写。
网站部署成功但一片空白或 404，是什么原因？
八成是输出目录填错了。输出目录必须和你本地构建时看到的产物目录一致，比如 dist、build、out、.next。
在平台上改了环境变量为什么没生效？
Vercel 文档写明，对环境变量的修改只作用于新的部署，不会影响已有的部署。改完记得触发一次重新部署。
网站上线后出问题，第一步该做什么？
先回滚到上一个正常的版本止住损失，再慢慢查原因。Vercel、Netlify 等平台都支持把生产环境切回之前的某次部署。注意回滚恢复的是代码和构建产物，数据库里已经改掉的数据不会跟着回去。

← 返回教程列表