不幸的是,Heroku 宣布计划从 28 年 2022 月 日开始停用其免费套餐,这让许多开发人员争先恐后地寻找替代方案来托管他们的训练营和投资组合项目。
在本文中,我们将回顾使用 Heroku 部署应用程序的几种替代方法。我们将构建一个简单的、无框架的 Node.js 应用程序,然后将其部署到三个提供免费层(渲染、铁路和 Fly.io)的不同服务。我们还将探索一些用于静态部署和如何查看或编辑您的YouTube评论历史记录?图文教程只需几步即可无服务器函数的 Heroku 替代方案。让我们开始吧!
构建我们的测试应用
我们将构建一个普通的 Node.js 服务器,但如果您使用任何流行的 Node.js 框架,如 Express、Koa、Fastify、NestJS、FoalTS 等,同样的原则也适用。您应该已经在计算机上安装了 Node.js。
将编辑器打开到一个空文件夹。怎么查看Windows10/11电脑所有登录用户?分享4种方法使用命令从终端创建新的 Node.js 项目。npm init -y
创建一个名为 的文件。在 中,让我们使用以下命令设置启动脚本:index.jstouch index.js
package.json
"scripts": { "start": "node index.js" },
在里面,运行以下代码来配置一个基本的“你好,世界!节点.js服务器:index.js
// Import http library const http = require("http") // use env variable to define tcp/ip port with a default const PORT = process.env.PORT || 8080 //create our server object const server = http.createServer() // We define a function that runs in response a request event server.on("request", (request, response) => { // handle request based on method then URL response.statusCode = 200 response.write("Hello World") response.end() }) // get the server to start listening server.listen(PORT, err => { // error checking err ? console.error(err) : console.log(`listening on port ${PORT}`) })
让我们通过运行然后前往 .如果您看到“Hello, World!”,则表示它正在工作,您可以开始部署它。从您的终端中,趣知笔记 - 分享有价值的教程!创建一个名为 的 git 存储库。使用命令将所有文件添加到暂存,然后使用 .node startlocalhost:8080
git initgit add .
git commit -m"First Commit"
接下来,转到 GitHub.com,创建一个新的存储库,并获取 URL。将 GitHub.com 存储库作为远程存储库添加到本地存储库,并确保使用 URL:
git remote add origin https://github.com/username/reponame
然后,将您的代码推送到远程 .您可以使用命令确认您的分支是主分支还是主分支。git push origin main``git branch
现在我们在 GitHub 上有了示例代码,趣知笔记网站地图我们可以开始部署它了。作为参考,您可以查看本教程的存储库。
部署到渲染
Render的免费层使React,Vue和Angular应用程序的静态部署以及Node.js应用程序的Web服务部署变得容易。只需按照以下步骤操作:
-
使用您的 GitHub 帐户登录 Render.com
-
单击“新建”> Web 服务
-
连接您刚刚创建的 GitHub 存储库
-
在下一个屏幕上,为项目命名,接受所有默认值和免费层,然后部署
在以下屏幕中,我们等待部署完成,这可能需要一段时间。在左上角,您可以找到完成时的URL:
完成后,单击为您生成的URL,您应该会看到我们的“Hello,World!”消息。这很容易,不是吗!
Render 提供了在构建应用程序时可能会发现有用的其他服务,例如数据库和 cron 作业,它们是按设定计划运行的脚本。
部署到铁路
与Render类似,Rail是一种服务,允许您部署应用程序并配置多种类型的数据库,如Postgres,mySQL和MongoDB。在 Railway 上部署 Node.js 应用程序的步骤与 Render 非常相似:
-
使用您的 GitHub 帐户登录
-
创建新项目并选择“从 GitHub 部署”
-
选择存储库,然后选择“立即部署”
它应该很快完成,您将看到以下屏幕:
默认情况下,它没有可公开访问的域名。要生成一个,请转到“设置”选项卡,然后单击“生成域”;这将创建一个 URL,您可以使用该 URL 与他人共享您的项目。就是这样!
使用 Fly.io 进行部署
Fly.io 主要专注于部署Docker容器,在过去的几年中,它使该过程变得更加容易。首先,使用您的 GitHub 帐户注册。使用 Fly.io 进行部署时,我们将采用不同的方法:
-
安装 Fly.io 的命令行工具 FlyCtl
-
使用命令登录。它会要求您提供付款信息,但只要您保持在免费套餐内,就不会向您收费flyctl auth login
-
在终端中,使用 部署应用程序flyctl launch
-
回答提示并接受默认值,然后等待部署完成
这可能需要一段时间,但部署后,您将在 Fly.io 仪表板上看到该应用程序以及它所在的 URL。
如果将来需要更新应用,只需从应用程序所在的目录运行命令即可。运行 时,它会创建一个文件,其中包含用于加速更新的所有部署设置,因此它知道要更新的部署。flyctl deployflyctl launch
fly.toml
如果它不起作用,请仔细检查公开的端口是否与在第 4 行中公开的端口相同,作为默认端口。fly.toml``index.js
静态部署的 Heroku 替代方案
并非每个应用程序都需要您部署服务器;例如,前端 React、Vue、SolidJS、Svelte 和 Angular 应用程序可以部署为静态应用程序。
有几个选项可以免费部署这些静态应用程序,只需要将 GitHub 存储库与项目连接,包括 Render、Railway、Fly.io、Netlify、GitHub Pages、Vercel、App by Digital Ocean、Surge.sh、Firebase 和 Azure Static Apps。
不是在提供程序的服务器上持久运行服务器代码,而是只交付项目中的静态 HTML、CSS 和 JavaScript 文件。因此,免费选项较少。
渲染上的静态部署
要在 Render 上部署静态站点,请转到仪表板并添加新的静态站点:
从这里,您只需将存储库与您的静态网站连接,指定任何构建命令,例如 React,然后单击部署。npm run build
Netlify 上的静态站点部署
登录到 Netlify.com,然后单击仪表板中的添加新站点:
然后,选择一个 GitHub 存储库:
设置构建命令和发布目录,这将根据您使用的前端框架而有所不同:
最后,单击“部署站点”,您就完成了!
Vercel 上的静态站点部署
登录韦塞尔;在仪表板中,单击“新增”,然后选择“项目”:
选择要部署的 GitHub 存储库:
设置生成命令和输出控制器,然后单击“部署”:
数字海洋App平台上的静态站点部署
前往数字海洋仪表板的“应用程序”部分,然后单击“创建”并选择“应用程序”:
选择包含应用程序的 GitHub 存储库,并向其传递必要的配置,例如源目录:
在下一页上,我们将应用设置为部署为静态站点:
要部署像 Heroku 这样的后端服务,您还可以选择 Web 服务,但这在 Digital Ocean 上不是免费的。将其更改为静态站点后,请确保检查 build 命令和输出目录:
单击“查看”,然后单击“创建资源”,即可部署应用!
GitHub 页面上的静态站点部署
在任何包含静态站点的 GitHub 存储库上,只需进入“设置”部分并单击“页面”:
接下来,选择要部署和保存的分支,几分钟后,站点应处于活动状态:
无服务器函数
无服务器函数是处理后端数据库交互和 API 交付的另一种选择,这是我们通常部署服务器应用程序的选项。
您可以编写在提供程序服务器上按需运行的所需逻辑的函数,而不是编写 24/7 全天候运行的服务器。所有主要的云,如AWS,Azure和Google都提供无服务器功能即服务,但还有其他服务使使用无服务器功能变得更加容易。
通常,这些服务要求你将 GitHub 存储库与要部署的每个函数的一个文件连接起来,然后为该文件分配一个可从前端应用程序调用的 URL。
在 Netlify 上使用无服务器函数
要将一些后端功能添加到部署在 Netlify 上的静态应用程序中,只需在存储库中创建一个文件夹即可。您可以根据需要在此文件夹中添加任意数量的 JavaScript 文件;例如,假设我创建了一个如下所示的文件:/netlify/functions``/netlify/functions/cheese.js
exports.handler = async function (event, context) { return { statusCode: 200, body: JSON.stringify({ cheese: "Gouda" }), }; };
当上面的代码部署到 Netlify 时,它将创建一个路由,您可以在 .您可以使用项目中加载的任何库,因此连接到数据库和其他典型的后端活动都是公平的。/.netlify/functions/cheese``package.json
在 Vercel 上使用无服务器函数
要将无服务器函数与部署在 Vercel 上的静态应用程序一起使用,您可以使用 Vercel 函数,当您使用 JavaScript 时,这些函数与 ExpressJS 具有类似的感觉。
只需在项目中称为的文件夹中创建JavaScript或TypeScript文件即可。例如,假设我创建了一个名为 的文件,该文件执行以下操作:/api``/api/cheese.js
export default function handler(req,res) { res.json({cheese: "gouda"}); }
当我将我的应用程序部署到 Vercel 时,我可以发出任何 API 请求以从此函数返回响应。/api/cheese
付费选项
Heroku的主要目的是部署动态服务器应用程序。除了 Render、Railway 和 Fly.io 的免费选项之外,其他一些付费选项也遵循相同的方式,连接您的 GitHub 存储库并发布您的应用程序: