部署 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

那些大學課堂的Project:LineBot(壹)專案建置

那些大學課堂的Project:LineBot(壹)專案建置

Npm 套件收納箱

Npm 套件收納箱

在單一元件檔(.vue)裡面使用 Teleport

在單一元件檔(.vue)裡面使用 Teleport


Comments