在 Github 上看到一些不错的仓库,想要奉献代码怎么办?在 Github 上看到一些有用的网站,想部署到本人的服务器怎么办?。。。我想很多人都碰到过这个问题。
如果要奉献代码,之前我的做法通常是将代码克隆到本地,而后在本地的编辑器中批改并提交 pr。如果想部署到本人的服务器,之前我的做法通常是克隆到本地,而后本地批改一下部署的配置,最初部署到本人的服务器或者第三方的云服务器(比方 Github Pages)。而当初随着云技术的遍及,咱们没有必要将代码克隆到本地进行操作,而是间接在云端编辑器中实现批改,开发,并间接部署到云服务器。明天就给大家举荐一个工具,一键将代码部署到云服务器。
什么是一键部署?明天给大家介绍的就是一键部署。那什么是一键部署呢?顾名思义,就是有一个按钮,点击一下就能实现部署工作。
如下是一个领有一键部署按钮的我的项目:
点击之后进入如下页面,你能够对一些默认配置进行批改(也能够间接应用默认配置):
批改后点击Deploy app 即可。部署胜利之后就能够通过相似如下的地址拜访啦~
图中演示地址是:https://leetcode-cheat.heroku...大家能够间接进我的仓库 https://github.com/leetcode-p...,点击部署按钮试试哦。
它是如何实现的呢?我是一个喜爱探索事物原理的人,当然对它们的原理一目了然才行。其实它的原理很容易,咱们从头开始说。
1. 如何在 Github 中显示公布按钮。下面的部署按钮就是如下的一个 Markdown 内容渲染的:
[](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 官网文档
...