月度归档:2020年06月

2020 年 6 月月度总结

2020 年 6 月月度总结

TL;DR

抱歉,本月因为之前几天的封闭开发,没有来得及写,如今已经 7 月4 日,才写完自己的月度总结。

月度总结

工作

本月工作调整为内容产出 & 规划,也看到自己在向上管理做的不足,发现了不少需要学习的点。此外,本月因为时间的原因,搞了三天的封闭开发,收获很多,可以写出一大堆的总结文章,期待近期的产出吧!

值得提升的点:

  1. 如何做汇报
  2. 如何向老板同步信息

生活

本月生活没有太多的波澜,不过这个月在吃喝上画了太多的钱,导致整个月的吃喝预算都是炸掉的。在新的一个月里,要想办法调整这些。所以考虑在7 月份,控制自己的饮食,减少外食。

顺便还能恢复恢复体重。

Side Project

本月忙着封闭开发公司的项目,没空做 Side Project。

写作

本月因为工作调整的原因,写了不少的稿件,这部分后续慢慢的放出来。此外,这个月,在博客里也写了不少的文章, 这个倒是一个新的收获。

此外,这个月调整了一下自己的内容产出的规范。对于技术文章调整了写作的规划,具体的规范可以参考这篇文章

https://www.ixiqin.com/2020/06/how-to-free-for-your-organizations-project-configuration-vercel/

财务状况

娱乐

  • 小丑:DC宇宙的经典电影,本以为会有不少成为 Joker 以后做的事情,没想到只是 Joker 为何成为 Joker。电影里惊喜的是有不少的伏笔,比如布鲁斯·韦恩父母的被杀。Joker 和布鲁斯的第一次见面等等。
    • 一些在豆瓣上看到的不错的话
      • 《了不起的盖茨比》里的那句话:“每当你想批评别人的时候,要记住,这世上并不是所有人都有你拥有的那些优势。”

阅读

  • 我是一个程序员:适合未从业的人看的,从业以后的人看有点啰嗦。
  • Go 语言趣学指南
  • 半小时漫画经济学 1
  • 半小时漫画经济学 2
  • 半小时漫画经济学 3

年度计划对标

课程学习

一年学习 54 门课程,本月进度 0 门;全年进度 1/54;

图书阅读

一年读书 54 本,本月进度 5 本;全年进度 6/54

电影观看

一年观看 54 部电影,本月进度1部;全年进度8 /54

API 对于开发者的重要性

作为一个开发者,我经常会使用各种各样不同的软件,而这些软件中,哪些是我们用的爽?哪些是我们用的不爽?他们有什么特点?这里总结一些。

1. 有 API

API 对于开发者相关的业务来说,十分重要。对于开发者来说,有了 API 就意味着他有更多自定义调用的可能,可以和其他的能力整合起来。但是如果你没有 API ,对于开发者来说,就没有了变化的可能,一旦出现了一个有 API 的产品,你的产品就不再有价值。

为什么大城市里咖啡店很多?

为什么大城市里咖啡店很多?

在小城市里,往往没有很多的咖啡店,但是在大城市里,经常会有很多咖啡店。这是因为什么?

我想了一下,可能是因为大城市里大部分人都没有办法在自己住的房子中营造出一个很好的学习环境(比如我租住的是一个单间,就没有足够的空间来放置沙发和学习桌子),在这种情况下,“共享”的学习空间就成为了必需品,而咖啡厅这种看起来还不错的选项自然而然就会被人们想起来(类似的,大城市里的共享学习空间也是这样的,当然,共享学习空间还提供了一种学习的氛围)。

在小城市里,大家大多居住时会有一个 X 室 X 厅,因此,在家中想要打造出一个小的学习空间,还是要容易一些的,因此,没有必要在外面学习,自然而然,对于咖啡厅的需求就小了很多,只剩下和朋友一起聊天的需求。

供需关系,决定了小城市注定很难有太多的咖啡厅。

不过,倒是觉得可以自己开一个小的咖啡厅,一方面可以让朋友过来一起聊天,另一方面,如果没有人,自己也可以喝咖啡、工作。

这么想想,其实之前华仔搞的联合办公空间,也是个不错的选择。

在父亲去世的父亲节,怀念父亲

今天是父亲节,不过,于我而言,已经没有办法过父亲节了,因为去年我的父亲去世了。

到了父亲去世,我才开始去怀念父亲,想来颇为俗套。在这个失去父亲的第一个父亲节,也谈谈在父亲去世的这大半年里,我的感受。

0 关于父亲的记忆

只是一些关于父亲的碎碎念,可能后续会继续补充。

因为家中的条件并没有那么好,所以我的童年记忆并没有那么好,父亲常年在忙碌,我们家也做过不少的生意,来补贴家用。我母亲强势且能干,父亲显得慵懒和随意许多,但在目前的强势之下,父亲也算是没少做事,从最早摆地摊卖针织品,到后来和朋友合伙卖东北的酒,再到后面开烧烤摊子,卖烧烤。父亲和母亲都挺忙的。

而且,也因为母亲强势,父亲慵懒。所以他们没少吵架。母亲个性强,什么都想比一比。自然对慵懒的父亲少不了鞭策。

1 家庭生活的核心是夫妻,而非其他

在过去的这大半年里,我感触最深的,是家庭的核心是夫妻关系,而非其他。过去的这半年里,我的生活因为工作而填满。但母亲却因为疫情的原因,一直呆在家里,无事可做,久而久之,对于她而言,生活、怀念,会摧毁一个人的心态。

不过,疫情当下,确实麻烦。对于我而言,没办法让她来深圳长住(条件不允许,之前租房的时候也没有考虑这回事),她也很难去找到合适的事情去做。

所以难以处理。说来想去,也只能寄希望于她能够更好的自我疗愈。

2 一切事情都会过去

对于母亲而言,这个事情没有那么容易过去,但对于我来说,得益于工作的繁忙和糟心,父亲去世的这件事使我没有那么痛苦,只是会在一些特定的时候感到失落。但失落没多久,又要回来重新思考工作的事情,慢慢的,也就过去了。

3 健康重于一切

在过去,我更加关注业绩,如今,我更加关注健康。希望我自己够让自己活得更久,让自己的亲人不痛苦。

内心满是惆怅,落到纸面上,却又难以写出,且等我有朝一日重整心情,再来书写吧。

风变科技面试总结 – 2020 年 6 月 15 日

风变科技详情

风变科技当前最为知名的产品是《Python小课》。

一些关于风变科技的文章

风变科技网站

总体描述

我的简历应该是由他们的前端 Leader Function 提交的,因此,第一轮给我打电话的直接是 HR ,而不是一般时候我们的业务方。

技术面

技术面的面试官准点上线,这一点给赞。

技术面一共问了以下的一些题目

1. 后端模板引擎在 2020 年的时间节点中,他的存在有什么意义?

我的回答:后端模板引擎目前还存在,更多是从 SEO 的角度来看到的。当然,实际上为了 SEO ,前端还搞出了 SSR (Server Side Render)来处理这些问题。

2. 你搞过 SSR 么?

我的回答:没有。

这里可以看出,在当前 SSR 当道的情况下,搞一搞 SSR 还是有必要的。这个我需要在后续补充一下。加到 TODO 里。

3. 你为什么会在你自己的项目中配置 CI & CD?

我的回答:

因为我自己会觉得,CI & CD 的配置会让我能够更高效的完成自己项目的开发。

其实可以补充一些内容:

CI & CD 可以提升项目的质量,因为 CI & CD 并不是简简单单配置一个 CI & CD 就结束的。CI 、CD 背后是项目测试完善的标志。如果没有测试,CI 和 CD 就仅仅是一个自动部署的脚本而已,没有发挥出其最大的价值。

4. Vue 的单文件组件的 Data 为什么是一个函数,返回一个 Object,而不是直接返回 Object?

我的回答:

涉及到单文件组件复用的时候,可能会导致不同组件实例的数据紊乱。如果返回一个 Function ,Function 内部返回的 Object 会借助闭包机制来避免这样的问题。借助闭包机制构建诸如私有变量的形态。

面后研究:

这部分内容被记录在 Vue 官方文档中的组件基础页面

这里官方给到的描述是,当返回的是一个函数时,会让每一个函数维护一份被返回对象独立的拷贝

相关的 Vue 源码参考:https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L112-L152

5. 当一个父组件和子组件中的 Mounted 都加入一个 console.log 的时候,哪个会先打印出来?为什么?

正确答案:子组件的 console.log 会先打印出来。

这部分你可以参考实例代码 https://codepen.io/madman0621/pen/vQyBPB/

面后研究:

简单来说,组件会在 父组件进入 BeforeMounted 之后,进入子组件的 BeforeCreated 中

可以参考这篇文章:https://juejin.im/post/5c95ee98f265da60dd354c6c

6. Vue 的函数式组件如何使用

我的回答:这部分只答出了 Render 的函数和他使用 createElement 来创建 Element ,没有回答出其他的内容。

面后研究:

可以参考 Vue 官方文档中关于渲染函数的描述

https://cn.vuejs.org/v2/guide/render-function.html

7. Vue 如何做 Diff 的

这部分没有回答上来。

面后研究

https://github.com/answershuto/learnVue/blob/master/docs/VirtualDOM%E4%B8%8Ediff(Vue%E5%AE%9E%E7%8E%B0).MarkDown

8. v-if 和 v-show 的区别是什么?

我的回答:

v-if 和 v-show 一个是在渲染的时候控制,一个是在显示的时候控制。

v-if 会带来渲染开销;v-if 会带来显示开销。可以感受自己的需要选择。

9. 如果对 Vue 单文件组件的空 Object 进行操作,会触发更新么?

题目大概是下面这样的含义,问是否会触发更新

new Vue({
  data:function(){
    return {}
  },
  methods:{
  onClick(){
    this.data.xxx = abc
  }
 }
})

我回答的是不会,理由是和之前的 Vue 组件的 data 为什么是一个函数而不是一个 Object 一样的。这里使用类似闭包的机制让其来完成其数据的不互相干扰,带来的问题是,必须提前声明才能确保相应的数据被自动生成 setter 和 getter 。

面后研究

这个问题源自 Vue 的响应式原理,具体的内容可以参考下方的内容

https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E5%AF%B9%E8%B1%A1

10.关于 Web Socket 的原理

我的回答:这里我回答了之前在做嵌入式开发时的一些经验。

后来面试官告诉我他想了解的其实是我之前写的一篇公众号文章 。我就说了一下自己的理解。

https://www.ixiqin.com/2019/08/websocket-how-to-implement-the-server-to-the-client-sends-the-message/

11. Node.js 中的双工模式

这部分我没有了解,没有回答

12. 僵尸进程与孤儿进程

13. Git 的 Merge 和 squash merge 的区别是什么

我的回答:

squash merge 的最大区别是可以将多个 commit 合并为一个commit ,我会在整个 pr 中的 commit 无意义的时候,使用 squash merge。 当 commit 有意义时,就使用 merge。

面后研究

这里还有一个问题,我没有回答上来,就是 cherry-pick 能干嘛?

这里可以看看阮一峰老师的博客:http://www.ruanyifeng.com/blog/2020/04/git-cherry-pick.html

13. Node.js 的流(Stream)

这部分我只说出了自己用过 fs 的流

面后研究

面试官的预期答案,可以参考 http://nodejs.cn/api/stream.html#stream_stream

14. Egg.js 为什么没有用 Pm2,而是自己实现了守护进程?

这部分我没有回答出来。只是说出了,如果你要将自己的项目改用PM2 管理时,需要去除script 中的 daemon 模式,以标准的进程模式来运行。

涉及到的页面

https://www.eggjs.org/zh-CN/core/deployment

https://github.com/eggjs/egg-cluster

15. 如何平衡工作时间和 Side Project 的时间?

我说了一下自己的模式,每周五晚和每周六晚通宵搞代码

16. 如果团队没有人分享的话,如何让他们分享?

面试总结

本次面试的时长约 1 个小时,讨论的问题达到了近 20 题(实际上还有一些我记得不太清楚的题目),可以看出,几乎在每个问题中,我都没有和面试官去往深处去讨论,这其实会为我的面试失败埋下伏笔(写这篇文章的时候还不知道结果,暂且认为这样不太好)。

下一次面试需要优化的点包括:

  1. 对于自己常用的工具需要熟悉,比如 Vue,比如 Git
  2. 对于 Node.js 的原理还是有待深入学习

如何在 iOS 上重命名一个文件

由于疏忽,我在上传 Trello 文件的时候,没有修改文件名。在 Trello 中我通过其系统自带的文件名机制,修改了文件名。

今早在路上时,突然需要发简历给面试官,于是我从 Trello 上下载了简历给到面试官,发现一个很尴尬的事情,文件名并没有如 Trello 显示的那样,还是显示我的最基础的简历样式。

于是,我只好尴尬的将没有修改过名字的简历文件发给面试官。

这次的问题解决了,但为了避免下次出同样的问题,我决定记录下,如何修改 iOS 下的文件名。

如何在 iOS 中修改文件名?

你只需要在 iOS系统自带的“文件”应用中,找到你要改名的文件,然后,在文件上长按,唤起菜单,在菜单中你可以看到重命名。

选择重新命名就可以修改文件名了。

我在路上试图用选择来操作,但是很显然,我并没有在选择的时候找到重新命名这个选项。

最后,除了学习如何修改文件名以外, 我还去把 Trello 中的文件删除,修改文件名重新上传,避免类似尴尬的情况。

优秀程序员的九种素质

转载自:http://macshuo.com/?p=1473

一个优秀的程序员需要什么特质呢?由此我想到之前读过的一篇文章,是 Redis 之父萨尔瓦托 · 桑菲利普(Salvatore Sanfilippo)写的 9 种高能程序员的特质,重新意译一下,推荐给读者:

1、高效完成子任务

从处理编程子任务上,可以看出一个程序员的短板和长处,比如实现一个函数或者一个算法。事实上,擅于使用基本的编程技能来高效完成任务的程序员,并没有人们想象的那么多。有时候,团队里有些不称职的程序员,他们甚至不知道该怎么写一个简单的排序算法。

2、合理使用自己的经验

桑菲利普认为,经验就是一系列解决方案,它们已经被证实可以用于处理一些重复性的任务。经验老道的程序员知道该如何处理各种子任务,这样不但省掉了很多设计工作,而且避免了很多设计错误,而设计错误是简洁性最大的敌人。

3、准确预测工期

花在编码上的时间不仅要看数量,也要看质量。造成注意力不集中的因素既有内部的,也有外部的。集中注意力和避免被打扰,对于提高编程效率来说是至关重要的。

4、设计权衡:用 5% 换取 90%

项目的「非根本性」目标在很大程度上导致了设计的复杂性,或者导致无法达成其他更重要的目标,因为根本性功能和非根本性功能在设计上存在竞争关系。如果意识不到这点,复杂性就会随之而来。对于设计者来说,如果项目要最大化产出,就要把精力集中在重要的事情上,并在合理的时间内完成。

5、简洁性

简洁性是成败之间最为明显的分界点,理解复杂性的产生过程有助于理解什么是简洁性。不愿意做出设计权衡和设计错误的累积是导致复杂性的两个主要因素。我在第一点里讲的 Internal 其实是提高了复杂度导致用户选择错误。

6、拒绝完美主义(为了偏袒设计而放弃生产力)

完美主义可以分为两种:一种是追求程序极致性能的工程文化,另一种是个人特质。不管是哪一种完美主义,它们都会对程序员实现快速交付造成阻碍。完美主义和对外部评判的恐惧会导致设计上的偏袒,程序员根据主观的心理因素和无关紧要的衡量参数做出设计决策,却忽略了健壮性、简洁性和及时交付。

我曾经服务过的一家公司就犯了这种错误。当然,错误不止于此。

7、理解知识理论的价值

在处理复杂任务时,具备一些理论方面的知识会对设计产生重要影响,比如数据结构方面的知识、了解计算能力的局限性和一些重要的算法。虽然程序员没有必要成为无所不知的超级专家,但是至少要知道一些问题的潜在解决方案,避免设计出复杂、缓慢、低内存效能的解决方案。

8、理解机器原理

程序的很多问题都是源于对计算机工作原理的误解,即使是使用高级语言开发的程序也不外乎如此。这种情况可能导致一个项目需要重新设计和实现,因为项目所使用的工具和算法出现了根本性的错误。

7 和 8 说的道理差不多,这也是极客时间会连续推出数学、算法、数据结构、网络协议、软件工程等课程的原因,后面还有架构设计、操作系统、编译原理等等。

9、调试技能

查找和解决 bug 经常会占用程序员大量的时间。查找引起 bug 的问题根源,在合理的步骤内修复 bug,以简单的方式编写包含较少 bug 的代码,对于程序员来说,做到这几点就可以显著提升效率。

能否运用调试技能快速解决问题是衡量一个程序员水平的重要标准。

你具备这些特质嘛?我觉得村上说的没错,程序员同时还需要集中力和耐力。

我是如何优化博客的

由于主域名的备案掉了,所以我不得已,将站点从国内的 VPS 上迁移到了国外的 VPS 上,但是,站点迁移,速度不能下降。

事实上,经过一段优化,目前这个站点的速度着实不错,对我自己来说,基本上是秒开,而在测试网站上,速度也是杠杠的。

除了极个别监测点的速度实在是太慢,绝大多数的监测点都在 1s 内打开。

https://www.boce.com/http/www.ixiqin.com

能达到这样的速度,背后意味着很多种优化。我们一一来看。

原理

如果要对网站速度进行优化,就需要理解,在我们从浏览器中输入一个网址,到我们最终网页加载完成,都经历了哪些流程。

  1. 域名解析:我们输入在浏览器中的域名,是无法直接抵达目标主机的。因此,我们需要访问 DNS 服务,将域名转换为 IP 地址,从而才能抵达目标主机。
  2. 内容下载:当我们的请求抵达目标主机后,浏览器会下载服务器的返回。
  3. 本地渲染:浏览器将服务器的返回下载到本地后,会在浏览器的引擎中进行渲染。

当然, 在实际执行过程中,我们需要考虑的不仅仅是这三个点,不过就这三个点而言,也足够我们进行优化了,更加细致的,可以在后续遇见新的性能瓶颈后,进行优化。

分析

在理解了原理后,我们可以一一来分析

域名解析

对细节进行分析以后,可以看到,我的站点在解析时间上的耗时是普遍比较长的,大多是在 0.3 秒,这是一个优化点。

DNS 的优化总的来说,乏善可陈。因为系统底层对于 DNS 的机制只有两处,分别是

  1. Hosts
  2. DNS 解析

如果想要优化,那你就需要降低你的 DNS 解析时间。Hosts 显然是不靠谱的,你不可能让你的用户都去修改了 Hosts 后再使用。

而 DNS 解析,目前我使用的是免费的阿里云 DNS ,这里的优化其实依赖的是阿里云的 DNS 优化(付费版可能会好一点,不过我暂时不考虑上付费 DNS)。

内容下载

内容下载可以分为两个部分

  1. 内容生成:服务器计算得出结果。
  2. 内容下载:浏览器将服务器计算的结果下载到本地。

内容生成

在内容下载整个流程中,WordPress 主要的问题往往是卡在内容生成方面。

由于 WordPress 的功能强大,且在优化方面做的一般,因此,当我们的 WordPress 的内容足够多的时候, 数据库的查询就会开始变慢。

在这个时候,我们可以选择使用一些工具来加速站点的优化。一般的来说,会考虑使用 Key Value 数据库来替代直接使用 MySQL 进行查询。

这方面可选的包括

  • Memcached
  • Redis
  • 文件缓存

我因为懒得配置 MemeCached 和 Redis ,因此使用的是文件缓存,这里我用的是 WordPress 的 WP-Optimize 插件

可以看到,我的站点的缓存数量达到了 2716,缓存的大小达到了 45.6MB。也正是这些缓存,让我的站点在内容计算方面不需要耗费太多的时间,优化站点的体验。

当然,如果你追求更好的速度,可以考虑上 Redis 或 Memcache ,这些内容互联网上有非常多的教程,我就不再一一介绍。

内容下载

说完了内容生成,来谈一谈内容下载。

在内容下载方面,其实主要受限于你所使用的虚拟主机、VPS、云服务器性能。

在我们购买虚拟主机、云服务器的时候,我们往往会要购买相应的带宽。你购买的带宽越大,你的站点在下载时能够使用的带宽就会越大,相应的,下载的速度也就会越大。

在这方面,如果你的站点有备案,可以考虑购买一些国内的 CDN 服务,使用 CDN 来完成站点的加速,让你的站点加载速度可以变得更快一些。我的域名没有备案,所以没办法使用国内的 CDN,比较遗憾。

本地渲染

内容下载到本地,就会需要进行内容的渲染,而渲染的过程则和你的站点设计、标签数量、复杂度等都有关系。

你会发现,我现在站点使用的大多数是 WordPress 官方的主题,官方的主题的好处在于其站点设计简洁大方,同时页面的标签结构会比较合理,可以确保不会卡在一些奇奇怪怪得地方。

类似的,这也是为什么我很讨厌一些站点生成器(可视化拖拽工具),他们的确可以很方便的生成,但相应的,也会带来大量的冗余标签,让我觉得十分不优雅(当然,背后的人效计算又是另外一回事了)。

总结

对于你自己的博客来说,你也可以参照我的优化方法,来找到自己的问题点,并进行相应的优化,当然,如果你有什么想要讨论的,也欢迎你在下方的留言区和我一起分享。


Append:

我将 DNS 从阿里云免费 DNS 切换到 DNSPod 的个人专业版的以后,我的 DNS 解析时间获得大幅度下降,解析速度降为 0.13s 以内。如果你的解析速度也很高,值得试试。

用 HomeBrew 安装字体

我因为有一些时候需要做 PPT,需要安装一些特定的字体,但是 macOS Catalina 的 字体册应用总是 Crash ,因此,我决定使用 HomeBrew 来安装字体

配置 Tap

使用 Homebrew 安装字体,就需要配置相应的 Tap (可以理解为 Ubuntu 中的 Source 和 CentOS 中的 Repository。

brew tap homebrew/cask-fonts

安装字体

执行命令,就可以安装相应的字体。

brew cask install font-noto-sans-cjk-sc
brew cask install font-noto-serif-cjk-sc
brew cask install font-jetbrains-mono
brew cask install font-source-han-noto-cjk

如果你想要搜索一个字体怎么办?打开 Github 页面

在其中点击 Find File

并在新的界面中输入你想要的字体的英文名,比如 Ubuntu

去掉最后的 .rb ,就是你安装时使用的字体名,比如,安装 Ubuntu 字体,只需要执行 brew cask install font-ubuntu

如何免费为你的组织项目配置 Vercel

如何免费为你的组织项目配置 Vercel

前言

Vercel 是我自己非常喜欢的平台,我自己的一些项目都会选择使用 Vercel 来部署。比如 LogolyEasyWPBook 等等。

主要是其在中国大陆的访问速度是比 Netlify 和 Github Pages 更快。但不得不说的是,Vercel 提供了 Production 环境和 Development 环境,对于项目开发时是非常有用的,当你提交一个 commit 或者是一个 PR 时, Vercel 会自动帮你部署,并将相应的 URL comment 到你的 commit 或 PR 下,你只需要点击相应链接,就可以预览效果,十分方便。

但 Vercel 的 Teams 功能是付费的,对于一些 Organization 来说,你需要付费用 Vercel 成本是比较高的。特别是如果你是一个 OpenSource Project,你大概率入不敷出。在这种情况下,如何才能在 Organization Project 中免费使用 Vercel 呢?我考虑了一个绕过去的方法。

我们之所以无法使用在项目中无法免费使用 Vercel 是 Vercel 的产品策略问题。

而我们被禁用的无法使用官方自建的 Github Apps 来部署,但不意味着我们不可以自己实现这样的逻辑,来实现在组织内项目进行push。

而想要达成这样的效果,需要你具备两个条件

  1. 你的代码每一次提交都会自动触发 CI
  2. 你的 CI 中可以自动上传代码到 Vercel

而前者,可以通过 Github 提供的 Action 来完成。后者则可以通过编写代码来完成。不过好在,我在 Github 的 Marketplace 中找到了别人已经写好的 Action ,因此又可以少写一些代码(开心?)。

接下来,看看具体要如何操作。

步骤

安装依赖

在进行后续的操作之前, 你需要先安装配置过程中的依赖。

执行如下命令安装 Vercel CLI

npm i -g vercel

创建一个项目

为了正常部署,你需要创建一个项目,并将其 push 到 Github。当然,如果你已经创建好了项目,就直接把项目 Clone 到本地就好。

使用 Vercel 部署这个项目

这一步是为了在 Vercel 上创建一个项目,因为 Vercel 不支持通过网页端创建项目,只支持在 CLI 或通过 Git 接入自动创建。

在你的项目根目录,执行命令 vercel 来触发 Vercel 的部署,它会自动上传你的项目到 Vercel 。如果你之前登录过,会看到类似这样的界面,根据其提示进行配置就好。如果你之前没有登录过,你登录后会出现类似的界面。根据提示进行配置。

获取配置

想要部署一个项目到 Vercel ,你需要知道三样东西

  1. Access Token: 用于 CLI 的登录和 API 的调用,没有 Access Token ,Vercel 就没有办法获取到你的用户身份,进行鉴权校验。
  2. Org ID:Org ID 是指你在 Vercel 上的用户 ID。由于 Vercel 中一个人其实可以管理和配置多个 Team ,因此需要借助 Org ID 来指定要管理哪个账号下的项目。
  3. Project ID:很好理解,如果你要管理 Project ,就需要一个 Project ID。

其中,Access Token 你需要从 Vercel 后台的 Tokens 页面获取。

而 Org ID 则可以从你的项目中的 .vercel/project.json 中获取。你会获得类似下面这样的内容,其中的 OrgID 就是你在 Vercel 上的 ID ,而 Project ID 就是对应的项目 ID。

{"orgId":"r359XAnYONVAmiXtdxZ22A2E","projectId":"Qma3GdwoiAfJSsbsSydBgaCDh8LJj6wTWvvqpUwrN6J2F3"}

准备好了这三项以后,就可以进入到下一个环节,配置 Action Secret 了。

配置 Github Action Secret

Github Action 提供了 Secret 的机制,用来让你保存哪些安全密钥,避免直接写在 Action File 中,出现泄漏的可能。

打开你的项目的 Settings – Secrets 页面

在这里你可以新增 Secret ,你需要新增三个 Secret ,分别是

  • ORG_ID: 填写你从 .vercel/project.json 中获取到的 orgId;
  • PROJECT_ID:填写你从 .vercel/project.json 中获取到的 projectId;
  • VERCEL_TOKEN:填写你从 Vercel 后台生成的 Token。

这样,就配置好了 Secret ,接下来就可以在你的项目中加入 a、Action 配置文件,完成项目的配置。

添加 Action 配置文件

根据 Github 的规范,你需要将你的 Action 配置文件放置在项目根目录的 .github/workflows/xxx.yml 文件中,其中 xxx 是你的 Action 名,比如叫 vercel.yml

这里我使用的是 ngduc 写的 vercel-deploy-action

按照路径创建好 vercel.yml 文件,然后在其中加入如下代码

name: deploy website
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: ngduc/vercel-deploy-action@master
        with:
          vercel-cli: vercel
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}
          github-token: ${{ secrets.GITHUB_TOKEN }}

粘贴进去以后,将 vercel.yml 添加到 git 控制中,并提交到 Github 上,就可以实现触发 Vercel 了。

总结

虽然 Vercel 本身不能免费提供 Organization 的支持,但是我们可以通过一些小的技巧,绕过其官方的配置。对于一些只是将 Vercel 配置为开发者预览的场景下来说,还是足够的。

但如果你希望将 Vercel 配置为生产环境,那么 Teams Plan 可以提供的更多的权限控制,会是你需要的,买一个,也不贵,是吧?