从 GitHub 到 Cloudflare Pages 的静态 Vue 站点部署记录

这是一个使用 GitHub 和 Cloudflare 进行 Vue 站点部署的记录。这一过程中完全免费,不需要自备服务器或域名,甚至可以将一切操作都使用浏览器在云端完成。

这不是一个 step-by-step 的教程。这篇文章会记录整个操作过程,但是不会详细到把每一步的具体操作(点哪个按钮?)都写出来。如果你想要按照同样的方法进行操作,请发挥一些主观能动性。

这篇文章会记录一些不太容易发现和搜到解决方法的坑。

开始以前

你需要准备的

  • GitHub 账号和 Cloudflare 账号。本文不会教你注册。
  • Visual Studio Code(可选)。与 GitHub 无缝对接,不过也可以直接在线使用网页版。

你不需要准备的

  • GitHub Enterprise 之类的任何付费服务。完全免费!
  • Node.js、npm 等工具。虽然我们会用到这些工具,但是云服务器会自动为你配置好。等着喂饭就行了。

GitHub:从 Codespace 到仓库

如果你在本地已经有了一个 Vue 站点或者其他类似框架的应用,那么将它上传到 GitHub 的仓库里就可以了。但是如果你要从头开始创建——你不需要自己在本地配置环境和创建新仓库。

你可以使用 GitHub Codespace 从云端构建。

在 GitHub 上创建一个空仓库,作为你的项目仓库。然后在仓库的 Code 选项中创建一个 Codespace。这会自动为你分配一个云服务器,其中包含你的项目仓库。在默认情况下,这会在浏览器里启动一个在线的 Visual Studio Code 编辑器。你也可以设置从本地的 Visual Studio Code 启动。

接下来,你可以直接在这个云服务器里创建和修改项目并直接 push 到仓库里。

按照 Vue 文档中的方法创建项目。打开终端,在根目录中使用命令:

npm create vue@latest

下载和安装 Vue 脚手架工具。就像前面说过的,你完全不需要自行安装 npm 和 Node.js,因为 Codespace 提供的服务器里会预制这些工具。

接下来,Vue 项目会开始创建。在这里会遇到第一个问题:创建项目的目录是什么?

? Project name: › vue-project

在这里输入的 Project name 会作为目录名存放 Vue 所需的文件。你可以输入 . 作为“目录名称”,这样就可以直接在仓库根目录下创建项目。这样在使用命令进行构建时会稍微方便一些。

不过,这样会导致创建的目录被清空。所以,如果有什么 License 或者 Readme 文档需要放在仓库中,请创建项目后再添加。

如果你可以接受多敲一行命令,你也可以按照正常的创建流程,正经命名一个新目录来创建项目。这样的话,在创建完成之后,你需要切换到项目文件夹来进行操作:

cd your-project-name

接下来使用 npm 安装依赖。完成这一步,你的 Vue 应用就已经部署好了。

npm install

安装完成以后,你只要使用 npm run dev 就可以运行你的 Vue 应用服务了。服务器会开放在 5173 端口,而 Visual Studio Code 会自动将远程服务器上的本地端口转发到你本地的端口上。也就是说,你可以保持与 Codespace 连接,然后直接在本地访问 http://localhost:5173/ 来预览你的项目。事实上,Visual Studio Code 会直接弹出选项引导你在浏览器中访问这个地址。

对网站的具体设计在此略去。假设你已经制作完成了你的 Vue 网页应用,你可以直接在 Visual Studio Code 左侧的 Git 功能菜单里进行操作,并提交到 GitHub 仓库。这不需要任何命令行操作,而且还比 GitHub Desktop 用起来方便多了。

(但是,push 时记得填写摘要。这个 Git 功能不会像 GitHub Desktop 那样提醒或自动生成摘要。)

Cloudflare:从仓库到 Pages

当你准备好将你的 Vue 应用公开发布时,你可以使用 Cloudflare Pages

在 Cloudflare 仪表板中找到 Workers & Pages 页面,然后创建一个应用程序,并在接下来的 Pages 选项中选择连接到 Git。这需要授权你的 GitHub 账号,然后选择库。

在接下来的 “设置构建和部署” 页面中,进行构建设置。好消息是,在 “框架预设” 中就有 Vue 的预设,你可以直接选择。这会自动填充这样的内容:

  • 构建命令:npm run build
  • 构建输出内容:/dist

注意,不要直接点击部署了!如果你在上面创建项目时,是在新目录中创建项目(而不是在根目录 . 中),你应该填写下面的根目录路径为你的应用目录:

  • 路径:/your-project-name

如果你是在根目录中创建了项目,那么此处应该留空。

最后有一项环境变量。如果你需要指定特定的 Node.js 版本,你可以在这里设置。例如,指定安装 Node.js 的 18.16.1 版本:

变量名称
NODE_VERSION 18.16.1

部署以后,Cloudflare Pages 会自动跟踪仓库的最新版本。也就是说,你在 Codespace 中每次同步仓库的新版本时,最新修改都会立刻发布到你部署的站点中。

另外,你的每次自动部署都会被保存在 Pages 的仪表板设置里,你可以随时回滚到旧版本。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

WC Captcha two × = 20