Cloudflare Page 如何构建前端应用

在这里,有个要求就是你的前端代码需要保存在 GitHub 或者 GitLab 上。

如果你使用的自己的代码库的话,没有办法通过 Git 仓库同步的功能来自动部署。

进入 Page 页面

在 cloudflare 中首先找到 Page 页面。

2022-09-09_02-21-42

创建一个项目

单击页面右上角的创建一个项目。

然后选择连接到 Git。

2022-09-09_02-22-57

选择仓库

如果你已经连接上 GitHub 了。

在这里可以显示你当前组织下所有的仓库,如果你的账号有多个组织的话,你需要分别单独授权。

如果没有连接 GitHub 的话,需要先创建连接。

2022-09-09_02-23-49

在选择好仓库后,单击开始设置来进行设置。

进行配置

在这里,你可以配置你的项目名称。

同时你也可以选择使用的构建框架。

我们当前这个项目是使用 VUE 进行构建的,因此我们可以在构建框架中选择 VUE。

构建的命令为 npm run build。

然后我们单击保存,系统就开始为我们构建项目了。

2022-09-09_02-28-35

构建进程

在随后的页面中,我们可以看到项目构建的进程。

cloudflare 会显示构建日志。

2022-09-09_02-28-51

如果是第一次构建的话,还是比较花时间的,在构建完成后 cloudflare 将会为我们将这个项目部署到 Page 服务器上。

我们也尝试使用了 yarn build 来进行构建,cloudflare 也是能够支持的。

经过一段时间的时候,我们也发现了这个服务的局限性。

主要是在 API 调用上面,这个服务的配置上禁止了 API 服务的调用。