如何将 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,再比如贡献一键部署功能。这或许是你迈向开源事业的第一步。

更多资料

大家也可以关注我的公众号《脑洞前端》获取更多更新鲜的前端硬核文章,带你认识你不知道的前端。


脑洞前端
你不知道的前端
5.3k 声望
4.6k 粉丝
0 条评论
推荐阅读
**伯克利大学** 的计算机入门教程
import-local 是一个 NodeJS 端的工具,用于检测本地是否安装了某个包。如果你在开发一个 node 的 cli 应用,并且想要提高性能使用用户本地安装好的包,它就很适合你。

lucifer阅读 1k评论 5

写一个Vue DevTools,让开发体验飞一会
近年来,人们越来越关注开发者体验 (DX)。工具和框架也一直在努力改进 DX,比如这两年光速发展的Vite。在大多数人的印象中,Vite的特点是快,但是在我看来让它发展迅速并在前端构建工具占据一席之地的主要原因是...

null仔2阅读 872

封面图
使用流水线插件实现持续集成、持续部署
流水线插件 是基于 Rainbond 插件体系 扩展实现,通过插件化的方式,可以实现对 Rainbond 构建体系的扩展。该插件由社区合作伙伴 拓维信息 参与开发并贡献,底层是基于 GitLab CI/CD 实现。

Rainbond1阅读 374

封面图
开发者每日精选内容
1. Docker的容器管理2. 前端工程化中重要概念之组件化开发框架3. 理解JS中的原型(Prototypes)4. 学习HTML DOM笔记5. Java异常Exception详解6. 推荐系统:基于内容的过滤7. Nginx负载均衡算法8. JAVASE练习——扑克...

阿里云开发者1阅读 475

前端工程化中重要概念之组件化开发框架
组件化开发框架是一种将 UI 和功能逻辑封装为独立的可复用组件的开发方式。这些组件可以在不同的页面和项目中重复使用,从而实现代码的共享和可维护性的提升。常见的组件化开发框架有 React、Vue、Angular 等。

阿里云开发者阅读 439

React组件库实践:React + Typescript + Less + Rollup + Storybook
原先在做低代码平台的时候,刚好有搭载React组件库的需求,所以就搞了一套通用的React组件库模版。目前通过这套模板也搭建过好几个组件库。

Qlly阅读 364

玩转 ChatGPT+极狐GitLab|分分钟丝滑迁移Jenkins到极狐GitLab CI
💃 自从 ChatGPT 闪亮登场以来,各种基于它的软件扩展纷至沓来。爱折腾的极狐GitLab 开发者们,也花式玩转起了 ChatGPT + 极狐GitLab,让研发工作更高效。之前我们分享了 如何利用极狐GitLab CI/CD 完成 Jenkins ...

极狐GitLab阅读 354

封面图
5.3k 声望
4.6k 粉丝
宣传栏