Front-end & Back-end & Programming Language

【 Cloud 】透過 GitHub Action 部署程式到 Azure App Service 之 Production 與 Slot 功能所設定的 Stage 環境 ( Node.js )

內容前置準備作業建立 Azure App Service 與設定設定 GitHub Secret 部署程式到 Azure App Service 的 Production 環境驗證 Production 環境修改 GitHub Secret 部署程式到 Azure App Service 的 Stage 環境驗證 Stage 環境 Production 與 Stage 環境進行互換前置準備作業已建立 Azure 帳號並能正常登入 https://portal.azure.com/ 已有 GitHub 帳號並已建立一個新的 Repository https:

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 Vault access policy 連結 ( Python )

內容學習目標前置準備作業建立服務所使用的名稱建立 Azure App Service 建立與設定 Azure Key Vault 設定 Azure App Service 的 Configuration 部署 Python 程式到 Azure App Service 測試與驗證學習目標如何在 Azure App Service 中的 Configuration 透過 Azure role-based access control ( Vault access policy ) 讀取 Azure Key Vault 資訊前置準備作業已建立 Azure 帳號並能正常登入已於電腦端安裝

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 Vault access policy 連結 ( Node.js )

內容學習目標前置準備作業建立服務所使用的名稱建立 Azure App Service 建立與設定 Azure Key Vault 設定 Azure App Service 的 Configuration 部署 Node.js 程式到 Azure App Service 測試與驗證學習目標如何在 Azure App Service 中的 Configuration 透過 Azure role-based access control ( Vault access policy ) 讀取 Azure Key Vault 資訊前置準備作業已建立 Azure 帳號並能正常登入

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 RBAC 連結 ( Python )

內容學習目標前置準備作業建立服務所使用的名稱建立 Azure App Service 建立與設定 Azure Key Vault 設定 Azure App Service 的 Configuration 部署 Python 程式到 Azure App Service 測試與驗證學習目標如何在 Azure App Service 中的 Configuration 透過 Azure role-based access control ( RBAC ) 讀取 Azure Key Vault 資訊前置準備作業已建立 Azure 帳號並能正常登入已於電腦端安裝 IDE，本範例使用

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 RBAC 連結 ( Node.js )

內容學習目標前置準備作業建立服務所使用的名稱建立 Azure App Service 建立與設定 Azure Key Vault 設定 Azure App Service 的 Configuration 部署 Node.js 程式到 Azure App Service 測試與驗證學習目標如何在 Azure App Service 中的 Configuration 透過 Azure role-based access control ( RBAC ) 讀取 Azure Key Vault 資訊前置準備作業已建立 Azure 帳號並能正常登入已於電腦端安裝 IDE，

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 MQTT 傳送訊息到 Azure IoT Hub 並透過 Built-in endpoint 接收訊息 ( Python )

內容前置準備作業建立與設定 Azure IoT Hub 撰寫接收與傳送訊息程式測試與驗證前置準備作業已建立 Azure 帳號並能正常登入 https://portal.azure.com/ 已於電腦端安裝 Python https://www.python.org/downloads/ 已於電腦端安裝 IDE，本範例使用 Visual Studio Code https://code.visualstudio.com/ 建立服務所使用的名稱屬性名稱 Resource group telemetry-rg Azure IoT Hub iot-hub-svc Device ID device01 建立與設定 Azure IoT Hub

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 SDK 的 MQTT 傳送訊息到 Azure IoT Hub 並透過 Built-in endpoint 接收訊息 ( Node.js )

內容前置準備作業建立與設定 Azure IoT Hub 撰寫接收與傳送訊息程式測試與驗證前置準備作業已建立 Azure 帳號並能正常登入 https://portal.azure.com/ 已於電腦端安裝 Node.js https://nodejs.org/en/download 已於電腦端安裝 IDE，本範例使用 Visual Studio Code https://code.visualstudio.com/ 建立服務所使用的名稱屬性名稱 Resource group telemetry-rg Azure IoT Hub iot-hub-svc Device ID device01 建立與設定 Azure IoT

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Azure Communication Service 寄送 Email ( Python )

內容學習目標前置準備作業建立服務所使用的名稱建立與設定 Azure Communication Service 修改程式測試與驗證學習目標如何透過 Azure Communication Service 與 Python 寄送信件。前置準備作業已建立 Azure 帳號並能正常登入 https://portal.azure.com/ 已於電腦端安裝 Python 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 建立服務所使用的名稱屬性名稱 Resource group communication-rg Communication Service communication-svc-168 Email Communication Service mail-communication-svc-168 建立與設定 Azure Communication

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Azure Communication Service 寄送 Email ( JavaScript )

內容學習目標前置準備作業建立服務所使用的名稱建立與設定 Azure Communication Service 修改程式測試與驗證學習目標如何透過 Azure Communication Service 與 JavaScript 寄送信件。前置準備作業已建立 Azure 帳號並能正常登入 https://portal.azure.com/ 已於電腦端安裝 Node.js 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 建立服務所使用的名稱屬性名稱 Resource group communication-rg Communication Service communication-svc-168 Email Communication Service mail-communication-svc-168 建立與設定 Azure

AIoT & Cloud & Edge & Machine Learning

【 NLP 】使用 Discord 與 Azure OpenAI ChatGPT 建立 AI 問答機器人 ( Python )

內容前置準備作業檔案結構建立 Azure OpenAI ChatGPT 建立 Discord 伺服器取得 Discord Bot Token API 格式修改與執行 Bot 程式測試與驗證前置準備作業已建立 Azure 帳號並能正常登入與使用 https://portal.azure.com/ 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 Python https://www.python.org/downloads/ 檔案結構 . ├── .env ├── .env-Sample ├── README.md ├── app.py ├── azure_openai.

AIoT & Cloud & Edge & Machine Learning

【 NLP 】使用 Discord 與 Azure OpenAI ChatGPT 建立 AI 問答機器人 ( Node.js )

內容前置準備作業檔案結構建立 Azure OpenAI ChatGPT 建立 Discord 伺服器取得 Discord Bot Token API 格式修改與執行 Bot 程式測試與驗證前置準備作業已建立 Azure 帳號並能正常登入與使用 https://portal.azure.com/ 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 Node.js https://nodejs.org/zh-tw/download 檔案結構 . ├── .env ├── .env-Sample ├── README.md ├── Service │ └── azureOpenAI.js

AIoT & Cloud & Edge & Machine Learning

【 NLP 】使用 Vue 與 Azure OpenAI ChatGPT 建立 AI 問答機器人

內容前置準備作業檔案結構流程建立 Azure OpenAI ChatGPT Push Vue Code 到 GitHub 並設定 Secret API 格式建立 Azure Static Web App 修改 GitHub Action 的 YAML 確認結果前置準備作業已建立 Azure 帳號並能正常登入與使用 https://portal.azure.com/ 已建立 GitHub 帳號並能正常登入與使用 https://github.com/ 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 檔案結構 ├── .github

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 GitHub Action 部署 React 到 Azure Static Web App 並設定 Secret

內容學習目標前置準備作業檔案結構建立 GitHub Repository 設定 GitHub Action Secret 連接 GitHub 與 Azure Static Web App Push React App 到 GitHub 前置準備作業已建立 Azure 帳號並能正常登入與使用 https://portal.azure.com/ 檔案結構 ├── .github │ └── workflows │ └── azure-static-web-apps-kind-bush-02b1f8f10.yml ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 GitHub Action 部署 Vue 到 Azure Static Web App 並設定 Secret

內容學習目標前置準備作業檔案結構建立 GitHub Repository 設定 GitHub Action Secret 連接 GitHub 與 Azure Static Web App Push Vue App 到 GitHub 前置準備作業已建立 Azure 帳號並能正常登入與使用 https://portal.azure.com/ 檔案結構 ├── .github │ └── workflows │ └── azure-static-web-apps-kind-bush-02b1f8f10.yml ├── README.md ├── babel.config.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】部署 Ghost Blog App 到 Fly.io 雲端平台

內容學習目標前置準備作業專案最終目錄結構部署 Ghost Blog App 到 Fly.io 學習目標如何部署 Ghost Blog App 到 Fly.io 雲端平台前置準備作業已建立 Fly.io 帳號並能正常登入 Fly.io 的網址為 https://fly.io/ 已於電腦端安裝 flyctl https://fly.io/docs/hands-on/install-flyctl/ 專案最終目錄結構 └── ghost-blog-sample └── fly.toml → 執行完 flyctl 指令後會產生部署 Ghost Blog App

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】部署 React App 到 Fly.io 雲端平台

前言因 Heroku 雲端平台將終止部分服務的免費使用額度，故轉移 App 到目前提供免費額度的 Fly.io 雲端平台。內容學習目標前置準備作業專案最終目錄結構編譯 App 撰寫 Dockerfile 檔部署 App 到 Fly.io 學習目標如何部署 React App 到 Fly.io 雲端平台前置準備作業已建立 Fly.io 帳號並能正常登入 Fly.io 的網址為 https://fly.io/ 電腦端存在可正常執行的 React App 已於電腦端安裝 IDE，本範例使用 Visual

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】部署 Vue App 到 Fly.io 雲端平台

前言因 Heroku 雲端平台將終止部分服務的免費使用額度，故轉移 App 到目前提供免費額度的 Fly.io 雲端平台。內容學習目標前置準備作業專案最終目錄結構編譯 App 撰寫 Dockerfile 檔部署 App 到 Fly.io 學習目標如何部署 Vue App 到 Fly.io 雲端平台前置準備作業已建立 Fly.io 帳號並能正常登入 Fly.io 的網址為 https://fly.io/ 電腦端存在可正常執行的 Vue App 已於電腦端安裝 IDE，本範例使用 Visual

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】部署 Node.js Express App 到 Fly.io 雲端平台

前言因 Heroku 雲端平台將終止部分服務的免費使用額度，故轉移 App 到目前提供免費額度的 Fly.io 雲端平台。內容學習目標前置準備作業專案最終目錄結構撰寫程式與設定檔部署 App 到 Fly.io 學習目標如何部署 Node.js Express App 到 Fly.io 雲端平台前置準備作業已建立 Fly.io 帳號並能正常登入 Fly.io 的網址為 https://fly.io/ 已於電腦端安裝 Node.js 已於電腦端安裝 IDE，本範例使用 Visual Studio Code

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】部署 Python Flask App 到 Fly.io 雲端平台

前言因 Heroku 雲端平台將終止部分服務的免費使用額度，故轉移 App 到目前提供免費額度的 Fly.io 雲端平台。內容學習目標前置準備作業專案最終目錄結構撰寫程式與設定檔部署 App 到 Fly.io 學習目標如何部署 Python Flask App 到 Fly.io 雲端平台前置準備作業已建立 Fly.io 帳號並能正常登入 Fly.io 的網址為 https://fly.io/ 已於電腦端安裝 Python 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 flyctl

AIoT & Cloud & Edge & Machine Learning

【 Container 】將 Vue 在執行階段注入環境變數並透過 Docker Hub 部署到 Azure Container App

內容學習目標前置準備作業專案目錄結構建立 Vue 建立 .env 建立 nginx.conf 建立 entrypoint.sh 建立 Dockerfile 建立 Docker Image 於本地端執行 Docker Image 測試與驗證一上傳 Docker Image 到 Docker Hub 建立與部署 Azure Container App 測試與驗證二修改 env 測試與驗證三學習目標如何將 Vue 在執行階段注入環境變數並透過 Docker Hub 部署到 Azure Container App 前置準備作業已建立 Azure

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 Azure Kubernetes Service 將 Azure IoT Hub 所接收到的數據存入 Azure Digital Twins 再透過 Azure Event Hub 將警示資訊傳送到 Azure Indoor Map

學習目標如何透過 Azure Kubernetes Service 將 Azure IoT Hub 所接收到的數據存入 Azure Digital Twins 再透過 Azure Event Hub 將警示資訊傳送到 Azure Indoor Map。前置準備作業已建立 Azure 帳號並能正常登入與使用。已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 Node.js 已於電腦端安裝 Docker Engine https://docs.docker.com/engine/install/ 已於電腦端安裝 Azure CLI https://docs.microsoft.com/

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 HTML Web 透過 Azure File 部署到 Azure Kubernetes Service ( AKS )

內容學習目標前置準備作業專案目錄結構建立與設定 Azure Kubernetes Service 測試與驗證刪除所建立的資源與服務學習目標如何將 HTML Web 透過 Azure File 部署到 Azure Kubernetes Service 前置準備作業已建立 Azure 帳號並能正常登入已於電腦端存在可正常執行的 HTML 專案已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 AZ Cli https://docs.microsoft.com/zh-tw/cli/azure/install-azure-cli 已於電腦端安裝 kubectl https://kubernetes.io/

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 React 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS )

內容學習目標前置準備作業專案目錄結構建立 React 專案的 Docker Image 並部署到 Azure Container Registry 建立 Azure Kubernetes Service 部署 React 到 AKS 測試與驗證刪除所建立的資源與服務學習目標如何將 React 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS ) 前置準備作業已建立 Azure 帳號並能正常登入已於電腦端存在可正常執行的 React 專案已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 Docker

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 React 透過 Docker Hub 部署到 Azure Kubernetes Service ( AKS )

內容學習目標前置準備作業專案目錄結構建立 React 專案的 Docker Image 並部署到 Docker Hub 建立與設定 Azure Kubernetes Service 部署 React 到 AKS 測試與驗證刪除所建立的資源與服務學習目標如何將 React 透過 Docker Hub 部署到 Azure Kubernetes Service ( AKS ) 前置準備作業已建立 Azure 帳號並能正常登入已於電腦端存在可正常執行的 Vue 專案已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 Docker Engine https:

AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS )

內容學習目標前置準備作業專案目錄結構建立 Vue 專案的 Docker Image 並部署到 Azure Container Registry 建立 Azure Kubernetes Service 部署 Vue 到 AKS 測試與驗證刪除所建立的資源與服務學習目標如何將 Vue 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS ) 前置準備作業已建立 Azure 帳號並能正常登入已於電腦端存在可正常執行的 Vue 專案已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 Docker