Github 存储大文件

最近在做项目的时候,需要上传一个超过 200MB 的数据库文件到 Github 上保存,结果 Github 提示文件过大。这才知道 Github 对单文件有 100 MB 的容量限制。

# 问题介绍

正常情况下,我们执行 add, commit 操作的时候都没啥问题。

$ git add .
$ git commit -m "add large file"
1
2

但是执行 push 操作的时候会返回错误。

$ git push
Enumerating objects: 21, done.
Counting objects: 100% (21/21), done.
Delta compression using up to 10 threads
Compressing objects: 100% (17/17), done.
Writing objects: 100% (17/17), 153.95 MiB | 13.82 MiB/s, done.
Total 17 (delta 4), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (4/4), completed with 3 local objects.
remote: error: Trace: ###
remote: error: See http://git.io/iEPt8g for more information.
remote: error: File xxx.db is 259.50 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
To https://github.com/acgotaku/switch.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://github.com/{user}/{repo}.git'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里提示我们可以使用 Git Large File Storage 来解决。

# 安装 LFS

根据官网的教程进行安装:

$ brew install git-lfs
1

然后 cd 到对应的 repo:

$ cd {repo}
$ git lfs install
Updated git hooks.
Git LFS initialized.
1
2
3
4

# 重新提交

这时候我们需要保留文件的同时,取消 commit:

$ cd {REPO}
$ git reset --soft HEAD^
1
2

然后单独提交大文件:

$ git lfs track {LARGE_FILE}
Tracking {LARGE_FILE}
$ git add .gitattributes
1
2
3

执行第一行命令之后会生成一个 .gitattributes 文件,记得这个也需要一并提交。

接下来执行普通的 add commit, push 三个步骤就可以了。

$ git add .
$ git commit -m "add large file"
$ git push
1
2
3

# 总结

Github 针对大文件存储有一个月 1GB 流量的限制,所以如果到达限制了需要付费才能继续使用。

# 参考

GitHub に 100MB 超のファイルを置く (opens new window)

React 实现 Tabs 组件

基于 Vue 框架来实现各种 UI 组件之前有讲过,并且讲述了复合组件如何传递数据。一种方式是使用 Provide / inject, 另外一种是传统的 props$emit()。 但是 React 下复合组件如何实现,和 Vue 相比差距还是挺大的。接下来就讲述经典的 Tabs 组件如何来实现。

# Tabs 组件介绍

Tabs 是复合组件。Tabs 组件封装逻辑和显示上部的导航栏。 TabPane 用来传递属性和展示要显示的内容。具体使用请看下面的代码:

<Tabs>
  <TabPane label="文档" name="doc">
    文档
  </TabPane>
  <TabPane label="快速起步" name="start">
    快速起步
  </TabPane>
  <TabPane label="帮助" name="help">
    帮助
  </TabPane>
</Tabs>
1
2
3
4
5
6
7
8
9
10
11

这里 TabPane 的两个属性,一个是用来展示 Tabs 的文本,一个用来标注组件的 key,所以 name 属性必须是独一无二的。

# Tabs 组件的实现

React 框架可以通过 children 属性访问子组件,我们就利用这个特性来获取 TabPane 组件的相关属性。

export interface TabsProps {
  children: React.ReactNode;
  className?: string;
}

const Tabs: React.FC<TabsProps> = ({ children, className = '' }) => {
  const [activeTab, setActiveTab] = useState('');

  useEffect(() => {
    const firstChild = React.Children.toArray(children)[0];
    if (firstChild && React.isValidElement(firstChild)) {
      setActiveTab(firstChild.props.name);
    }
  }, [children]);

  return (
    <div className={cls(styles.tabs, className)}>
      <div className={styles.tabsNav}>
        {React.Children.map(children, child => {
          if (React.isValidElement(child)) {
            const { name, label, disabled } = child.props;
            return (
              <button
                key={name}
                className={cls(styles.tabsNavButton, {
                  [styles.active]: name === activeTab
                })}
                disabled={disabled}
                onClick={() => setActiveTab(name)}
              >
                {label}
              </button>
            );
          } else {
            return null;
          }
        })}
      </div>
      <div className={styles.tabsContent}>
        {React.Children.map(children, child => {
          if (React.isValidElement(child)) {
            const { name, children } = child.props;
            if (name === activeTab) {
              return children;
            } else {
              return null;
            }
          } else {
            return null;
          }
        })}
      </div>
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

Tabs 组件负责维护 activeTab 状态,并且根据用户操作显示正确的 TabPane。相比之下 TabPane 组件的实现就非常简单:

export interface TabPaneProps {
  label: string;
  name: string;
  children: React.ReactNode;
  disabled?: boolean;
  className?: string;
}

const TabPane: React.FC<TabPaneProps> = ({ children, className = '' }) => {
  return <div className={cls(styles.tab, className)}>{children}</div>;
};
1
2
3
4
5
6
7
8
9
10
11

只是单纯的封装了一下要展示的内容而已。

# 总结

React 框架在实现复合组件的时候和 Vue 的方式有很大差异,不过 React 的逻辑看起来更加简单和易用。自己动手实现 UI 组件对于每个前端工程师来说都是成长道路上必不可少的一项技能,软件开发中没有银弹,我们不能总是依赖第三方 UI 库来实现界面。花费在适配第三方软件库的时间绝对不亚于自己手写一个组件的时间。

# 参考

Tabs 标签栏 - Semi Design (opens new window)

代理Sentry的请求

Sentry (opens new window)是一款非常不错的网页监控工具,可以帮忙收集网页端的报错方便分析用户使用过程中遇到的问题。但是因为有收集用户隐私的风险,有些广告屏蔽软件会屏蔽 Sentry 的请求,所以我们需要使用反向代理的方式,让 Sentry 把请求发到我们自己的后端,我们再转发到 Sentry 服务器上。

# Sentry 端配置

添加 tunnel 选项,Sentry 就会把请求发到这个路径下,然后我们后台再处理转发。

Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  tunnel: '/sentry'
});
1
2
3
4

# 后台转发请求

app.set('trust proxy', true);

app.use(compression());
app.use(express.text());
app.use(express.json());
// 注意这三行代码一定要放在前面才能正常处理请求

app.post(/^\/sentry/, (req, res) => {
  const envelope = req.body;
  const piece = envelope.split('\n')[0];
  const header = JSON.parse(piece);
  if (header.dsn) {
    const dsn = new URL(header.dsn);
    const projectId = dsn.pathname.substr(1);
    const options = {
      hostname: dsn.hostname,
      port: 443,
      path: `/api/${projectId}/envelope/`,
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-sentry-envelope',
        'X-Forwarded-For': req.ip
      }
    };
    const request = https.request(options);
    request.write(envelope);
    request.end();
  }
  res.json({});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

后台 Web 服务器是使用经典的 express,转发的时候记得开启trust proxy,因为我们的服务器基本会放在 Load balancing 后面,为了获取到真实的客户 IP 地址,我们需要层层转发保证收集到的信息是真实 IP 地址,而不是我们后端 IP 地址。

# 总结

Sentry 的反向代理本身并不是很复杂,但是网络上并没有相关的 JS 代码实现和处理 IP 转发问题,所以希望我的代码例子能帮助大家快速的解决这个问题。

# 参考

Dealing with Ad-Blockers (opens new window)