【 Node.js 】透過 express 設定與取得 Heroku Redis 數據

內容

• 學習目標
• 前置準備作業
• 程式與軟體
• 在 Heroku 部署 Redis
• 透過 Node.js 的 Express 來設定與取得 Redis 數據
• Push 程式到 GitHub
• 透過 GitHub 部署程式到 Heroku
• 透過 Postman 測試

---

學習目標

• 在 Heroku 部署 Redis
• 透過 Node.js 的 Express 來設定與取得 Redis 數據

---

前置準備作業

• 註冊 Heroku 帳號並綁定信用卡

---

程式與軟體

• Node.js
• npm（ Node Package Manager )
• Visual Studio Code
• Git

---

在 Heroku 部署 Redis

Step 1. 登入到 Heroku

• https://id.heroku.com/login

---

Step 2. 建立 App

• 點選右上角的 New ➙ Create new app

• App name 欄位
  • 請輸入唯一識別的名稱，本範例取名為 demo-redis-express

• 點選 Create app

• 建立完成畫面

---

Step 3. 安裝 Redis

• 點選 Resources 頁籤

• Add-ons 輸入 redis

• 選擇 Heroku Redis

• 點選 Provision

• 安裝完成畫面

---

透過 Node.js 的 Express 來設定與取得 Redis 數據

Step 1. 初始化專案

• 開啟 Visual Studio Code

• 點選 Add workspace folder...

• 點選 新增資料夾

• 為專案取一個獨一無二的名稱並選擇放置路徑
  • 本專案設定放於桌面的 project 資料夾，並將專案命名為 demo-redis

• 點選右下角的 Add

• 建立完成畫面

• 開啟 Visual Studio Code 中的 終端機

  • 點選 Terminal ➙ New Terminal

    

  • 開啟 Terminal 後的畫面 ( Terminal 位於下方紅色區域 )

    

• Node.js 環境初始化

  • 在 Terminal 輸入下方指令

    npm init -y 

    

  • 執行完成畫面

    

• 安裝所需套件

  • 在 Terminal 輸入下方指令

    npm i dotenv express redis 

    

  • 執行完成畫面

    

  • package.json 也能看到相關資訊

    

---

Step 2. 建立 Redis 相關程式

• app.js

  • 建立檔案或目錄

    • 在專案根目錄建立 app.js 檔案

  • 程式如下

    

• index.js

  • 建立檔案或目錄

    • 在專案根目錄建立 routes 資料夾裡面再建立 index.js 檔案

  • 程式如下

    

  • 程式說明

    • 第 4 行 : 設定 Method 為 Get 的 /redis 路由
    • 第 5 行 : 設定 Method 為 Post 的 /redis 路由

• redisController.js

  • 建立檔案或目錄

    • 在專案根目錄建立 controllers 資料夾裡面再建立 redisController.js 檔案

      

  • 程式說明

    • 第 11 行 : 從 Query String 中取出名為 key 的值
    • 第 19 行 : 從 Request Header 中取名為 key 的值
    • 第 20 行 : 從 Request Header 中取名為value 的值
    • 第 24 行 : 設定數值存活時間為 300 秒

---

Step 3. 建立 .gitignore 檔案

• 在專案根目錄建立 .gitignore 檔案

• 程式如下

  

---

Step 4. 建立部署相關檔案

• 在專案根目錄建立 Procfile 檔案

• 程式如下

  

---

Push 程式到 GitHub

Step 1. 登入 GitHub

• 網址為 https://github.com/

  

• 登入成功畫面

  

---

Step 2. 在 GitHub 建立 Repository

• 點選上方 Repositories

  

• 點選右方 New

  

• Repository name 欄位輸入一個獨一無二的名稱

  • 本範例使用 demo-redis 當 Repository 的名稱

    

    

• 點選下方 Create repository

  

• 建立完成畫面

  

---

Step 3. Push 程式到 GitHub

• 在 Visual Studio Code 的 Terminal

  • Git 初始化

    git init 

    

  • 把檔案與目錄加至暫存區

    git add . 

    

  • 提交檔案到版本庫

    git commit -m "init demo-redis" 

    

  • 將本地與遠端儲存庫建立連結

    • 此指令請參考下圖紅色框框處

      

    • 本範例指令

    git remote add origin https://github.com/ArcherHuang/demo-redis.git 

    

  • 上傳到 GitHub

    git push -u origin master 

    

  • GitHub 可看到所上傳的程式

    

---

透過 GitHub 部署程式到 Heroku

Step 1. 到 Heroku 頁面

---

Step 2. 部署程式到 Heroku

• 點選 Deploy 頁籤

  

• 設定 Deployment method

  • 點選 GitHub

  

• 點選 Connect to GitHub

  

• Search for a repository to connect to 欄位輸入剛才 GitHub 所建立的 Repository

  • 本範的 Repository 名稱為 demo-redis

    

    

    • 點選 Search

      

    • 點選 Connect

      

• 使用 Manual deploy 部署程式

  • 點選 Deploy Branch

    

  • 部署過程

    

  • 部署完成

    

---

透過 Postman 測試

Step 1. 在 Chrome 安裝 Postman

• 連結為 https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=zh-TW

  

---

Step 2. 開啟 Postman

• Chrome ➙ 應用程式

  

• 開啟畫面

  

---

Step 3. 透過 express 建立 Redis 資料

• Request URL

  • [Server-URL]redis

    • 本範例為 https://demo-redis-express.herokuapp.com/redis

    • 上方的 [Server-URL] 請點選下方圖示紅色處滑鼠右鍵取得 複製連結網址 取得

      

• Method

  • POST

• Header

  • key: name

  • value: Archer

    

• 點選 Send

  

• 執行完成畫面

  

---

Step 4. 透過 express 取得 Redis 資料

• Request URL

  • [Server-URL]redis?key=name

    • 本範例為 https://demo-redis-express.herokuapp.com/redis?key=name

    • 上方的 [Server-URL] 請點選下方圖示紅色處滑鼠右鍵取得 複製連結網址 取得

      

• Method

  • GET

  

• 點選 Send

  

• 執行完成畫面 ( 在所設定的數據存活時間 300 秒之內 )

  • 可取得數據

  

• 執行完成畫面 ( 在所設定的數據存活時間 300 秒之外 )

  • 會無法取得數據

    

---

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/