跳至主要内容

使用 Vite 部署 React 应用程序

本教程介绍如何在 Deno Deploy 上部署 Vite Deno 和 React 应用程序。

步骤 1:创建 Vite 应用程序

让我们使用 Vite 快速搭建一个 Deno 和 React 应用程序

deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest

我们将项目命名为vite-project。请确保在项目配置中选择deno-react

然后,cd进入新创建的项目文件夹。

步骤 2: 构建仓库

deno task build

步骤 3: 创建一个新的 Deno 项目

导航到 https://dash.deno.com/new 并点击+Empty Project 按钮,位于Deploy from command line 下。

在下一页,获取项目名称,在本例中为late-goose-47

步骤 4: 将静态网站部署到 Deno Deploy

您可以通过几种方式将 Vite 网站部署到 Deno Deploy。

Github 集成

第一种方式是通过 Github 集成。

请记住,Github 集成有两种模式

  • 自动:每次您推送并部署代码和资产时,Deno Deploy 会自动从您的仓库源中拉取代码和资产。这种模式非常快,但不能进行构建步骤。
  • GitHub Actions:在这种模式下,您将代码和资产从 GitHub Actions 工作流程推送到 Deno Deploy。这允许您在部署之前执行构建步骤。

由于这里有一个构建步骤,您需要使用 Github Actions 模式。

  1. 导航到<project-name> 设置页面,并在Git integration 卡下选择您的 Github 仓库。

  2. 选择您的生产分支,并在弹出的窗口中选择Github Action

  3. 点击Ok

  4. 点击Link

  5. 这将带您到下一页,您将看到一个按钮,可以在 Github 编辑器中打开deploy.yml 文件。从 Github 编辑器中,您可以编辑并提交建议的工作流文件到.github/workflows/deploy.yml

  6. 修改deploy.yml 文件,使其看起来像这样

    name: Deploy
    on: [push]

    jobs:
    deploy:
    name: Deploy
    runs-on: ubuntu-latest
    permissions:
    id-token: write # Needed for auth with Deno Deploy
    contents: read # Needed to clone the repository

    steps:
    - name: Clone repository
    uses: actions/checkout@v3

    - name: Install Deno
    uses: denoland/setup-deno@v1

    - name: Build
    run: deno task build

    - name: Deploy to Deno Deploy
    uses: denoland/deployctl@v1
    with:
    project: "<project-name>"
    entrypoint: https://land.deno.org.cn/[email protected]/http/file_server.ts
    root: dist

    在这个例子中,有两个构建步骤

    • 设置 Deno
    • 运行 deno task build

    您还需要将入口文件设置为 https://land.deno.org.cn/std@$STD_VERSION/http/file_server.ts,并将根目录设置为 /dist

    请注意,这不是 Vite 仓库本身中存在的文件。相反,它是一个外部程序。运行时,该程序会将您当前仓库(vite-project/dist)中的所有静态资产文件上传到 Deno Deploy。然后,当您导航到部署 URL 时,它会提供本地目录。

    一旦 deploy.yml 文件被推送到您的 Github 仓库,每次代码被推送到 Github 仓库时,它也会被推送到 Deno Deploy,并且会首先运行构建步骤。

deployctl

或者,您可以直接使用 deployctlvite-project 部署到 Deno Deploy。

cd /dist
deployctl deploy --project=<project-name> https://land.deno.org.cn/[email protected]/http/file_server.ts