Deploy Create React App to Github Pages

วิธีการ Deploy React ด้วย Github Pages

Photo by Glenn Carstens-Peters on Unsplash

หลังจากเราสร้าง Web App ด้วย Create React App แล้ว จะ Deploy ยังไงดี?เรามาทำการ Deploy React Web App อย่างง่ายๆ แต่ใช้ได้จริงกันนะครับ

ก่อนอื่น หากอยากรู้อะไรเพิ่มเติม เกี่ยวกับ Github Pages แวะไปดูกันได้ที่เว็บไชต์ของ Github

GitHub Pages

ต่อไปคือตัวอย่างเว็บไซต์ ที่ใช้ Github Pages ซึ่งก็ไม่ใช่คนอื่นคนไกล :)

Create React App · Set up a modern web app by running one command.

และยังมีอีกมากมาย กดไปดูได้ ตามลิ้งค์ด้านล่าง

Build software better, together

สิ่งที่ควรรู้ ก่อนจะทำการ Deploy Create React App to Github Pages

- เข้าใจ Create React App
- ใช้งาน Github เบื้องต้นได้ (ผมก็เพิ่งเริ่มใช้ไม่นาน)
- ใช้งาน npm หรือ yarn เป็น

เอาล่ะ เข้าเรื่องเลยนะครับ ณ จุดจุดนี้ จะขอข้ามวิธีการใช้งาน Create React App และ Git ไปเลยนะครับ มาดูขั้นตอนของการ Deploy Create React App ไปที่ Github Pages เลยดีกว่า

ขั้นตอนการ Deploy Create React App ไปที่ Github Pages

1. ให้ทำการสร้าง Git Repo ขึ้นมา ตั้งชื่อตามต้องการ ตัวอย่างเช่นของผม ใช้ชื่อ Repo ว่า react-setstate-example ดังภาพครับ (หากสร้าง Repo ไว้แล้วก็ให้ข้ามขั้นตอนนี้ไปเลยก็ได้ครับ)

สิ่งที่ต้องทำต่อก็คือการเพิ่ม url ของ remote (server) กลับมาที่ Workspace ของเรา ที่สร้าง React Web App ไว้แล้วด้วย create-react-app เปิด Terminal และพิมพ์คำสั่ง git remote add origin ตามด้วย repo url ของเรา
(url แต่ละคนจะไม่เหมือนกันนะครับ ต่างกันที่ User และชื่อ Repo)

git remote add origin git@github.com:User/UserRepo.git

ต่อมาเช็คให้แน่ใจว่าเราทำการเพิ่ม remote ได้ถูกต้องด้วย git remote-v ซึ่งจะได้ Output หน้าตาประมาณนี้

git remote -v
origin  https://github.com/nuSapb/react-setstate-example.git (fetch)
origin  https://github.com/nuSapb/react-setstate-example.git (push)

ต่อมาเราจะทำการส่งโค้ดจากเครื่อง local ไปที่ Github ด้วยคำสั่งของ Git ดังนี้

• git add
• git commit
• git push

Output หน้าตาก็จะออกมาประมาณนี้

git add .
warning: LF will be replaced by CRLF in src/App.js.
The file will have its original line endings in your working directory.
git commit -m 'modify some param'
[master 7912d01] modify some param
 1 file changed, 4 insertions(+), 4 deletions(-)
git push
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 4 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 382 bytes | 191.00 KiB/s, done.
Total 4 (delta 3), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/nuSapb/react-setstate-example.git
   d95bd55..7912d01  master -> master

เรียบร้อยสำหรับ Git Repo

2. ทำการติดตั้ง gh-pages ด้วย yarn หรือ npm ไปที่ terminal ของเราแล้ว run commandyarn add gh-pages หรือ npm install gh-pages จะได้หน้าตา Output ประมาณนี้

yarn add gh-pages
yarn add v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.12.3", while you're on "1.7.0".
info To upgrade, download the latest installer at "https://yarnpkg.com/latest.msi".
success Saved 1 new dependency.
info Direct dependencies
└─ gh-pages@2.0.1
info All dependencies
└─ gh-pages@2.0.1
Done in 25.71s.

3. ที่ไฟล์ package.json ของเรา ทำการเพิ่มโค้ด"homepage": "https://username.github.io/repo-name ของเรา" ซึ่งของผม repo url คือ https://nusapb.github.io/react-setstate-example/ ก็จะเพิ่มโค้ดดังนี้

"homepage": "https://nusapb.github.io/react-setstate-example/",

จะได้หน้าตาไฟล์ package.json ประมาณนี้

{
"name": "myapp",
"version": "0.1.0",
"private": true,
"homepage": "https://nusapb.github.io/react-setstate-example/",
...
}

ระวังจุดนี้หน่อยนะครับ (url แต่ละคนจะไม่เหมือนกันนะครับ ต่างกันที่ Username และชื่อ Repo)

4. ยังอยู่ที่ไฟล์ package.json ในส่วนของ “script” ให้เพิ่มโค้ดเข้าไปดังนี้

"predeploy": "yarn build",
"deploy": "gh-pages -d build",

หน้าตาไฟล์ package.jsonในส่วนของ script จะเป็นแบบนี้

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"predeploy": "yarn build",
"deploy": "gh-pages -d build",
"eject": "react-scripts eject"
},

จากนั้นก็ทำการ Saveไฟล์ package.json

5. มาถึงขั้นตอนสุดท้าย ที่ Terminal ให้พิมพ์คำสั่ง yarn deploy หรือใครใช้ npm ก็ npm run deploy คำสั่งนี้จะเป็นการ built file ไปยัง gh-pages branch repository ของเรา รอสักครู่หลังจาก Run Command ไปแล้ว ก็จะได้ Output หน้าตาคล้ายๆด้านล่าง ให้สังเกตุ Createing an optimized production build... เมื่อ gh-pages ทำงานเสร็จสิ้น เราจะได้ link ไปยัง Github Pages ของเรา คล้ายๆแบบนี้

The build folder is ready to be deployed.
To publish it at https://nusapb.github.io/react-setstate-example/,

yarn deploy
yarn run v1.7.0
$ yarn build
$ react-scripts build
Creating an optimized production build...
Compiled with warnings.
./src/App.js
  Line 2:  'logo' is defined but never used  no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
34.45 KB      build\static\js\1.f68dcc1a.chunk.js
  858 B (+1 B)  build\static\js\main.4883d306.chunk.js
  778 B         build\static\js\runtime~main.96924ec3.js
  510 B         build\static\css\main.b8aee27b.chunk.css
The project was built assuming it is hosted at /react-setstate-example/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
To publish it at https://nusapb.github.io/react-setstate-example/, run:
yarn run deploy
Find out more about deployment here:
http://bit.ly/CRA-deploy
$ gh-pages -d build
Published
Done in 120.13s.

เป็นอันเสร็จสิ้น ลุ้นกันสุดๆ หากเราพิมพ์ขั้นตอนก่อนหน้านี้ไม่ขาดตกบกพร่อง ก็จะได้ Deploy React App ของเราแล้วล่ะครับ ลองเข้าลิ้งค์ URL ของเราดูจาก https://username.github.io/repo-name

แวะเข้ามาดู Github Repo ของบทความนี้ได้ที่นี่ https://github.com/nuSapb/react-setstate-example

ส่วนอันนี้เป็น Github Pages ที่ทำตอนเขียนบทความนี้ https://nusapb.github.io/react-setstate-example/

ใครทำตามแล้วติดปัญหาหรือมีข้อสงสัยตรงไหน ลองสอบถามเข้ามาได้นะครับ :)