Tagged

Front-end & Back-end & Programming Language

A collection of 78 posts

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

【 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:

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 Vault access policy 連結 ( Python )
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 帳號並能正常登入 已於電腦端安裝

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 Vault access policy 連結 ( Node.js )
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 帳號並能正常登入

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 RBAC 連結 ( Python )
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,本範例使用

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 RBAC 連結 ( Node.js )
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,

【 Cloud 】使用 MQTT 傳送訊息到 Azure IoT Hub 並透過 Built-in endpoint 接收訊息 ( Python )
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

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

【 Cloud 】使用 Azure Communication Service 寄送 Email ( Python )
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

【 Cloud 】使用 Azure Communication Service 寄送 Email ( JavaScript )
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

【 NLP 】使用 Discord 與 Azure OpenAI ChatGPT 建立 AI 問答機器人 ( Python )
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.

【 NLP 】使用 Discord 與 Azure OpenAI ChatGPT 建立 AI 問答機器人 ( Node.js )
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

【 NLP 】使用 Vue 與 Azure OpenAI ChatGPT 建立 AI 問答機器人
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

【 Cloud 】透過 GitHub Action 部署 React  到 Azure Static Web App 並設定 Secret
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.

【 Cloud 】透過 GitHub Action 部署 Vue  到 Azure Static Web App 並設定 Secret
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

【 Cloud 】部署 Ghost Blog App 到 Fly.io 雲端平台
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

【 Cloud 】部署 React App 到 Fly.io 雲端平台
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

【 Cloud 】部署 Vue App 到 Fly.io 雲端平台
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

【 Cloud 】部署 Node.js Express App 到 Fly.io 雲端平台
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

【 Cloud 】部署 Python Flask App 到 Fly.io 雲端平台
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

【 Container 】將 Vue 在執行階段注入環境變數並透過 Docker Hub 部署到 Azure Container App
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

【 Cloud 】透過 Azure Kubernetes Service 將 Azure IoT Hub 所接收到的數據存入 Azure Digital Twins 再透過 Azure Event Hub 將警示資訊傳送到 Azure Indoor Map
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/

【 Cloud 】將 HTML Web 透過 Azure File 部署到 Azure Kubernetes Service ( AKS )
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/

【 Cloud 】將 React 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS )
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

【 Cloud 】將 React 透過 Docker Hub 部署到 Azure Kubernetes Service ( AKS )
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:

【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure Kubernetes Service ( AKS )
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