mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-24 11:08:16 +08:00
63 lines
2.8 KiB
Markdown
63 lines
2.8 KiB
Markdown
---
|
||
title: 介绍
|
||
createTime: 2022-05-14T10:43:53.202Z
|
||
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/)
|