NUK JavaScript Lesson 08：Node.js 初體驗

發表於 分類於

本篇筆記為 Node.js 的基礎介紹，將會介紹環境建置、執行、開啟網頁伺服器，並將 app 部署至 Heroku 等內容。

Node.js 初體驗

環境設定與執行

  1. 在 project 資料夾新增一個 all.js 檔案
  2. 在 all.js 裡面撰寫程式碼：console.log("Hello World！");
  3. 將終端機移到 project 後，執行指令 node all.js

使用 setInterval 讓它持續執行

程式碼：setInterval(function() { console.log("hello"); }, 1000);
（按下 Ctrl + C 能讓 Node 停止運作）

執行網頁伺服器

要執行網頁伺服器，我們會使用到「http」這個 Node.js 的預設模組。

http 模組提供的函數 createServer，預設會回傳一個物件，物件裡有 listen 方法，可指定此 HTTP 伺服器監聽的 Port。

當伺服器端收到請求後，會寫入「表頭」與「文字」，最後「結束」並完成回應。

request（請求）：客戶端傳送資訊給伺服器端
response（回應）：伺服器端傳送資料給客戶端

範例程式碼：

1
2
3
4
5
6
7
8
9
10
var http = require('http');
http
  .createServer(function (request, response) {
    console.log('接收到網頁請求！');
    response.writeHead(200, { 'Content-Type': 'text/plain' });
    response.write('Hello World');
    response.end();
  })
  .listen(3000);
console.log('Server已開啟port: 3000.');

練習：開五個路由

參考上方範例，我們練習開五個路由，我們可以透過 request.url 後方的網址位置來更換頁面。

例如：下方範例中，有首頁、搜尋頁面、購物車頁面、產品頁面、登入頁面等五個頁面，最後還有新增一個 else 當作「404 Not Found」的結果頁。

部署至 Heroku

開始之前，要先註冊並安裝好 Heroku。
可以使用 heroku --version 查詢是否安裝成功。

Heroku CLI 安裝指令：npm install -g heroku

STEP 1：新增 package.json 在根目錄

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "engines": {
    "node": "10.x"
  },
  "author": "",
  "license": "ISC"

}

STEP 2：提交 (commit) 檔案

在終端機輸入 heroku login 登入帳號後，移動到我們的開發資料夾創建 Git 空間，然後將資料加入索引並 commit。

  • git init
  • git add .
  • git commit -m 'update'

STEP 3：部署到 Heroku 空間

我們要先在 Heroku 創建一個新的空間，才能把剛才提交的檔案部署到 Heroku 上。

  • heroku create
  • git push heroku master

完成後，可以使用 heroku open 指令開啟查看部署的結果，預設瀏覽器會自動開啟該網頁。

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。