使用 Deno Deploy 部署应用

Deno Deploy 允许您在全球边缘网络上托管 Deno 应用程序，并内置遥测和 CI/CD 工具。

本教程将指导您使用 Deno Deploy^EA 创建和部署一个简单的 Deno 应用程序。

先决条件 跳到标题#

1. 一个 GitHub 帐户
2. 您的本地机器上已安装 Deno
3. 访问 Deno Deploy 抢先体验计划

使用 Vite 创建一个简单的 Deno 应用程序 跳到标题#

首先，我们使用 Vite 创建一个基本应用程序，初始化一个新的 Vite 项目。

deno init --npm vite

给您的项目命名，并选择您的框架和变体。在本教程中，我们将创建一个原生的 TypeScript 应用。

使用 cd my-project-name 切换到您新创建的项目目录，然后运行：

deno install
deno run dev

您应该会看到一个基本应用正在 http://127.0.0.1:5173/ 运行。

您可以编辑 main.ts 文件以在浏览器中查看更改。

创建 GitHub 仓库 跳到标题#

1. 前往 GitHub 并创建一个新仓库。

2. 将本地目录初始化为 Git 仓库

git init
git add .
git commit -m "Initial commit"

3. 将您的 GitHub 仓库添加为远程仓库并推送您的代码

git remote add origin https://github.com/your-username/my-first-deno-app.git
git branch -M main
git push -u origin main

注册 Deno Deploy 抢先体验 跳到标题#

1. 访问 Deno Deploy 账户设置
2. 点击“加入抢先体验计划”
3. 一旦获批，您将收到一封包含访问说明的电子邮件

创建 Deno Deploy 组织 跳到标题#

1. 导航到 app.deno.com
2. 点击“+ 新建组织”
3. 选择“Standard Deploy”组织类型
4. 输入组织名称和短网址（此后无法更改）
5. 点击“创建 Standard Deploy 组织”

创建并部署您的应用程序 跳到标题#

1. 从您的组织仪表板中，点击“试用新的 Deno Deploy 抢先体验”

2. 然后点击“+ 新建应用”

3. 选择您之前创建的 GitHub 仓库

4. 应用程序配置应该会自动检测到，但您可以通过点击“编辑构建配置”按钮来验证这些设置

   • 框架预设：无预设
   • 运行时配置：静态站点
   • 安装命令：deno install
   • 构建命令：deno task build
   • 静态目录：dist

5. 点击 “创建应用” 开始部署过程

监控您的部署 跳到标题#

1. 在您的应用程序部署时，查看构建日志
2. 部署完成后，您将看到一个预览 URL（通常是 https://your-app-name.your-org-name.deno.net）
3. 点击 URL 查看您已部署的应用程序！

进行更改并重新部署 跳到标题#

让我们更新应用程序并查看更改如何部署

在本地更新您的 main.ts 文件

import './style.css'
import typescriptLogo from './typescript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.ts'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vite.ac.cn" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://typescript.net.cn/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Hello from Deno Deploy!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

2. 提交并推送您的更改

git add .
git commit -m "Update application"
git push

返回您的 Deno Deploy 仪表板，查看新的构建自动开始。构建完成后，访问您的应用程序 URL 查看更新。

探索可观测性功能 跳到标题#

Deno Deploy^EA 提供全面的可观测性工具

1. 在您的应用程序仪表板中，点击侧边栏中的“日志”

   • 您将看到应用程序的控制台输出
   • 使用搜索栏筛选日志（例如，context:production）

2. 点击“追踪”查看请求追踪

   • 选择一个追踪以查看详细的时间信息
   • 检查跨度以了解请求处理

3. 点击 “指标” 查看应用程序性能指标

   • 监控请求计数、错误率和响应时间

🦕 既然您已经部署了第一个应用程序，您可能想要：

1. 为您的应用程序添加自定义域
2. 探索对 Next.js、Astro 和其他框架的框架支持
3. 了解缓存策略以提高性能
4. 为开发和生产设置不同的环境

有关更多信息，请查阅 Deno Deploy^EA 参考文档。