关于持续集成:如何将-github-上的代码一键部署到服务器

• 在 Github 上看到一些不错的仓库，想要奉献代码怎么办？
• 在 Github 上看到一些有用的网站，想部署到本人的服务器怎么办？
• 。。。

我想很多人都碰到过这个问题。

• 如果要奉献代码，之前我的做法通常是将代码克隆到本地，而后在本地的编辑器中批改并提交 pr。
• 如果想部署到本人的服务器，之前我的做法通常是克隆到本地，而后本地批改一下部署的配置，最初部署到本人的服务器或者第三方的云服务器（比方 Github Pages）。

而当初随着云技术的遍及，咱们 没有必要将代码克隆到本地进行操作，而是间接在云端编辑器中实现批改，开发，并间接部署到云服务器。明天就给大家举荐一个工具，一键将代码部署到云服务器。

什么是一键部署？

明天给大家介绍的就是一键部署。那什么是一键部署呢？顾名思义，就是有一个按钮，点击一下就能实现部署工作。

如下是一个领有一键部署按钮的我的项目：

点击之后进入如下页面，你能够对一些默认配置进行批改（也能够间接应用默认配置）:

批改后点击Deploy app 即可。部署胜利之后就能够通过相似如下的地址拜访啦~

图中演示地址是：https://leetcode-cheat.heroku…

大家能够间接进我的仓库 https://github.com/leetcode-p…，点击部署按钮试试哦。

它是如何实现的呢？

我是一个喜爱探索事物原理的人，当然对它们的原理一目了然才行。其实它的原理很容易，咱们从头开始说。

1. 如何在 Github 中显示公布按钮。

下面的部署按钮就是如下的一个 Markdown 内容渲染的:

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)

下面内容会被渲染成如下的 DOM：

<a href="https://heroku.com/deploy" rel="nofollow"
  ><img
    src="https://camo.githubusercontent.com/6979881d5a96b7b18a057083bb8aeb87ba35fc279452e29034c1e1c49ade0636/68747470733a2f2f7777772e6865726f6b7563646e2e636f6d2f6465706c6f792f627574746f6e2e737667"
    alt="Deploy"
    data-canonical-src="https://www.herokucdn.com/deploy/button.svg"
    style="max-width:100%;"
/></a>

也就是说其实就是一个被 a 标签包裹的 svg 图片，点击之后会实现 url 跳转。

2. 云服务厂商如何获取默认配置？

这里以 heroku 为例，其余厂商（比方腾讯）原理都差不多。

因为下面的起因，实际上咱们传递给第三方云厂商的形式只可能是 url。因而咱们能够间接将配置通过 ur 的形式传输。比方 https://heroku.com/deploy?a=1…。这种形式对于大量数据是足够的，那如何数据量很大呢？咱们晓得浏览器 url 的长度是无限的，而且不同的浏览器限度也不尽相同。

那怎么解决呢？当初比拟风行的思路是 约定。以 heroku 来说，就约定根目录的 app.json 文件中存配置，这种约定的形式我集体强烈推荐。

比方我的仓库的 app.json 就是：

{
  "name": "LeetCode Cheatsheet",
  "description": "力扣加加，或者是西湖区最好的算法题解",
  "repository": "https://github.com/leetcode-pp/leetcode-cheat",
  "logo": "https://tva1.sinaimg.cn/large/008eGmZEly1gnm68epc0kj30u00tsaav.jpg",
  "keywords": ["github", "leetcode", "cheatsheet", "91algo", "algorithm"],
  "env": {
    "REACT_APP_BUILD_TARGET": {
      "description": "枚举值：extension 和 web",
      "value": null
    },
    "PUBLIC_URL": {
      "description": "动态资源寄存地位（可应用 cdn 减速）",
      "value": "https://cdn.jsdelivr.net/gh/leetcode-pp/leetcode-cheat@gh-pages/"
    }
  },
  "buildpacks": [
    {"url": "https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz"}
  ]
}

能够看出，除了配置仓库，logo，形容这些惯例信息，我还配置了环境变量和 buidpacks。buildpacks 简略来说就是构建利用的形式，对于 buildpacks 的更多信息能够参考 heroku 官网文档

大家可能还有疑难，为啥下面的链接是 https://heroku.com/deploy。能够看出 url 中也没有任何参数信息，那为什么它就晓得从哪来的呢？我感觉 ta 应该利用的是浏览器的 referer，用它能够判断从哪里过去的，进而搜寻对应我的项目根目录的 app.json 文件。你能够通过右键在新的 无痕模式 中关上来验证。你会发现右键在新的无痕模式中关上是无奈失常部署的。

这有什么用呢？

一键部署意味着部署的门槛更低，不仅是技巧上的，而且是老本上的。比方 heroku 就容许你间接收费一键部署若干个利用，间接生成网站，域名能够间接拜访。如果你感觉域名不喜爱也能够自定义。如果你想批改源码从新构建也是能够的。

比方我看到他人的博客很漂亮。如果 ta 提供了一键部署，那么就能够间接部署到本人的云服务器，生成本人的 url。关联本人的 git 之后，推送还能主动部署（CD）。而且这所有都能够是收费的，至多我当初用的是收费的。而如果 ta 没有提供一键部署，就须要你本人手动实现了。如果你对这些相熟还好，无非就是多花点工夫。而如果你是技术小白，我可能仅仅是想部署一下，用本人的域名拜访之类，没有一键部署就很不敌对啦。

相干技术

gitpod 是我始终在用的一个工具，它能够帮忙我间接在云端编辑一些内容。或者有一些环境问题，须要虚拟主机的，也能够用它来解决。它不仅仅提供了在线 IDE 的所有性能，还集成了 CI 和 CD，用起来也是十分不便。

同样地，你也能够在你的仓库中减少 在 Gitpod 一键关上的性能。

小技巧

一些开源我的项目你不晓得怎么奉献。其实能够另辟蹊径，比方给他们奉献一个 logo，再比方奉献 一键部署 性能。这或者是你迈向开源事业的第一步。

更多材料

• heroku-button
• cloudbase 一键部署

大家也能够关注我的公众号《脑洞前端》获取更多更陈腐的前端硬核文章，带你意识你不晓得的前端。