You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
IoT-For-Beginners/translations/hk/quiz-app/README.md

4.3 KiB

測驗

這些測驗是 IoT 初學者課程的課前和課後測驗,課程網址:https://aka.ms/iot-beginners

專案設定

npm install

編譯並熱重載以進行開發

npm run serve

編譯並壓縮以進行生產環境

npm run build

檢查並修復檔案

npm run lint

自訂配置

請參閱 配置參考

致謝:感謝此測驗應用程式的原始版本:https://github.com/arpan45/simple-quiz-vue

部署到 Azure

以下是逐步指南,幫助你開始:

  1. Fork GitHub 儲存庫
    確保你的靜態網頁應用程式代碼在 GitHub 儲存庫中。Fork 此儲存庫。

  2. 建立 Azure 靜態網頁應用程式

  1. 配置靜態網頁應用程式
  • 基本設定:

    • 訂閱:選擇你的 Azure 訂閱。
    • 資源群組:建立新的資源群組或使用現有的資源群組。
    • 名稱:為你的靜態網頁應用程式提供一個名稱。
    • 地區:選擇最接近使用者的地區。
  • 部署詳細資訊:

    • 原始碼來源選擇「GitHub」。
    • GitHub 帳戶:授權 Azure 訪問你的 GitHub 帳戶。
    • 組織:選擇你的 GitHub 組織。
    • 儲存庫:選擇包含靜態網頁應用程式的儲存庫。
    • 分支:選擇你要部署的分支。
  • 建置詳細資訊:

    • 建置預設:選擇你的應用程式所使用的框架(例如 React、Angular、Vue 等)。
    • 應用程式位置:指定包含應用程式代碼的資料夾(例如,如果在根目錄,則填寫 /)。
    • API 位置:如果有 API請指定其位置可選
    • 輸出位置:指定建置輸出的資料夾(例如 build 或 dist
  1. 檢查並建立
    檢查你的設定然後點擊「建立」。Azure 會設置必要的資源並在你的儲存庫中建立 GitHub Actions 工作流程。

  2. GitHub Actions 工作流程
    Azure 會自動在你的儲存庫中建立 GitHub Actions 工作流程檔案(.github/workflows/azure-static-web-apps-.yml。此工作流程將處理建置和部署過程。

  3. 監控部署
    前往 GitHub 儲存庫中的「Actions」標籤。
    你應該會看到一個工作流程正在運行。此工作流程將建置並部署你的靜態網頁應用程式到 Azure。
    工作流程完成後,你的應用程式將在提供的 Azure URL 上線。

範例工作流程檔案

以下是 GitHub Actions 工作流程檔案的範例:
name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "quiz-app" #App source code path
          api_location: ""API source code path optional
          output_location: "dist" #Built app content directory - optional

其他資源


免責聲明
本文件已使用人工智能翻譯服務 Co-op Translator 進行翻譯。儘管我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為具權威性的來源。對於重要資訊,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。