部署 React App


Posted by chihyu on 2021-01-25

部署 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,部署完成

#Web #React #Deploy #GitHub Pages







Related Posts

[Day02]: Docker 環境配置

[Day02]: Docker 環境配置

34歲才開始自學寫程式會不會太晚?真的有心,永遠都不嫌晚。

34歲才開始自學寫程式會不會太晚?真的有心,永遠都不嫌晚。

HHKB Studio

HHKB Studio


Comments