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 指令開啟查看部署的結果,預設瀏覽器會自動開啟該網頁。

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