The latest articles on DEV Community by reerii code (@reeriicode). https://dev.to/reeriicode https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4147428%2F524b6ead-f058-4241-acbe-b1c27dc059f2.png https://dev.to/reeriicode en reerii code Thu, 15 Oct 2026 07:44:25 +0000 https://dev.to/reeriicode/deploy-khuueaair--2a9p https://dev.to/reeriicode/deploy-khuueaair--2a9p <p>Deploy คือ ง่ายๆเลยคือการเอาเว็บของเราไปวางใว้บน server ให้คนอื่นเข้ามาใช้งานได้</p> <h2> เเล้วทำไม่ต้อง Deploy ล่ะ? </h2> <p>ก็เพราะถ้าไม่ deploy คนอื่นเข้ามาใช้เว็บเราไม่ได้ไงล่ะ hahaha <br> อ่าวกวนตีนนี้วาาา <br> โอเครๆ เดียวอธิบายดีๆ ตอนเรา dev เว็บอยู่เนี่ย เว็บมันรันอยู่บน local หรือก็คือในเครื่องเราเอง เราเปิด localhost ได้ แต่เพื่อนเราเปิดไม่ได้ เพราะมันอยู่ในเครื่องเรา ไม่ได้อยู่บนอินเทอร์เน็ต</p> <h2> อยากให้คนอื่นดูเว็บเดี๋ยวนี้ ทำไงดี? </h2> <p>มีทางลัดอยู่ทางนึง เรียกว่า Tunneling ก็คือเปิดอุโมงค์จากเครื่องเราออกไปอินเทอร์เน็ต แล้วมันจะสร้าง URL สาธารณะชั่วคราวให้ ส่งลิงก์ให้เพื่อนเปิดได้เลย เครื่องมือที่นิยมก็ ngrok หรือ Cloudflare Tunnel วิธีนี้เหมาะกับตอนทำ prototype ให้ลูกค้าดูระบบคร่าว ๆ</p> <h2> แต่! </h2> <p>ครื่องเราต้องเปิดไว้ตลอดนะจ๊ะ ปิดฝาโน้ตบุ๊กไปกินข้าวเมื่อไหร่ เว็บดับเมื่อนั้น <br> ถ้าอยากให้คนใช้ได้ยาว ๆ ทั้งวันทั้งคืน ยังไงก็ต้อง deploy</p> <h2> Deploy ยากไหม? </h2> <p>บอกเลย ง่ายกว่าที่คิด
 ปกติบน local เราทำยังไง บน server ก็ทำแบบนั้นแหละ<br> <em>เอ้ย จริงดิ?</em></p> <p>จริง…สัก 90% อีก 10% ต้องแก้นิดหน่อย เพราะเครื่องเราอาจเป็น Windows หรือ Mac แต่ server ส่วนใหญ่เป็น Linux </p> <h2> แล้วทำไมไม่ใช้ Docker ล่ะ มันแก้ปัญหา OS ไม่ตรงกันได้นี่? </h2> <p>ใช่ ใช้ได้ แต่ก่อนจะไป Docker ต้องเข้าใจ deploy แบบพื้นฐานก่อน ว่าเบื้องหลังมันทำอะไรบ้าง ไม่งั้นวันไหน Docker พัง จะงงว่าพังตรงไหน</p> <h2> Deploy มีกี่แบบ? </h2> <p>หลัก ๆ มี 3 แบบ</p> <h2> แบบที่ 1 VPS </h2> <p>แบบที่ 1 VPS คือเช่าคอมพิวเตอร์ 1 เครื่องบน cloud แล้วเข้าไปผ่าน SSH ใช้ terminal เป็นหลัก ก็เหมือนทำบน local แค่เปลี่ยนจาก Windows เป็น Linux</p> <ul> <li>ข้อดีคือคุมได้ทุกอย่าง ข้อเสียคือต้องทำเองทุกอย่าง ตั้งแต่ติดตั้ง Node เปิด firewall ไปจนถึงตั้ง Nginx
 เจ้าดัง ๆ ก็ AWS EC2, Google Cloud, Oracle Cloud</li> </ul> <h2> แบบที่ 2 PaaS (Platform as a Service) </h2> <p>แบบที่ 2 PaaS (Platform as a Service) สำหรับสายขี้เกียจ…เอ้ย สายที่ไม่อยากดูแล server เอง
 แค่เชื่อม GitHub พอ push ขึ้น main ปุ๊บ มัน deploy ให้อัตโนมัติปั๊บ เช่น Vercel, Render
 ง่ายใช่ไหมล่ะ</p> <h2> แบบที่ 3 Docker </h2> <p>แบบที่ 3 Docker แพ็กโปรเจกต์เราเป็น image แล้วเอาไปรันที่ไหนก็ได้ จะเป็น Google Cloud Run หรือเอาไปรันบน VPS ก็ได้</p> <h2> ปัญหาคือ API ผมดันเก็บไฟล์รูปไว้ใน folder ของ API เองน่ะสิ แถมยังใช้ WebSocket อีก </h2> <p><em>แล้วมันผิดตรงไหน?</em><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd71ljdsa3a3lu1d3si9r.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd71ljdsa3a3lu1d3si9r.png" alt=" " width="447" height="436"></a></p> <ul> <li><p>Vercel เป็น serverless คือตื่นมาทำงานก็ต่อเมื่อมี request เข้ามา ทำเสร็จก็ทิ้ง เหมือนห้องที่โดนรีเซ็ตทุกครั้ง รูปที่อัปโหลดไว้ก็หายเกลี้ยง แล้วก็ไม่รองรับ WebSocket ด้วย เพราะมันไม่ได้เปิดค้างไว้ให้เชื่อมต่อตลอด</p></li> <li><p>ส่วน Render กับ Cloud Run ถึงจะรัน server ค้างไว้ได้ แต่พื้นที่เก็บไฟล์เป็นแบบชั่วคราว restart หรือ deploy ใหม่เมื่อไหร่ รูปก็หายเหมือนกัน</p></li> </ul> <h2> ทางแก้มี 2 ทาง </h2> <ul> <li><p>ทางที่ 1 แก้โค้ด ย้ายรูปไปเก็บข้างนอก เช่น Supabase Storage หรือ AWS S3 ฐานข้อมูลก็ใช้ของภายนอก ให้ API เป็นแค่ทางผ่านของข้อมูลเฉย ๆ ไม่เก็บอะไรไว้กับตัว แบบนี้ใช้ PaaS ได้สบาย</p></li> <li><p>ทางที่ 2 ไม่อยากแก้โค้ด ก็ใช้ VPS ไปเลย เพราะมันคือคอมพิวเตอร์จริง ๆ 1 เครื่อง ไฟล์ไม่หาย WebSocket ก็เปิดค้างได้</p></li> </ul> <p>เเต่ในครั้งนี้จะ deploy เริ่มต้นใช้เเบบ VPS เพราะจะได้เข้าใจ การ deploy พื้นฐานก่อน</p> <p>Stack ผมคือ หน้าเว็บใช้ React, API ใช้ Express<br> Web → Vercel ง่ายสุด จบ<br> API → VPS</p> <h2> ก่อน deploy ต้องเข้าใจกระบวนการหลักก่อน </h2> <p>นึกถึงตอนเริ่มพัฒนาโปรเจกต์ เราทำอะไรก่อน?<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git clone &lt;url&gt; </code></pre> </div> <p>git clone โค้ดลงมา<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install</span> </code></pre> </div> <p>ติดตั้ง dependency</p> <h2> อ้าว ทำไมต้อง install อีก โค้ดก็โหลดมาแล้วนี่? </h2> <p>เพราะของที่เราติดตั้งใน Node.js มันไปกองอยู่ใน folder node_modules ซึ่งหนักมาก ไม่มีใครบ้าโยนขึ้น GitHub หรอก ปกติจะใส่ไว้ใน .gitignore</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkcs0fyumhsc2apu3zqgp.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkcs0fyumhsc2apu3zqgp.png" alt=" " width="442" height="387"></a></p> <p>สิ่งที่เราดึงโค้ดจาก Github มีเเต่โค้ด ไม่มี dependency ซึ่งเราต้องติดตั้ง </p> <h2> แล้วเครื่องใหม่จะรู้ได้ไงว่าต้องติดตั้งอะไรบ้าง? </h2> <p>ดูจาก package.json ไง มันคือรายการที่ติดตั้งใว้ จดไว้ว่าโปรเจกต์ใช้อะไร เวอร์ชันไหน สั่ง npm install ทีเดียว คือจบ</p> <p>สวนใครที่ใช้ ฝั่ง Python ก็คล้ายกัน ใช้ไฟล์ requirements.txt ในการจด</p> <h2> รันโปรเจกต์ </h2> <p>ตอน dev เราใช้ npm run dev แต่ตอน deploy จะใช้ npm start หรือคำสั่งสำหรับรันจริง</p> <h2> แต่ ๆ ๆ ๆ ช้าก่อน! </h2> <p>ใครเขียน JavaScript, HTML, CSS ล้วน ๆ รันได้เลย
 แต่ถ้าใช้ TypeScript หรือ framework อย่าง React…พวกนายต้อง build ก่อนเว้ย!</p> <h2> Build คืออะไร? </h2> <p>Build ก็คือการแปลงโค้ดที่เราเขียน ให้กลายเป็นไฟล์ที่พร้อมใช้งานจริง</p> <h2> ทำไมต้องแปลง? </h2> <p>เพราะตัวที่รันโค้ดมันไม่รู้จัก TypeScript หรือ JSX<br> ฝั่งเว็บ บราวเซอร์อ่านได้แค่ HTML, CSS, JavaScript<br> ฝั่ง API ตัว Node.js ก็อ่านได้แค่ JavaScript</p> <p>พอสั่ง<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm run build </code></pre> </div> <p>มันจะสร้าง folder dist ขึ้นมา ข้างในคือโค้ดที่แปลงเป็น JavaScript หมดแล้ว
 จากนั้นก็รัน API ด้วย node dist/server.js (ชื่อไฟล์แล้วแต่คนตั้ง อาจเป็น index.js หรือ main.js)
 แค่นี้ API ก็ทำงานแล้ว</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flvbnytyofu4lgb4f00ez.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flvbnytyofu4lgb4f00ez.png" alt=" " width="477" height="372"></a></p> <h2> แต่ ๆ ๆ ใครใช้ ORM อย่าง Prisma ต้องรันคำสั่งเพิ่มอีกนิด ไม่งั้น API จะคุยกับ database ไม่รู้เรื่อง </h2> <p>พูดมาเยอะ บางคนอาจยังไม่เห็นภาพ
 งั้นมาลงมือทำจริงกันเลยดีกว่า!</p> deploy aws devops