部署 React App

部署 React App

Deployment

部署到 port 5000

用 build 做一些優化(縮小 bundle size、去除不必要的東西)

npm run build

Node 環境下用下列指令，就可在 localhost:5000 可以看到自己的 app

npm install -g serve
serve -s build

my-app 的資料夾就會多一個 build 的資料夾

部署到 GitHub Pages

1. 在 package.json 加上：(myusername 帶入自己的 github 帳號、my-app 帶入專案名

   "homepage": "https://myusername.github.io/my-app",
   

2. 安裝 gh-pages

   npm install --save gh-pages
   

3. 在 package.json 的 scripts 加上：

   "scripts": {
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
   

4. 在 GitHub 上新建 repository，名字用 剛剛在 homepage 寫的專案名，再把本地的東西跟 GitHub 連動

   git remote add origin https://github.com/myusername/react-board-test.git
   git branch -M main
   git push -u origin main
   

5. 部署

   npm run deploy
   

6. 在 GitHub pages 選擇 gh-pages branch，部署完成