3 MB │ └────────┴────┴──────┴────────┴───┴─────┴───────────┘ จะสังเกตเห็นลักษณะแบบด้านบน คือจะมีระบุว่า Name เป็นอะไร และ id เป็นอะไร ตัวอย่างนี้ เราสามารถดูรายละเอียดได้ด้วยคำสั่ง pm2 show < ID > pm2 show 0 หรือจะดู Monitoring ก็ทำได้ด้วย และก็คำสั่งที่สำคัญของ PM2 อีกอย่างคือ การสั่งให้มัน start กรณีที่เครื่อง VPS ดับ หรือ restart (เพราะถ้าปกติเรารัน node ถ้าเครื่องดับจบเลยใช่มั้ยละครับ) pm2 startup [ PM2] Init System found: launchd [ PM2] To setup the Startup Script, copy/paste the following command: sudo env PATH = $PATH:/usr/local/Cellar/node/12. 7.
ถ้ามีตัวเลข version แสดงขึ้นมา แสดงว่า ใช้ได้… หลังจากขั้นตอนนี้จบลบ บน OS X และ Windows จะใช้รูปแบบเดียวกันแล้วนะครับ คือ ขั้นตอนการติดตั้ง ReactJS ด้วยคำสั่งสั้นๆ ว่า!!! npm install -g create-react-app ปล่อยให้ติดตั้งจนเสร็จนะครับ โดยไม่ต้องสนใจ directory อีกเช่นเคย!!!
สวัสดีครับ วันนี้จะพาไป Setup Server สำหรับ Deploy Backend และ Frontend คือ Application และ React App (ที่เป็น Single Page Application) ไว้ในเครื่องเดียวกัน โดยใช้ NGINX เป็น reverse proxy นะครับ โดยปกติส่วนใหญ่แล้วส่วนใหญ่ SPA เป็น static website ดังนั้นมันสามารถ hosting ไว้ที่ไหนก็ได้ ไม่ว่าจะเป็น Netlify, Firebase Hosting, Github Pages แล้วใช้วิธี host Backend API ไว้อีกเครื่องนึง แต่สำหรับบางคนที่มีข้อจำกัด หรืออยาก Deploy ไว้ที่เครื่องเดียวกันเลยละ? จริงๆก็ทำไม่ยากเลย มาเริ่มกันดีกว่าครับ Table of Contents และ React รู้จักกับ PM2 ทำ Reverse proxy ด้วย NGINX และ React App หรือ clone จากนี้ครับ git clone ก็เริ่มต้นมา สมมติผมมี Backend API เป็น Server ง่ายๆ ด้วย express 1 ไฟล์ครับ สร้างโปรเจ็คมาง่ายๆเลย mkdir backend & cd backend npm init -y npm install express cors ส่วนไฟล์ ก็มีแค่ endpoint เดียวคือ /api เพื่อส่ง response กับไปที่ client const express = require ( 'express') const cors = require ( 'cors') const app = express () app. use ( cors ()) app. get ( '/api', ( req, res) => { res.
เนื่องจากมีคนอธิบายไว้อยู่ค่อนข้างเยอะมากแล้ว เกี่ยวกับว่า ReactJS คืออะไร วันนี้ผมจะมาแนะนำการติดตั้ง ReactJS ด้วยวิธีง่ายๆ ไม่ซับซ้อนอย่างที่ทุกคนเข้าใจ และไม่ต้องน้อยใจว่า ผมจะสอนแค่ฝั่ง OS X อย่างเดียวนะครับ ครั้งนี้จะสอนทั้งบน Windows ผ่าน CMD และ บน OS X ผ่าน Terminal เลย ขั้นตอนการติดตั้ง เนื่องจาก ReactJS นั้นทำงานอยู่บน เราจึงต้องลง ให้ทำงานได้ก่อน ขั้นแรก เราจะทำการลง Chocolate ที่เป็นตัวช่วยในการ install package ต่างๆ คล้ายกับ homebrew ของ OS X …. ให้เปิด Command Prompt ขึ้นมา แล้วไม่ต้องสนใจว่า อยู่บน Directory ไหน ให้พิมพ์คำนี้ลงไป แล้ว Enterปล. ให้ run as admin เท่านั้นนะครับ ถ้าไม่ได้ setting ให้ admin เป็น default @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object).
json ( { message: 'Ahoy! ', users: [ { id: 1, name: 'John Doe'}, id: 2, name: 'Chuck Norris'}]})}) app. listen ( 4000, () => console. log ( "It's work! ")) ต่อมา frontend ผมเลือกสร้างจาก Create React App npx create-react-app frontend-app npm install axios จากนั้นผมแก้ไฟล์ ให้ทำการ fetch data จาก /api import React, { useEffect, useState} from 'react' import axios from 'axios' import logo from '. /' import '. /' function App () { const [ data, setData] = useState ( {}) useEffect ( () => { async function fetchData () { const response = await axios. get ( 'localhost:3000/api') setData ( response. data)} fetchData () return () => {}}, []) return ( < div className = "App" > < header className = "App-header" > < img src = { logo} className = "App-logo" alt = "logo" / > < p > { data. message} < / p > < ul > { data. users && data. users. map ( user => { return < li key = { user. id} > { user. name} < / li >})} < / ul > < p > Edit < code > src / App. js < / code > and save to reload. < / p > < a className = "App-link" href = " target = "_blank" rel = "noopener noreferrer" > Learn React < / a > < / header > < / div >)} export default App ทดสอบรัน server ทั้ง backend และ frontend ครับ โดย Backend อยู่ port 4000 Frontend อยู่ port 3000 ต่อมานับ App ขึ้น Server จะใช้ VPS หรืออะไรก็แล้วแต่ครับ สำหรับใครไม่มี Server หรือไม่รู้วิธี Setup อ่านบทความเกี่ยวกับ Digital Ocean เพิ่มเติมได้ที่ผมเขียนไว้ Digital Ocean คืออะไร?
React JS Crash Course 2021 นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูเพิ่มเติม Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more. Code: React \u0026 Other Course Links at 💖 Support The Channel!
2. e-mail มาที่ 3.
เครื่องโน๊ตบุ๊คที่ลงระบบปฏิบัติการ Windows 10 / Windows 8 / Windows 7 / macOS พร้อมติดตั้งโปรแกรมดังต่อไปนี้ - Visual Studio Code ดาวน์โหลด - NPM ดาวน์โหลด 2. สมุดปากกา 3.
+ สอนวิธีการติดตั้งและสร้าง Droplet รู้จักกับ PM2 สมมติตอนนี้เรามี App 2 ตัวแบ่งเป็น 2 folders คือ frontend และ backend สิ่งที่เราจะทำต่อมาคือ ติดตั้ง PM2 (ไม่เกี่ยวอะไรกับ PM 2.
C:\> heroku git:clone -a react640909 (832 KB, 66 files, 43 Folders) C:\> cd react640909 คัดลอก ไปไว้ในห้อง src แก้ไข src/ เพิ่ม import burin from '. /'; เพิ่ม ใน src/ C:\react640909> git add. C:\react640909> git commit -am "make it better" (git reset) (ถ้า code ใน ผิดแล้ว push ไม่ขึ้น ก็ให้แก้ไข แล้ว add, commit แล้ว push ใหม่) C:\react640909> explorer React: กับ จาก 2 แฟ้มที่เชื่อมกันระหว่าง กับ จาก public/