Tagged

Front-end & Back-end & Programming Language

A collection of 78 posts

【 Cloud 】將 Vue 透過 Docker Hub 部署到 Azure Kubernetes Service ( AKS )
AIoT & Cloud & Edge & Machine Learning

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

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

【 Cloud 】將 Python Flask 透過 Azure Container Registry 部署到 Azure App Service
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Python Flask 透過 Azure Container Registry 部署到 Azure App Service

內容 學習目標 前置準備作業 範例程式 建立 Azure Container Registry 建立 Python Flask 版 Docker Image 上傳 Docker Image 到 Azure Container Registry 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service 測試與驗證 學習目標 如何將 Python Flask 透過 Azure Container Registry 部署到 Azure App Service 前置準備作業 已建立 Azure 帳號並能正常登入 已存在可正常執行的

【 Cloud 】將 Node.js Express 透過 Azure Container Registry 部署到 Azure App Service
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Node.js Express 透過 Azure Container Registry 部署到 Azure App Service

內容 學習目標 前置準備作業 範例程式 建立 Azure Container Registry 建立 Node.js Express 版 Docker Image 上傳 Docker Image 到 Azure Container Registry 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service 測試與驗證 學習目標 如何將 Node.js Express 透過 Azure Container Registry 部署到 Azure App Service 前置準備作業 已建立 Azure

【 Cloud 】將 React 透過 Azure Container Registry 部署到 Azure App Service
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 React 透過 Azure Container Registry 部署到 Azure App Service

內容 學習目標 前置準備作業 建立 Azure Container Registry 建立 React 版 Docker Image 上傳 Docker Image 到 Azure Container Registry 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service 測試與驗證 學習目標 如何將 React 透過 Azure Container Registry 部署到 Azure App Service 前置準備作業 已建立 Azure 帳號並能正常登入 已存在可正常執行的 React 專案 已於電腦端安裝

【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure App Service
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure App Service

內容 學習目標 前置準備作業 建立 Azure Container Registry 建立 Vue 版 Docker Image 上傳 Docker Image 到 Azure Container Registry 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service 測試與驗證 學習目標 如何將 Vue 透過 Azure Container Registry 部署到 Azure App Service 前置準備作業 已建立 Azure 帳號並能正常登入 已存在可正常執行的 Vue 專案 已於電腦端安裝

【 Tool 】透過 Docker 建立 React 開發環境
Tools & Solutions & Cybersecurity

【 Tool 】透過 Docker 建立 React 開發環境

內容 學習目標 前置準備作業 建置開發環境 測試與驗證 學習目標 如何透過 Docker 建立 React 開發環境 前置準備作業 本地端電腦已安裝 Docker 與 Docker Compose 建置開發環境 Step 1. 下載 Node.js 版的 Docker Image 請在終端機輸入下方指令 docker pull node:14.18-alpine3.15 請在終端機輸入下方指令以確認所下載的 Docker Image docker images Step 2. 建立 Dockerfile 與 app 資料夾 請在專案目錄建立名為 Dockerfile 的檔案並輸入下方資訊 在 Dockerfile

【 Tool 】透過 Docker 建立 Vue 開發環境
Tools & Solutions & Cybersecurity

【 Tool 】透過 Docker 建立 Vue 開發環境

內容 學習目標 前置準備作業 建置開發環境 測試與驗證 學習目標 如何在本地端電腦透過 Docker 建立 Vue 開發環境 前置準備作業 本地端電腦已安裝 Docker 建置開發環境 Step 1. 下載 Node.js 版的 Docker Image 請在終端機輸入下方指令 docker pull node:14.18.2-buster 請在終端機輸入下方指令以確認所下載的 Docker Image docker images Step 2. 建立 Dockerfile 與 src 資料夾 請在專案目錄建立名為 Dockerfile 的檔案並輸入下方資訊 在 Dockerfile 所有位置建立名為 src 的資料夾

【 Cloud 】透過 ngrok 接收 Azure Blob Web Hook 觸發事件
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 ngrok 接收 Azure Blob Web Hook 觸發事件

學習目標 如何在本地端電腦透過 ngrok 接收 Azure Blob Web Hook 觸發事件 前置準備作業 已建立 Azure 帳號並能正常登入與使用 已於電腦端安裝 Node.js 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 撰寫接收 Azure Blob 觸發事件程式 Step 1. 初始化專案 請在終端機輸入下方指令 npm init -y Step 2. 安裝套件 請在終端機輸入下方指令 npm i express body-parser Step 3. 撰寫程式 請建立名為 index.js 的檔案並輸入下方程式 Step 4.

【 Cloud 】將 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid  將警示資訊顯示於 Azure Indoor Map ( Node.js 版 )
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid 將警示資訊顯示於 Azure Indoor Map ( Node.js 版 )

學習目標 如何透過 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid 將警示資訊顯示於 Azure Indoor Map 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 已於電腦端安裝 Node.js 流程 建立 Azure Maps Accounts Service 透過 Creator 建立 Azure Indoor Map 建立 Feature State 透過 Azure

【 Cloud 】透過 Azure Event Hub 與 Azure Function 將 Azure Digital Twins 更新資訊顯示於 Time Series Insights - 使用 Azure CLI 與 Portal
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 Azure Event Hub 與 Azure Function 將 Azure Digital Twins 更新資訊顯示於 Time Series Insights - 使用 Azure CLI 與 Portal

內容 學習目標 前置準備作業 流程 建立與設定 Twin Hub 設定 Azure Digital Twin 的 Endpoint 與 Event route 建立與設定 TSI Hub 建立讀取 Twin Hub 資訊與傳送資訊到 TSI Hub 的 Azure Functions 設定身分識別 建立與設定 Time Series Insights 執行與驗證 學習目標 如何使用 Azure CLI 與 Portal 並透過 Azure Event Hub 與 Azure Function 將 Azure Digital

【 Cloud 】透過 Azure Event Hub 與 Azure Function 將 Azure Digital Twins 更新資訊顯示於 Time Series Insights - 使用 Azure Portal
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 Azure Event Hub 與 Azure Function 將 Azure Digital Twins 更新資訊顯示於 Time Series Insights - 使用 Azure Portal

內容 學習目標 前置準備作業 流程 建立與設定 Twin Event Hub 設定 Azure Digital Twin 的 Endpoint 與 Event route 建立與設定 TSI Event Hub 建立讀取 Twin Hub 資訊與傳送資訊到 TSI Hub 的 Azure Functions 設定身分識別 建立與設定 Time Series Insights 執行與驗證 學習目標 如何使用 Azure Portal 並透過 Azure Event Hub 與 Azure Function 將 Azure Digital

【 Cloud 】使用 Node.js 透過 Azure Event Hub 傳送與接收訊息 - Consumer & Producer
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Node.js 透過 Azure Event Hub 傳送與接收訊息 - Consumer & Producer

內容 學習目標 前置準備作業 流程 建立與設定 Azure Event Hub 撰寫 Consumer Client 程式 撰寫 Producer Client 程式 測試驗證 學習目標 如何使用 Node.js 透過 Azure Event Hub 傳送與接收訊息 前置準備作業 已建立 Azure 帳號並能正常登入 已於電腦端安裝 Node.js 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 流程 建立與設定 Azure Event Hub 取得 Event Hub 名稱 取得 Consumer

【 Cloud 】將 Vue 部署到 GitHub Pages
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Vue 部署到 GitHub Pages

內容 學習目標 前置準備作業 流程 部署 Vue App 到 GitHub 設定 GitHub Pages 驗證部署結果 學習目標 如何將 Vue 部署到 GitHub Pages 前置準備作業 已建立 GitHub 帳號並能正常登入 一個在本地端電腦可執行的 Vue App 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 流程 在本地端電腦建立 hello-vue-app 的 Vue 專案並設定 Config 專案打包 將打包完的專案 Commit 到 GitHub 上所建立名為 hello-vue-app 的 Repository 設定 GitHub

【 Cloud 】部署 React 到 Azure App Service
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】部署 React 到 Azure App Service

內容 學習目標 前置準備作業 建立 Azure App Service 部署 React App 到 Azure App Service 學習目標 如何建立 Azure App Service 如何透過 Visual Studio Code 部署 React 專案 到 Azure App Service 前置準備作業 已建立 Azure 帳號並能正常登入 一個在本地端電腦可執行的 React App 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 建立 Azure App Service Step 1. 登入到

【 Cloud 】將 Azure IoT Plug and Play 裝置的量測數據透過 Azure IoT Hub 與 Azure Function ( Node.js ) 傳送到 Azure Digital Twins
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Azure IoT Plug and Play 裝置的量測數據透過 Azure IoT Hub 與 Azure Function ( Node.js ) 傳送到 Azure Digital Twins

內容 學習目標 前置準備作業 流程 上傳 DTDL 到 Azure Digital Twins 並建立 Twins 建立 Azure IoT Hub 建立 Azure Functions 設定身分識別 撰寫傳送 Node.js 程式 執行與驗證 學習目標 如何將 Azure IoT Plug and Play 裝置的量測數據透過 Azure IoT Hub 與 Azure Function ( Node.js ) 傳送到 Azure Digital Twins 前置準備作業 已建立 Azure 帳號並能正常登入與使用 已於完成建立與設定

【 Cloud 】將 Node.js Express 部署到 Azure App Service 以取得 Azure Digital Twins Token
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Node.js Express 部署到 Azure App Service 以取得 Azure Digital Twins Token

內容 學習目標 前置準備作業 建立 Azure App Service 設定身分識別 撰寫取得 Token 的程式 部署程式到 Azure App Service 透過 Postman 取得 Token 透過 Postman 操作 Azure Digital Twins 學習目標 如何將 Node.js Express 部署到 Azure App Service 以取得 Azure Digital Twins Token 前置準備作業 已建立 Azure 帳號並能正常登入 已於完成建立與設定 Azure Digital Twins、Azure Active Directory

【 Cloud 】使用 Node.js 透過 Azure Functions 取得 Azure Digital Twins Token
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Node.js 透過 Azure Functions 取得 Azure Digital Twins Token

內容 學習目標 前置準備作業 建立 Azure Functions 設定身分識別 透過 Postman 取得 Token 透過 Postman 操作 Azure Digital Twins 學習目標 如何使用 Node.js 透過 Azure Functions 取得 Azure Digital Twins Token 前置準備作業 已建立 Azure 帳號並能正常登入 已於完成建立與設定 Azure Digital Twins、Azure Active Directory ( Azure AD ) Ref https://learningsky.io/azure-digital-twins-authenticates-using-azure-ad-security-tokens-based-on-oauth/ 建立 Azure Functions

【 Cloud 】透過 Node.js 使用 Azure Function 將遙測資料從 Azure IoT Hub 儲存到 PostgreSQL 資料庫
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 Node.js 使用 Azure Function 將遙測資料從 Azure IoT Hub 儲存到 PostgreSQL 資料庫

內容 學習目標 前置準備作業 於 PostgreSQL 中新增資料庫 (DB) 與資料表 (Table) 建立 Azure IoT Hub 建立 Azure Functions 撰寫傳送 Node.js 程式 執行與驗證 學習目標 如何透過 Node.js 使用 Azure Function 將遙測資料從 Azure IoT Hub 儲存到 PostgreSQL 資料庫 前置準備作業 已建立 Azure 帳號並能正常登入 已於電腦端安裝 Node.js 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 於 PostgreSQL

【 Cloud 】使用 Node.js 透過 Azure IoT Hub 與 Build-in Event Hub 傳送與接收訊息
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Node.js 透過 Azure IoT Hub 與 Build-in Event Hub 傳送與接收訊息

內容 學習目標 前置準備作業 建立 Azure IoT Hub 撰寫接收 Node.js 程式 撰寫傳送 Node.js 程式 執行與驗證 學習目標 如何使用 Node.js 透過 Azure IoT Hub 與 Build-in Event Hub 傳送與接收訊息 前置準備作業 已建立 Azure 帳號並能正常登入 已於電腦端安裝 Node.js 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 建立 Azure IoT Hub Step 1. 在上方搜尋框輸入 iot

【 Cloud 】使用 Node.js 透過 Azure IoT Hub 傳送與接收訊息
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Node.js 透過 Azure IoT Hub 傳送與接收訊息

內容 學習目標 前置準備作業 建立 Azure IoT Hub 撰寫接收 Node.js 程式 撰寫傳送 Node.js 程式 執行與驗證 學習目標 如何使用 Node.js 透過 Azure IoT Hub 傳送與接收訊息 前置準備作業 已建立 Azure 帳號並能正常登入 已於電腦端安裝 Node.js 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 建立 Azure IoT Hub Step 1. 在上方搜尋框輸入 iot hub 關鍵字並點選 IoT Hub

【 Cloud 】使用 Node.js 透過 Azure Functions 與  Azure Web PubSub Service 建立即時通訊 Web
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Node.js 透過 Azure Functions 與 Azure Web PubSub Service 建立即時通訊 Web

內容 學習目標 前置準備作業 建立 Azure Web PubSub Service 建立 Azure Functions 撰寫 Node.js 版傳送與接收程式 撰寫 Web 程式 執行 Web 程式 Node.js 傳送與 Web 接收測試 學習目標 如何使用 Node.js 透過 Azure Functions 與 Azure Web PubSub Service 建立即時通訊 Web。 前置準備作業 已建立 Azure 帳號並能正常登入 本地端電腦已安裝瀏覽器 已於電腦端安裝 Node.js 已於電腦端安裝 IDE,

【 Cloud 】使用 Node.js 透過 Azure Functions 與 Azure SignalR 建立即時通訊 Web
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Node.js 透過 Azure Functions 與 Azure SignalR 建立即時通訊 Web

內容 學習目標 前置準備作業 建立 Azure SignalR Service 建立 Azure Functions 撰寫 Web 程式 執行 Web 程式 透過 Postman 測試 學習目標 如何使用 Node.js 透過 Azure Functions 與 Azure SignalR 建立即時通訊 Web。 前置準備作業 已建立 Azure 帳號並能正常登入 本地端電腦已安裝瀏覽器 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 建立 Azure SignalR Service Step 1. 在上方搜尋框輸入 signalr

【 Cloud 】透過 Node.js 刪除 Azure Maps Creator 中已建立的 Conversions
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 Node.js 刪除 Azure Maps Creator 中已建立的 Conversions

內容 學習目標 前置準備作業 取得所有已建立的 Conversion 並進行刪除 學習目標 如何透過 Node.js 刪除 Azure Maps Creator 中所有已建立的 Conversions。 前置準備作業 已建立 Azure 帳號並能正常登入 已建立 Azure Maps Creator。 已於電腦端安裝 Node.js 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 取得所有已建立的 Conversion 並進行刪除 Step 1. 安裝 axios 套件 請於終端機輸入下方指令npm i axios Step 2. 撰寫 Node.js 程式

【 Cloud 】透過 Node.js 刪除 Azure Maps Creator 中已建立的 Statesets
AIoT & Cloud & Edge & Machine Learning

【 Cloud 】透過 Node.js 刪除 Azure Maps Creator 中已建立的 Statesets

內容 學習目標 前置準備作業 取得所有已建立的 Stateset 並進行刪除 學習目標 如何透過 Node.js 刪除 Azure Maps Creator 中所有已建立的 Stateset。 前置準備作業 已建立 Azure 帳號並能正常登入 已建立 Azure Maps Creator。 已於電腦端安裝 Node.js 已於電腦端安裝 IDE,本範例使用 Visual Studio Code 取得所有已建立的 Stateset 並進行刪除 Step 1. 安裝 axios 套件 請於終端機輸入下方指令npm i axios Step 2. 撰寫 Node.js 程式