/ Node.js

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

內容

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

學習目標

  • Heroku 部署 Redis
  • 透過 Node.jsExpress 來設定與取得 Redis 數據

前置準備作業

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

程式與軟體


Heroku 部署 Redis

Step 1. 登入到 Heroku

-----2019-08-30---10.20.44


Step 2. 建立 App

  • 點選右上角的 NewCreate new app

-----2019-08-30---10.27.58

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

-----2019-08-30---10.29.40

-----2019-08-30---10.29.51

  • 點選 Create app

-----2019-08-30---10.29.51---

  • 建立完成畫面

-----2019-08-30---10.36.05


Step 3. 安裝 Redis

  • 點選 Resources 頁籤

-----2019-08-30---10.36.05---

  • Add-ons 輸入 redis

-----2019-08-30---10.37.08

  • 選擇 Heroku Redis

-----2019-08-30---10.40.26

  • 點選 Provision

-----2019-08-30---10.42.10

  • 安裝完成畫面

-----2019-08-30---10.43.36


透過 Node.jsExpress 來設定與取得 Redis 數據

Step 1. 初始化專案

  • 開啟 Visual Studio Code

-----2019-08-30---10.52.29

  • 點選 Add workspace folder...

-----2019-08-30---10.52.29---

  • 點選 新增資料夾

-----2019-08-30---10.54.54

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

-----2019-08-30---10.56.22

-----2019-08-30---11.14.18

  • 點選右下角的 Add

-----2019-08-30---11.15.22

  • 建立完成畫面

-----2019-08-30---11.16.25

  • 開啟 Visual Studio Code 中的 終端機

    • 點選 TerminalNew Terminal

      -----2019-08-30---11.16.57

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

      -----2019-08-30---11.17.33

  • Node.js 環境初始化

    • Terminal 輸入下方指令

      npm init -y
      

      -----2019-08-30---11.18.35

    • 執行完成畫面

      -----2019-08-30---11.19.03

  • 安裝所需套件

    • Terminal 輸入下方指令

      npm i dotenv express redis
      

      -----2019-08-30---11.19.39

    • 執行完成畫面

      -----2019-08-30---11.20.22

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

      -----2019-08-30---11.21.40


Step 2. 建立 Redis 相關程式

  • app.js

    • 建立檔案或目錄

      • 在專案根目錄建立 app.js 檔案
    • 程式如下

      -----2019-08-30---11.30.31

  • index.js

    • 建立檔案或目錄

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

      -----2019-08-30---11.36.49

    • 程式說明

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

    • 建立檔案或目錄

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

        -----2019-08-30---11.37.59

    • 程式說明

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

Step 3. 建立 .gitignore 檔案

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

  • 程式如下

    -----2019-08-30---11.41.18


Step 4. 建立部署相關檔案

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

  • 程式如下

    -----2019-08-30---11.42.48


Push 程式到 GitHub

Step 1. 登入 GitHub

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

    -----2019-08-30---1.02.09

  • 登入成功畫面

    -----2019-08-30---1.03.26


Step 2. 在 GitHub 建立 Repository

  • 點選上方 Repositories

    -----2019-08-30---1.03.26---

  • 點選右方 New

    -----2019-08-30---1.06.23

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

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

      -----2019-08-30---1.07.43

      -----2019-08-30---1.10.16

  • 點選下方 Create repository

    -----2019-08-30---1.10.16---

  • 建立完成畫面

    -----2019-08-30---1.11.58


Step 3. Push 程式到 GitHub

  • Visual Studio CodeTerminal
    • Git 初始化

      git init
      

      -----2019-08-30---1.29.06

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

      git add .
      

      -----2019-08-30---1.33.46

    • 提交檔案到版本庫

      git commit -m "init demo-redis"
      

      -----2019-08-30---1.35.31

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

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

        -----2019-08-30---1.38.16

      • 本範例指令

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

      -----2019-08-30---1.39.35

    • 上傳到 GitHub

      git push -u origin master
      

      -----2019-08-30---1.40.48

    • GitHub 可看到所上傳的程式

      -----2019-08-30---1.41.08


透過 GitHub 部署程式到 Heroku

Step 1. 到 Heroku 頁面

-----2019-08-30---1.42.25


Step 2. 部署程式到 Heroku

  • 點選 Deploy 頁籤

    -----2019-08-30---1.42.25---

  • 設定 Deployment method

    • 點選 GitHub

    -----2019-08-30---1.44.56

  • 點選 Connect to GitHub

    -----2019-08-30---1.46.31

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

    • 本範的 Repository 名稱為 demo-redis

      -----2019-08-30---1.49.14

      -----2019-08-30---1.50.02

      • 點選 Search

        -----2019-08-30---1.50.02---

      • 點選 Connect

        -----2019-08-30---1.51.52

  • 使用 Manual deploy 部署程式

    • 點選 Deploy Branch

      -----2019-08-30---1.53.07

    • 部署過程

      -----2019-08-30---1.54.39

    • 部署完成

      -----2019-08-30---1.55.36


透過 Postman 測試

Step 1. 在 Chrome 安裝 Postman

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

    -----2019-08-30---1.57.32


Step 2. 開啟 Postman

  • Chrome應用程式

    -----2019-08-30---2.00.11

  • 開啟畫面

    -----2019-08-30---2.03.05


Step 3. 透過 express 建立 Redis 資料

  • Request URL

    • [Server-URL]redis
      • 本範例為 https://demo-redis-express.herokuapp.com/redis

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

        -----2019-08-30---1.58.51

  • Method

    • POST
  • Header

    • key: name

    • value: Archer

      -----2019-08-30---2.13.35

  • 點選 Send

    -----2019-08-30---2.15.31

  • 執行完成畫面

    -----2019-08-30---2.16.11


Step 4. 透過 express 取得 Redis 資料

  • Request URL

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

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

        -----2019-08-30---1.58.51

  • Method

    • GET

    -----2019-08-30---2.17.58

  • 點選 Send

    -----2019-08-30---2.19.27

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

    • 可取得數據

    -----2019-08-30---2.20.48

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

    • 會無法取得數據

      -----2019-08-30---2.32.48


GitHub
List of blogs
Archer

Archer

Having being a software engineer. Experience with Python, JavaScript, Objective-C, Micro:bit, LinkIt 7697, Raspberry Pi, AWS, Azure, IoT. ❆ [email protected] https://oranwind.org/author/archer/

Read More