วิธี Upload NodeJS App เข้า Heroku ( โฮสฟรีสำหรับ NodeJS App )

Heroku เป็นบริการ Cloud ( มีทั้งบริการแบบฟรี และเสียเงิน )   ที่รองรับ NodeJS Application ที่ได้รับความนิยม ในบทความนี้ จะแสดงขั้นตอนการ สร้างหน้าเว็บ อย่างง่าย ด้วย Node JS , Exprss JS และ Upload ไปไว้ที่ Heroku ทีละขั้นตอนดังนี้

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