使用 Vite 部署 React 應用程式

本教學課程介紹如何將 Vite Deno 和 React 應用程式部署到 Deno Deploy。

步驟 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 整合 卡片下選擇你的 Github 儲存庫。
為生產分支選擇你的分支，並在出現的彈出視窗中，選擇 Github Action
按一下確定
按一下連結
這應該會帶你到下一個頁面，你會看到一個按鈕，可以在 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/std@0.220.0/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/std@0.220.0/http/file_server.ts

使用 Vite 部署 React 應用程式

步驟 1：建立 Vite 應用程式​

步驟 2：建立儲存庫​

步驟 3：建立新的 Deno 專案​

步驟 4：將靜態網站部署到 Deno Deploy​

Github 整合​

deployctl​