Surge使用指南

Surge是一个快速部署工具,支持多种前端框架和后端应用，允许你在几秒钟内即时部署网站或应用。

安装Surge

在终端或命令行中安装Surge：

npm install -g surge

初始化项目

在项目目录中运行以下命令：

surge init

这会创建一个surge.json文件，配置项目信息。

修改配置

编辑surge.json文件，根据需要配置：

{
  "project": "your-project-name",
  "version": "1..",
  "surge": {
    "base": ".",
    "routes": [{
      "source": "**",
      "target": [["静态文件路径", "static/"]]
    }]
  }
}

• project：项目名称
• version：版本号
• surge.base：项目根目录
• surge.routes：文件路径和目标路径的映射

添加静态文件

将静态文件（如HTML、CSS、JavaScript）放入static目录下。

推送到云端

在项目目录中运行：

surge

Surge会自动构建项目并推送到云端,生成一个唯一的URL。

访问应用

使用生成的URL访问您的应用,https://your-project.surge.sh

常用配置

• 自定义域名

  如果有自己的域名,配置surge.json：

  {
    "project": "your-project-name",
    "surge": {
      "base": ".",
      "routes": [{
        "source": "**",
        "target": [["your-domain.com", "static/"]]
      }],
      "domain": "your-domain.com"
    }
  }

• 启用SSR（服务器渲染）

  如果使用React、Vue等框架，启用SSR：

  {
    "project": "your-project-name",
    "surge": {
      "base": ".",
      "routes": [{
        "source": "**",
        "target": [["static/", "server/"]]
      }],
      "ssr": true
    }
  }

与CI/CD集成

• GitHub Actions

  在GitHub项目中添加工作流程,配置Surge推送：

  name: Deploy to Surge
  on:
    push:
      branches: [ "main" ]
  jobs:
    deploy:
      name: Deploy
      runs-on: ubuntu-latest
      steps:
        - name: Surge Deploy
          uses: surge/shell@v2
          with:
            command: npm run surge

• Bitbucket Pipelines

  配置Bitbucket CI，自动触发Surge部署。

常见问题

• 静态文件路径

  确保静态文件放在static目录下，Surge会自动映射。

• 域名解析

  使用DNS记录将your-domain.com指向Surge的IP地址。

• 多页面应用

  配置多个路由,支持多页面应用。

• 环境变量

  在static/env.js或config.env中定义环境变量，Surge会自动读取。

进一步学习

• Surge官方文档

• Surge GitHub

• Surge示例项目

希望这份指南能帮助您快速上线应用！如果有更多问题，欢迎在社区求助。