安装 Surge CLI

通过 npm 或 yarn 安装 Surge CLI：

npm install -g surge

或

yarn add global surge

初始化项目

在项目根目录执行：

surge init myapp

这将创建一个 surge.json 文件,需配置项目信息。

配置 surge.json

编辑 surge.json：

{
  "project": "myapp",
  "framework": "React",
  "domain": "your-project-name.surge.io",
  "static": "dist/",
  "routes": [
    {
      "source": "/",
      "target": "/index.html"
    }
  ],
  "404": "/404.html"
}

• project：项目名称。
• framework：指定构建工具，如 React、Vue 等。
• domain：项目域名，Surge 会分配一个免费域名。
• static：静态文件目录。
• routes：路由配置，如将 映射到 index.html。
• 404：指定404页面。

部署项目

构建项目后,执行：

surge deploy

Surge 会构建项目，上传到服务器,并输出配置文件。

访问项目

项目部署后,访问域名：

https://your-project-name.surge.io

配置 DNS

将域名配置到 DNS 提供商，使用 CNAME 记录指向 Surge 的服务器 IP 或使用 Surge 提供的 DNS 配置。

管理环境

创建多个环境：

surge project --env production -p production

更新项目

重新部署或使用 surge update 更新项目。

删除项目

删除项目：

surge delete myapp

注意事项

• 构建要求：确保项目已构建,静态文件在指定目录中。
• ：若有动态内容，需自行处理，如使用 API。
• 免费限制：Surge免费计划可能有限,适合个人或小型项目。

通过以上步骤，您可以快速部署静态前端应用，无需管理服务器,配置简单易快。