如何在 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>>"

在您的情况下，将天气更改为天气应用程序，一切正常