使用 Vercel 即时部署 Web 应用程序
您最近是否构建了一个新的 Web 项目并想向全世界展示它?最有可能的是,您作为开发人员遇到了这种愿望,并发现部署过程既漫长又费力。即使是像 GitHub Actions 这样的简单自动化工具也充满了复杂性,可能需要一段时间才能理解。
输入 Vercel,一个平台即服务产品,让开发人员只需单击几下即可展示他们的项目。哦,顺便说一句,它也是免费的。今天,我将向您展示如何利用 Vercel 部署两种样式的应用程序:NodeJS 应用程序和 11ty 静态站点。
为什么要使用 Vercel?
在应用程序部署的世界中,您可能需要处理服务器、VM、容器、Docker、网络、Terraform、AWS、Jenkins、Ansible ......
这份清单可能会一直持续下去。
Vercel 试图通过完全抽象基础设施来避免复杂性。它使用 “功能即服务” 或 FaaS 方法,这实质上意味着您可以上传您的代码(functions),Vercel 将围绕它构建一个环境。如果这听起来像 AWS Lambda,那是因为 Vercel 在后台使用 Lambda 引擎向其用户提供此功能。 Vercel 进一步抽象了 Lambda 的配置过程,为无服务器计算提供了一个平易近人的环境。
Vercel 入门
第一个合乎逻辑的步骤是创建一个帐户。正如我之前提到的,Vercel 非常容易使用。大多数开发人员在开发过程中使用某种类型的版本控制(即 GitHub),而 Vercel 与许多开发人员集成以将您的存储库直接连接到他们的构建管道。您可以使用 GitHub、GitLab 或 BitBucket 来设置您的帐户。
设置您的帐户后,您就可以开始部署您的项目了。从 Vercel 仪表板中,选择New Project按钮。
[
](https://res.cloudinary.com/practicaldev/image/fetch/s--gb6zfGrJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur .com/wtR94Zw.png)
从那里,您可以采取以下两条路径之一:
-
导入 Git 存储库: 这非常适合已完成的项目或您已经为其创建 GitHub 存储库的项目。在创建过程中,您将使用存储库的主分支创建应用程序的第一个部署。您不需要为此方法使用特定的框架。 另一个注意事项: 将您的帐户连接到版本控制时,您可以在您帐户上的所有公共存储库中安装 Vercel,或将安装限制到特定存储库。在 Vercel 仪表板中,您只能访问已安装 Vercel 的项目。
-
**克隆模板:**这对于新项目来说是理想的,在您决定使用一个框架之后。一些可用的选项包括 Next.js、Nuxt、11ty 和 Remix,以及其他选项。克隆模板会将启动项目存储库克隆到您选择的版本控制中,然后将 Vercel 安装到该存储库中。
[
中的部署选项](https://res.cloudinary.com/practicaldev/image/fetch/s--oNwfUhqT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i. imgur.com/QlOf4dJ.png)
选择路径后,您将获得一些用于构建/部署应用程序的配置选项。准备好后,选择蓝色的Deploy按钮,您就可以参加比赛了!您将看到部署进度,以及来自 Vercel 站点的实时构建输出。
[
](https://res.cloudinary.com/practicaldev/image/fetch/s--lCiY4tlq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// /i.imgur.com/lAuKxnr.png)
环境变量: 通常需要环境变量来存储 API 密钥、数据库连接信息或其他敏感数据。这些值可以通过“环境变量”部分保存到 Vercel。如果您需要在部署后添加它们,您可以在${Project} > Settings > Environment Variables下进行。然后可以通过process.env.${variableName}在代码中访问这些值。
11ty on Vercel
示例 1 - 你好马!
示例 2 - 11ty 基础博客
示例 3 - hax11ty
开发人员经常利用静态站点生成器(如 11ty)从易于编写的模板文件(如 markdown)启动快速站点。留下这些文件后,设置 Web 服务器、配置 Nginx、复制文件、设置 HTTPS 和配置域以供全世界查看可能会很麻烦。 GitHub Pages 通过自动化部署过程帮助取消了部分配置,但仍然需要配置 GitHub Actions,并且并行预览构建等一些不错的功能很复杂或缺失。
Vercel 运行您的eleventy build命令并完成生成公共 URL 所需的所有繁重工作,以供全世界查看,几乎为零的配置。它甚至允许用户从不同的分支部署相同的应用程序,以便可以在生产之前测试新功能。
我遇到的一个问题是在我的.11ty.js配置中配置了pathPrefix变量。这为我的资产和网站上的链接生成了不存在的路径。如果您已将站点部署到 GitHub 页面,则您可能已进行了此配置。为了解决这个问题,我修改了我的.11ty.js配置,在module.exports函数中包含以下内容:
//support for deployment on both Vercel and GitHub Pages
let deployPath = '/';
if (process.env.deployEndpoint != 'vercel'){
deployPath = '/11ty-base-blog/';
}
进入全屏模式 退出全屏模式
然后,我将module.exports设置为返回pathPrefix: deployPath
我还包括deployEndpoint环境变量,并在 Vercel 上的部署设置中将其设置为等于'vercel'。
Vercel 上的 NodeJS 应用程序
示例
除了提供静态内容外,Vercel 还通过功能即服务 (FaaS) 提供服务器端处理。在上面的示例中,该站点利用微前端组件通过Vercel 的无服务器功能处理数据。
Vercel 中的无服务器函数是通过项目的/api目录中的文件创建的。有多种支持的后端语言,包括我们用于此项目的 JavaScript。在该文件中,“处理程序”函数通过以下语法定义:
export default function handler(request, response) {
const { name } = request.query;
response.status(200).send(`Hello ${name}!`);
}
进入全屏模式 退出全屏模式
上面的函数定义了一个处理程序
[
上的功能配置](https://res.cloudinary.com/practicaldev/image/fetch/s--cXnDXDaC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// i.imgur.com/5EZKNGM.png)
上图显示了一个 JavaScript 函数,它在 Vercel 中定义了一个无服务器函数。该函数在domain.com/api/hello创建一个 HTTP 端点。该函数接受一个查询参数name,并将Hello ${name}返回给请求客户端。
无需额外配置即可实现此功能,只需在/api/目录中创建处理函数即可在构建和部署项目时创建定义的函数。
案例研究:Vercel 上的鞋带 CSS
模拟客户端
代码库
Vercel 使用户能够利用其应用程序的_“预览分支”_ 来测试新功能或应用程序更新,而无需将它们推送到生产环境。这是 GitHub 页面等简单部署平台无法提供的功能。通过这个案例研究,我将演示如何在测试 Web 组件库的更改时使用预览分支。
-
在版本控制中创建新分支 Vercel 会自动识别您在版本控制平台中的主分支。在此示例中,我的主分支称为
main,我的预览分支称为mayormaier/future。此页面显示来自main(生产)分支的组件,服务于https://shoelace-mayormaier.vercel.app。Vercel 将所有其他分支视为版本控制作为预览分支。 -
将更改推送到新分支 当更改推送到非主分支时,在这种情况下为
mayormaier/future,会创建一个_preview deployment_。
[
](https://res.cloudinary.com/practicaldev/image/fetch/s--rO8EKUM2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// i.imgur.com/iksFRJQ.png)
因为任何非主分支都可以触发预览部署,所以一个应用程序可以拥有看似无穷无尽的预览部署,每个都用于测试新功能。在此示例中,预览部署位于此处。在这个页面上也有引用,其中页面的<head>中的脚本标签引用了预览部署。请注意组件中带下划线的文本,即我们想要测试的“新功能”。
<link
rel="stylesheet"
href="https://shoelace-git-mayormaier-future-mayormaier.vercel.app/themes/dark.css"
onload="document.documentElement.classList.add('sl-theme-dark');"
/>
<script type="module" src="https://shoelace-git-mayormaier-future-mayormaier.vercel.app/shoelace.js"></script>
进入全屏模式 退出全屏模式
结论
使用 Vercel 以极快的速度交付应用程序,该服务将大部分配置细节抽象为无服务器功能。对于大多数“爱好”用例,vercel 的使用是免费的,但是它受到执行时间和带宽的某些限制。企业应用程序可能需要额外的火力或控制。 Vercel 有一个付费层,可以解锁额外的性能,但为了进行细粒度控制,您可能需要自己配置 AWS Lambda。
CI/CD社区为您提供最前沿的新闻资讯和知识内容
更多推荐
0
0- 0
已为社区贡献22908条内容
所有评论(0)