NUK JavaScript Lesson 08:Node.js 初體驗
本篇筆記為 Node.js 的基礎介紹,將會介紹環境建置、執行、開啟網頁伺服器,並將 app 部署至 Heroku 等內容。
Node.js 初體驗
環境設定與執行
- 在 project 資料夾新增一個 all.js 檔案
- 在 all.js 裡面撰寫程式碼:
console.log("Hello World!");
- 將終端機移到 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 | var http = require('http'); |
練習:開五個路由
參考上方範例,我們練習開五個路由,我們可以透過 request.url
後方的網址位置來更換頁面。
例如:下方範例中,有首頁、搜尋頁面、購物車頁面、產品頁面、登入頁面等五個頁面,最後還有新增一個 else
當作「404 Not Found」的結果頁。
部署至 Heroku
開始之前,要先註冊並安裝好 Heroku。
可以使用 heroku --version
查詢是否安裝成功。
Heroku CLI 安裝指令:
npm install -g heroku
STEP 1:新增 package.json 在根目錄
1 | { |
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
指令開啟查看部署的結果,預設瀏覽器會自動開啟該網頁。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。