如何在 github 頁面上部署 React 應用程序？

Question

我嘗試將我的 React Web 應用程序部署到 github 頁面，但是當我找不到在線網站時，在控制台中，它說該應用程序已准備好發布，我應該運行命令npm run deploy但每次我看到相同的消息時運行該命令 這是package.json文件：

{
  "name": "weather-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://shotiko-forecast.github.io/weather",
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-scripts": "1.1.4",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

1. 為項目安裝依賴項。

> npm i gh-pages

2. 在你的 package.json 添加腳本和主頁

"homepage": "https://username.github.io/repo-name",
"scripts": {
    "deploy": "gh-pages -d build"
}

3. 運行構建腳本以構建生產

npm run build

4. 運行部署腳本將您的代碼部署到頁面它會自動推送到 git-hub gh-pages 分支並在 gh-pages 分支上自動選擇，您可以檢查設置 > GitHub 頁面。

npm run deploy

5. 現在是時候檢查你的

https://username.github.io/repo-name

Answer 2

你的 React 應用程序的名稱是 weather-app。 我假設該應用程序的 github 存儲庫被命名為 weather-app。 您的 package.json 文件中存在錯誤。 主頁屬性設置不正確。 它應該設置為，

"homepage": "http://<<github-user-name>>.github.io/<<github-repo-name>>"

在您的情況下，將天氣更改為天氣應用程序，一切正常