使用 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 模式。

导航到<project-name> 设置页面，并在Git integration 卡下选择您的 Github 仓库。
选择您的生产分支，并在弹出的窗口中选择Github Action
点击Ok
点击Link
这将带您到下一页，您将看到一个按钮，可以在 Github 编辑器中打开deploy.yml 文件。从 Github 编辑器中，您可以编辑并提交建议的工作流文件到.github/workflows/deploy.yml
修改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://deno.land/[email protected]/http/file_server.ts
        root: dist
```
在这个例子中，有两个构建步骤
- 设置 Deno
- 运行 deno task build
您还需要将入口文件设置为 https://deno.land/std@$STD_VERSION/http/file_server.ts，并将根目录设置为 /dist。

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

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

`deployctl`

或者，您可以直接使用 deployctl 将 vite-project 部署到 Deno Deploy。

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

使用 Vite 部署 React 应用程序

步骤 1：创建 Vite 应用程序​

步骤 2： 构建仓库​

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

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

Github 集成​

deployctl​