🔗 30 分钟创建一个短链服务

[原创] 最后编辑于：2020-09-18 12:23:35@code#短链 #Baas

ubug.io 这个域名是在几年前申请的，一直续费用着，主要的一个原因是很简洁，所以有时候会想用这个域名做一个短链接服务。

今天终于把这个想法从 TODO List 拿出来思考并实现出来了。

这是地址：短链服务

开发的过程太顺利，挺有意思，所以在此记录下整个实现，流水账很罗嗦，技术也不复杂，推荐扫一眼即可。

一、目标和需求

正常的短链服务一般用来做网址缩短，比长段的 URL 更容易分发，顺便同时在重定向的过程中做访问统计等。本质上只需要一个类似 KV 的存储能够将网址缩短即可，满足自己的装逼需求。

存储和查询；至少能够将对应关系存进去、查出来。
接口和计算：需要承接请求，向数据库里面查询，然后返回 302 相应。

这个需求重点是存在哪？免费的存储服务不多，LeanCloud 作为 BaaS 服务，一直在用他家的存储服务，开发版的量级足够自己使用。同时接口和计算方面，配套的云引擎虽然资源不多，但是一般的计算和查询也足够。所以整个软件初步设想放到 LeanCloud 上面，这不是广告，一直觉得他家的这些 BaaS 服务比云服务商用起来更舒服，唯一担心的是万一 SDK 用起来之后，哪天不好迁移，用来做简单的技术验证和自用足够。

二、开发过程

整个架构可以算作 Serverless 的架构，存储是用服务来实现的，只需要调用接口即可，不用担心存在哪的问题。计算用的是可以多实例负载均衡，不中断服务的云引擎，虽然不是完全容器化和云函数的概念，但是确实不用关心服务器的问题，只需要代码和部署即可。

本文只关心实现，统计功能、性能、安全性等都是需要考虑的点，这里都没有深入研究，算是实现整个功能的流水账。

1. 实现算法

思路很简单，就是存储一个对应关系即可，最简单的一个自增 ID 加上原链接字段甚至都能实现。但是自增 ID 安全性不够，仍需要哈希函数来找出一个短码的对应关系。

网上的算法有很多，这个甚至和分布式数据表的唯一 ID 设计很相似（雪花算法、Redis、单实例关系数据库则增等方案），我这里使用自增 id 转进制来实现较短字符串，很大的缺点是一旦被人找出来进制转换规律就能推断库里的 id，不过自用也不会太苛求这个。

数据库插入新记录：（例如：http://example.com ）
得到一个自增的十进制 ID 数字：（例如：55116）
将数字按照进制转换成独特的高进制字符串作为短码存到刚才的记录（例如：用 16 进制转 55116 到 d74c）
返回这个短码（例如：d74c）

你可以自己选择一个进制，例如 32进制、62进制等来尽可能多字符来代替这个自增ID；同时进制转换也可以用乱序的字符串来实现自定义的转换过程，不让人一眼看出来递增的趋势，例如：16 进制用 26dea0b731c94f58 代替 0123456789abcdef

2. 存储中创建新的表

重点是其中的 index、key、value 三个字段，表示自增序号、短码和原始链接。

3. 绑定云引擎域名

这一步的目的是用你的域名来访问到云引擎服务。前提是你有这个域名，而且最好是备案过的，如果没备案可能需要到国际节点的服务来实现这个访问。

4. 用官方示例实现自己的服务

然后自己创建一个 Git 仓库，随便在哪，把下面这个仓库代码拷贝到里面：

源码：

Slim Getting Started

Slim Getting Started for LeanEngine

很简单的一个 PHP 项目（可以选择官方其他环境示例，这里我选择用 PHP），修改首页，添加接口：

创建首页：

src/views/new_url.phtml

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
  <div class="container">
    <div class="empty">
      <div class="empty-icon"><i class="icon icon-link"></i></div>
      <p class="empty-title h5">短链服务</p>
      <p class="empty-subtitle">将长链接转为短链的服务: http://s.ubug.io/u/s3T</p>
      <div class="empty-action">
        <div class="form-group">
          <textarea rows="4" class="form-input" type="text" id="url_inputer"></textarea>
          <p class="form-input-hint">目前仅支持 http / https 协议的链接.</p>
        </div>
        <button class="btn btn-primary" id="submit">生 成</button>
      </div>
    </div>
    <div class="timeline" id="result"></div>
  </div>
</body>
<script>
  const inputer = document.querySelector('#url_inputer')
  const submitBtn = document.querySelector('#submit')
  submitBtn.addEventListener('click', async () => {
    if (!/^https?:///.test(inputer.value)) {
      inputer.classList.add('is-error')
    } else {
      inputer.classList.remove('is-error')
      submitBtn.classList.add('loading', 'disabled')
      const json = await fetch('https://s.ubug.io/su/new', {
          body: JSON.stringify({ url: inputer.value }),
          headers: { 'content-type': 'application/json' },
          method: 'POST',
        })
        .then(response => response.json())
      if (json.status === 1 || json.status === 0) {
        inputer.value = ''
        submitBtn.classList.remove('loading', 'disabled')
        const newRes = document.createElement('div')
        newRes.innerHTML = `<div class="timeline-item">
            <div class="tile-content">
                <p class="tile-subtitle">短链接：http://s.ubug.io/u/${json.key}</p>
                <p class="tile-title">原链接：${inputer.value}</p>
            </div>
          </div>`
        document.querySelector('#result').appendChild(newRes)
      }
    }
  })
</script>
</html>

Copy

👆 简单把用户输入拿到，然后向后台请求的动作。

src/views/new_url.phtml


// 10 进制 转 62 进制
function from10to62($id) {
    $dict = 'femXnjvkw69DgUipVo5FsGrtyuHIxz0Ah4RScC7bEM2QN1O3PJKTZaLlWYqd8B'; // 乱序
    $index = $id + 999927; // 避免从0开始
    $result = '';
    do {
        $result = $dict[$index % 62] . $result;
        $index = intval($index / 62);
    } while ($index != 0);
    return $result;
}
// 首页渲染
$app->get('/', function (Request $request, Response $response) {
  return $this->view->render($response, "new_url.phtml");
});
// 短链跳转
$app->get('/u/{short_url}', function (Request $request, Response $response) {
    $su = $request->getAttribute('short_url');
    // 数据库查询，302 跳转到真实链接，不然返回 404
    try {
        $query = new Query("short_url");
        $query->equalTo("key", $su);
        $url = $query->find();
        $realUrl = $url[0]->get("value");
        return $response->withStatus(302)->withHeader("Location", $realUrl);
    } catch (\Exception $ex) {
        error_log("Query record failed!");
        $response->withStatus(404);
        $response->getBody()->write("your request $su not found!");
    }
    return $response;
});
// 短链生成
$app->post("/su/new", function(Request $request, Response $response) {
    $data = $request->getParsedBody();
    $url = $data["url"];
    $query = new Query("short_url");
    $query->equalTo("value", $url);
    $url = $query->find();
    // 数据库已经存了的，直接返回，避免相同链接的多个短链，这个如果需要统计不同渠道，那就不能有这个逻辑
    if(count($url) > 0) {
        return $response->withJson(array('status' => 1, 'key' => $url[0]->get("key")));
    } else {
        // 先创建
        $su = new LeanObject("short_url");
        $su->set("value", $data["url"]);
        $so = new SaveOption();
        $so->fetchWhenSave = true;
        $su->save($so);
        // 然后根据自增 ID 更新短码
        $index = $su->get('index');
        $key = from10to62($index);
        $su->set("key", $key);
        $su->save();
        return $response->withJson(array('status' => 0, 'key' => $key));
    }
});

Copy

👆 生成和跳转的服务端代码

5. 代码

源码：

后端代码

整个后端的代码都很简单，里面跟自己部署的有点不同

5. 最后

短链接服务目前有很大用处，分发和统计在当前这个大数据时代有很大的价值。做短链接服务大部分也是用来收集用户访问、页面访问等，各个大公司也都有很成熟的方案。

对于我本身，整个需求本身也不复杂，比较有意思的点在于用 BaaS 的模式不用很多代码就能实现个大差不离，当然目前只是个 Demo，自己也不知道用在哪。

后期看心情可能增加统计功能、自动二维码、加密、自定义等功能，也可能落在这吃灰。