---
title: 介绍
createTime: 2022/05/14 10:43:53
author: pengzhanbo
permalink: /note/vuepress-plugin/netlify-functions/intro/
---

## Why

### Netlify

[Netlify](https://www.netlify.com/) 是一个提供了免费部署静态站点的平台，可用于作为 `github page` 的替代工具。

在 `Netlify` 上面部署站点也非常方便，可以直接使用 `github` 仓库进行 构建并部署，同时支持 自定义域名。

还提供了 `Netlify Functions` 等工具，可以用于给站点提供 自定义云函数。

### VuePress

`vuepress` 是一个很方便的静态网站构建工具，使我们可以直接书写 markdown后，构建为一个高可用的静态站点。

### 部署

一般情况下，当我们不希望购买一个服务器用于部署我们的站点时，通常都会选择使用 `github page` 来进行免费部署。
`Netlify` 是一种替代方案，而且当使用 `Netlify` 部署时，还可以利用 `Netlify Functions` 提供的云函数功能，
使站点能够进行更为丰富的交互。

### 场景

通过 `Functions` 连接到 一些提供了 免费服务的 云存储服务，比如 `FireBase` ，`Lean Cloud` 等。
虽然这些云存储服务提供了 Web 客户端直连服务的功能。但毕竟我们的站点源码是直接放在 `github`开源仓库中，
我们不希望将 这些 云存储服务 提供的一些 鉴权信息 直接 保存在 仓库代码中，带来某些安全风险。

在这种场景下，就可以借助 `Netlify Functions` ，将这些鉴权信息，作为 `环境变量` ，
托管在 `Netlify Environment Variables` 中，然后通过 站点调用 `Functions` 来获取这些鉴权信息。
或者进一步的，直接将 云存储服务的 连接、功能等，都在 `Netlify Functions` 中完成， 
站点再调用 `Functions` 接口， 获取返回的数据。

有了 `Netlify Functions` 加上 一些 第三方的 云服务支持， 可以为我们的 vuepress 站点提供更强大的支持。


## 如何整合？

在基于以上的背景，下一步就是需要将 `Netlify Functions` 能够在 我们的 `Vuepress` 项目中进行 整合了。

- 如何使 `Netlify Functions` 能够在本地开发环境中进行调试。
- 如何将 已开发好的 `Functions` 作为 `vuepress plugin` 提供给 其他 `vuepress theme` 或 `vuepress` 站点中使用。

### 开发环境

本插件在 vuepress 的开发服务的基础上， 启动了一个 由 `netlify-cli` 提供的 服务，并将该服务通过代理的方式，
代理到 vuepress开发服务上，统合开发环境。

并且监听 functions 内容变更，实现热更新。

### 打包

在打包阶段， 生成一个 `netlify.toml` 配置文件，配置 functions 相关内容。

并且将 所有 functions 添加在 vuepress 的构建包中。

如何使用插件，请查看 [使用文档](/note/vuepress-plugin/netlify-functions/usage/)
