使用 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://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
或者,您可以直接使用 deployctl
将 vite-project
部署到 Deno Deploy。
cd /dist
deployctl deploy --project=<project-name> https://land.deno.org.cn/[email protected]/http/file_server.ts