Deploy Local Node Project แรกของคุณ กับ Docker และ GitLab สำหรับ Windows

คำถามที่ถูกถามในการเริ่ม project แรกของทุกคนคือ

• ทำอย่างไรจึงจะนำเอาโปรแจคนี้ไปใช้กับเพื่อนร่วมงานหรือเพียงแค่นำไปใช้ได้ทุกที่
• คำตอบคือเมื่อคุณมีโปรแจคแล้วสิ่งแรกที่ควรจะทำแค่นำโปรแจคนั้น(source code) ขึ้นไปบน GitLab หรือ GitHub
• จากนั้น ทำการ run docker เพื่อจำลอง localhost ของคุณเพื่อทำงานได้ในทุกๆที่
• Chapter 1 Init Project
• Chapter 2 GIT
• Chapter 3 Begin with docker

CHAPTER 1 Init Project

มาเริ่มการสร้างโปรแจคกันเลย

สิ่งที่ต้องการคือ ในขั้นตอนนี้คือ

1. Visual Studio Code วิธี install สามารถ อ่านได้จากที่นี้

https://code.visualstudio.com/

2. node

https://nodejs.org/en/download/

3. gitBash

https://git-scm.com/downloads

ใน Project นี้เราจะมาทำ back-end ง่ายๆกันนะครับ เริ่มกันเลยใน CMD พิมพ์คำสั่ง ตามสร้าง folder เลยครับ

mkdir simpleProject
cd simpleProject
code .

จากนั้นให้ vsCode จะถูกเปิดขึ้นมา ให้เปิด terminal ใหม่ จากนั้นให้ใช้

npm init

ให้ตั้งชื่อว่า project basicback และ entry เป็น “index.js” ต่อด้วย

npm install
npm install express --save

จากนั้นให้สร้าง file ให้ขึ้นมาชื่อว่า index.js ในนี้เราจะมาทดสอบกันนะครับว่า project ของเราใช้ได้จริงหรือยังโดยการ

console.log(“you are in the project”)

จากนั้นให้ลอง run ด้วย command ข้างล่างใน terminal ดูนะครับ

node index.js 

เราจะได้ผลลัพธ์แบบนี้ครับ

ตอนนี้เราก็เห็นแล้วว่าโปรแจคของเราใช้งานได้

แต่…… เราจะไม่หยุดอยู่แค่นี้นะครับ การนำโปรแจคของเราขึ้นเป็น local server เราก็ต้องการ server ใช่ไหมครับ ต่อไปจึงต้องสร้างไฟล์ที่จะทำให้เราสร้าง server ได้ครับ

เริ่มจากการสร้างไฟล์ ที่ชื่อว่า server.js และนำโค้ดข้างล่างไปยัดใส่ได้เลยครับ

//บรรทัดนี้คือการเรียกใช้ express นะครับ
const express = require("express")
//ตั้งตัวแปรเพื่อเรียกใช้
const app = express()
//กำหนด port ที่เราจะใช้ใน local host ของเราครับ
const PORT = process.env.PORT || 8080
//นี้คือสิ่งที่เราจะส่งออกไปนะครับ
app.get("/", (req, res) => res.send("you are in the project"))
//เป็นการบบอกให้รอการเชื่อมจ่อ port ของเรา
app.listen(PORT, () => {
console.log(`Server is running on port : ${PORT}`)
})
//การ export หรือการนำ app นี้ไปใช้บน server นะครับ
module.exports = app

จากนั้นเราจะไปเป็นการเรียกใช้ของ page เป็น server.js กันครับ

โดยไปที่ไฟล์ package.json แล้วเปลี่ยน

“start”: “node index.js” เป็น “start”: “node server.js”

แล้ว save ครับ

หากทุกอย่างเป็นไปตามที่ผมเขียนมา เราจะสามารถ ทำการ run แบบ localhost ได้แล้วนะครับ ด้วยคำสั่งด้านล่าง จากนั้นไปที่ browser แล้วพิมพ์ localhost:8080

npm start

เราจะเห็นแล้วว่า localhost ของเรามีคำที่ใส่ไปแล้วนะครับ

ด้วยการเปลี่ยนแปลงทุกครั้งจะต้อง run โปรแจคใหม่ทุกครั้ง เราจึงจะนำ nodemon เข้ามาใช้ทุกครั้งที่ save มันจะช่วย run ใหม่ให้ครับ วิธีการลงก็ไม่ยากครับ เพียงแค่เอา command ข้างล่าง ไปใส่ที่ terminal เราแล้วกด enter แล้วรอ

npm install -g nodemon

จากนั้นไปที่ไฟล์ package.json ทำการเปลี่ยน จาก server.js เป็น

"nodemon ./server.js localhost 8080"

→ มาถึงตอนนี้โปรแจคของเราก็มีทั้ง server และ ไฟล์ที่พร้อมจะนำไปใช้ต่อแล้ว

→ ส่วนวิธีการเขียน backend และ database จะตามมาอีก ep นะครับ

CHAPTER 2 GIT

Git คืออะไรแล้วเราต้องการมันทำไม

คุณเคยคิดไหมว่า ถ้าเราทำงานแล้วอยากจะให้คนอื่นเข้ามาช่วยหรือ ทำงานร่วมกับในสมัยก่อนคือการที่นำงานใส่ลงไปในแต่ละเรคื่องที่จะต้องทำงาน แล้วจึงนำมารวมกันภายหลังจึงทำให้เกิดปัญหามากมาย นี้คือการเริ่มต้นการคิดค้นและนำมาใช้ของ Git ซึ่งคือระบบที่นำเอางานของคุณมารวมอยู่ในที่เดียว ทุกคนในทีมจึงสามารถที่จะนำงานมาทำงานต่อได้โดยไม่ต้องโอนถ่ายข้อมูลหลายครับ และ Git ยังมีระบบเปรียบเทียบโค้ดด้วยจึงทำให้ความผิดพลาดของการทำงานน้อยลงด้วย

ในขั้นตอนนี้เราจะ นำโปรแจคขึ้นไปบน Gitlab กันครับ (ผมขอไม่ถึงวิธีการสมัครนะครับเพราะมันง่ายมาก)

กดที่ New project จากนั้นให้เลือก create blank project และตั้งชื่อโปรแจคเลยครับ แล้วก็สร้างเป็น public เลยครับ

หลังจากสร้างโปรแจค เสร็จแล้วจะเห็นคำสั่งมากมายใน tab ข้างล่าง แล้ว config : username กับ email

git config --global user.name "ใส่ user name"
git config --global user.email "ใส่ email"

จากนั้นไปที่ terminal ที่เรากำลังเปิดอยู่ใน vsCode แล้วทำตามคำสั่งนี้นะครับ

git init
git remote add origin git@gitlab.com:"user name"/simpleproject.git
git add .
git commit -m "Initial commit"
git push -u origin master

คำสั่งที่ใช้บ่อยในการทำงาน จะมี

git add . 
คือการนำงานที่ save ทั้งหมดนำมาใส่ก่อนที่จะ commit
git commit -m "xxx"
คือการส่งงานทั้งหมดเก็บเอาไว้ในระบบ โดยใส่คำกำกับงานได้ใน " " 
git pull 
คือการดึงโค้ดใน branch (ก้านงานที่สามารถแแตกออกไปทำงานส่วนตัวได้)ที่กำลังทำงานอยู่มาทั้งหมดจนถึง commit ล่าสุด
git push
คือการนำงานทั้งหมดใน commit นี้ ขึ้นไปทับโค้ดใน git และทำให้โค้ดชุดนั้นเป็นชุดล่าสุดที่ทุกคนจะได้รับ จากการ pull

CHAPTER 3 Docker

Docker คืออะไร แล้วจะเข้าใจมันได้อย่างไร

หากให้อธิบาย docker แบบง่ายๆแล้วนั้นให้นึกซะโปรแจคของเราคือ เรือส่งของ โดยท่าเรือของเราก็คือ docker เมื่อเรือไปถึงท่าเรื่อไหน ท่าเรือนั้นก็จะได้ของเหมือนกันกับที่เรือขนมา โดยไม่ต้องยื่นใบสั่งของใหม่ เช่นกันกับโปรแจคของเรา เมื่อเรามั้นใจแล้วเช็คได้แล้วว่า งานของเราสมบูรณ์แล้ว เราก็จะใส่เข้าไปใน docker แล้ว docker จะทำการเก็บงานเราไว้ในรูปแบบ ของ image และทุกคนในทีมจะสามารถเข้าถึง latest product หรือ ผลลัพธ์ล่าสุดได้โดยไม่ต้อง ลง plugin เพิ่มเลย อีกอย่างที่ docker ได้รับความนิยมคือ การทำงานแบบ layers โดย docker จะคัดกรองโค้ด หรือ image โดยหาว่า image ไหนมีการเปลี่ยนแปลงก็จะทำงานแค่การเปลี่ยนแปลงในตอนที่โปรแจคของเราถูก build ใหม่ทุกครั้งที่มีการ push จาก Git การทำงานแบบนี้ ทำให้การนำโปรแจคของเรา build เร็วขึ้นและทำให้ผลลัพธ์ส่งถึงมือผู้ใช้ได้เร็วขึ้น

ขั้นตอนนี้ก็เหมือนกันครับ ผมจะไม่บอกวิธีลง docker นะครับ สามารถอ่านวิธีการได้ที่นี้นะครับ

แล้วก็ได้เวลาแล้วครับที่เราจะมาสร้าง docker local ของเรากัน

เริ่มจากการสร้าง dockerfile ที่โปรแจคของเราก่อนเลยนะครับ เพียงคลิ๊กขวาในพื้นที่ว่างใน vsCode แล้วเลือก new file แล้วสร้างไฟล์ dockerfile

ในไฟล์จะมี content ดังนี้ครับ

FROM node:current-slim
เป็นการเตรียมตัวของ npm install ในแต่ละ flatform หรือ OS
WORKDIR /usr/src/app
เนื่องจาก docker เป็นการเปิดเครื่อง linux เราจึงต้องกำหนดว่าโปรแจคของเราควรไปอยู่ที่ไหน
COPY package.json .
นี้คือการก็อปปี้ setting ของ package.json ของเรามาครับ
COPY . .
เก็บทุกไฟล์ในโปรแจค
RUN npm install
ลง plugin ให้พร้อมกับการใช้
EXPOSE 8080
เปิดที่ port 8080 
CMD [ "npm", "start" ]
การกำหนดคำสั่งให้ run โปรแจคบนเครื่อง docker ครับ

ต่อไปเรามากำหนดไฟล์ที่เราไม่ต้องการกันครับ โดยการสร้าง

.dockerignore
และข้างในจะมีประมาณนี้ครับ
node_modules
**เหตุผลที่เราต้องเอาออกเพราะว่าแต่ละ OS ใช้ npm install ไม่เหมือนกันเราจึงต้องปล่อยให้ docker เป็นตัวลงให้เราใน dockerfile นะครับ

• tip* ลง docker ไว้ในเครื่องแล้ว ให้เปิด docker dashboard ไว้ด้วยนะครับ

มาลุยกันเลยครับ เริ่มจากการ build โปรแจคของเราขึ้น บน docker ก่อนนะครับด้วยคำสั่ง ใน terminal

docker build -t simpleproject .

ต่อจากนั้น ก็เริ่ม run docker ได้เลยครับ ตามนี้เลย หน้าตาก็จะปรระมาณรูปข้างล่างเลยครับ

docker run -p 7200:8080 simpleproject
>> -p 7200:8080
7200 อันแรกคือ port ของ localhost เราจะทำการ เปิดดูนะครับ
8080 อันที่สองคือ port หลักของโปรแจคเรา ซึ่งต้องตรงกับใน package.json และ dockerfile นะครับ
>> simpleproject 
ก็คือการใช้ชื่อโปรแจคของเรานั้นเองครับ

เราไปดูกันที่ localhost:7200 กันเลยครับ

• *ทุกครั้งที่จะ build docker แบบนี้นะครับในเบื้องต้นนะครับ

สุดท้ายแล้วการที่เราอะไรก็ในโปรแจค ให้ทำใน local ของ node ก่อนเมื่อพอใจกับงานที่เราทำแล้วจึง นำงานนั้น build ขึ้น docker นะครับ

ส่วน ep ต่อไปเราจะมาทำโปรแจคกันแบบ ง่ายๆ ละเอียดๆ แบบนี้กันอีกนะครับ