LearningSky.io

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

Archer -

內容

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

學習目標

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

前置準備作業

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

程式與軟體

在 Heroku 部署 Redis

Step 1. 登入到 Heroku

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
List of blogs