วิธี Upload NodeJS App เข้า Heroku ( โฮสฟรีสำหรับ NodeJS App )
Heroku เป็นบริการ Cloud ( มีทั้งบริการแบบฟรี และเสียเงิน ) ที่รองรับ NodeJS Application ที่ได้รับความนิยม ในบทความนี้ จะแสดงขั้นตอนการ สร้างหน้าเว็บ อย่างง่าย ด้วย Node JS , Exprss JS และ Upload ไปไว้ที่ Heroku ทีละขั้นตอนดังนี้
รับเขียนโปรแกรม NodeJS
รับเขียนโปรแกรม Javascript
Download Source Code https://github.com/nuntawa/sample_node_js_app
สร้าง Folder งานด้วยคำสั่ง mkdir sample_node_js_app
( ในที่นี้ใช้ชื่อ Folder ว่า sample_node_js_app ) เมื่อสร้าง folder แล้วให้เข้าไปที่ folder sample_node_js_app ด้วยคำสั่ง cd sample_node_js_app จากนั้นพิมพ์ npm init เพื่อสร้าง node module และ ไฟล์ package.json
ดูความเรียบร้อยของไฟล์ package.json แล้วกด Enter
install express js ด้วยคำสั่ง npm install express --save แล้วกด enter
เปิด Visual Studio แล้วเลือก sample_node_js_app
เปิดไฟล์ package.json แก้ scripts โดยใส่ start:"node index.js" เพื่อให้สามารถใช้คำสั่ง npm start ในการเริ่มรันได้
สร้างไฟล์ index.js ซึ่งเป็นไฟล์เริ่มต้น
พิมพ์คำสั่ง
var express=require("express");
var app=express();
var port=process.env.PORT || 3000;
var path = require("path");
app.use(express.static('public'));
app.get("/",(req,res)=>{
res.sendFile(path.join(__dirname+'/public/index.html'));
});
app.listen(port);
เพื่อให้ เมื่อเรียกหน้าเว็บแล้ว นำไฟล์ index.html ใน folder public ขึ้นมาแสดง
( คำสั่ง app.use(express.static('public')); คือการกำหนดให้ nodejs รู้จัก folder public )
แต่เรายังไม่มีไฟล์ index.html ใน folder public ให้สร้าง folder public ขึ้นมาก่อน
สร้าง folder css ใน folder public สำหรับไฟล์ css
สร้าง folder js สำหรับใส่ไฟล์ javascript
ในที่นี้เราจะใช้ bootstrap สำหรับตกแต่งหน้าเว็บซึ่งต้อง Download ไฟล์ javascript และ css ของ bootstrap มาไว้ก่อน โดยเริ่มจาก jquery
ให้เปิด Browserไปที่
https://code.jquery.com/jquery-3.4.1.min.js แล้ว คลิกขวา Save AS
โดยเลือกให้บันทึกใน folder js ที่ได้สร้างไว้
ต่อมา Download popper.min.js โดยเปิด
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
ใน browser แล้วคลิกขวา save as ไปไว้ที่ folder js เช่นเดิม
Download bootstrap.min.js โดยเปิด Browser แล้วไปที่
แล้วคลิกขวา save as ไปไว้ที่ folder js เช่นเดิม
Download bootstrap.min.css โดยเปิด Browser แล้วไปที่
https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css
แล้วคลิกขวา save as ไปไว้ที่ folder css ที่สร้างไว้ใน folder public
สร้างไฟล์ index.html ที่ folder public เพื่อให้ node js นำไฟล์มาแสดง
ใส่ code html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<script src="/js/jquery-3.4.1.slim.min.js" ></script>
<script src="/js/popper.min.js" ></script>
<script src="/js/bootstrap.min.js" ></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Sample Node js </h1>
<p class="lead">This is sample Node js </p>
</div>
</div>
</div>
</body>
</html>
ในไฟล์ index.html
ลดลองเปิดเว็บแบบ local โดยเปิด terminal แล้ว พิมพ์ node index.js
ทดลองเปิดหน้าเว็บ โดยพิมพ์ http://localhost:3000
เราจะ Upload NodeJS App เข้า Heroku โดยใช้วิธี upload code ผ่าน github เปิด login เข้า github.com แล้วคลิกปุ่ม New
สร้าง Repository โดยพิมพ์ชื่อ sample_node_js_app แล้วคลิก Create repository
ไปที่ tab code
เลือก Upload an exiting file
ใน foler sample_node_js_app ให้ลากไฟล์ package.json index.js และ folder public เข้าไปใน browser โดยไม่ต้อง ลาก folder node_modules
เมื่อ upload ไฟล์ครบแล้ว ให้คลิก Commit changes
login ในหน้าเว็บ heroku แล้วเลือก Create new app
ตั้งชื่อ app ว่า mysamplenodejsapp แล้วคลิก Create app
เลือกการ deploy ผ่าน github
พิมพ์ชื่อ repository "sample_node_js_app" แล้วคลิก search
คลิก Cnnect เพื่อเชื่อม Heroku กับ github repository
คลิก Deploy Branch
เมื่อ Deploy แล้ว ไปที่ด้านบนสุด คลิก Open app เพื่อดูหน้าเว็บ
ผลลัพธ์ที่ได้คือ
Download Source Code https://github.com/nuntawa/sample_node_js_app