如何将React应用程序托管到常规域？ （例如http://somedomainnamehere.com/）

Question

我有一个要托管的静态React应用程序。我也有一个可用的域，例如http://somedomainnamehere.com/。我是React和Web托管的新手。我查看了一些教程，并尝试将homepage属性添加到package.json，但这是行不通的。

package.json

{
  "name": "my-portfolio",
  "version": "0.1.0",
  "homepage": "http://somedomainnamehere.com/",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

运行npm run build命令后，显示的消息为该项目是在假定托管于/的情况下构建的。

有人可以帮助我了解我在这里想念的东西吗？还有其他方法来托管我的应用程序吗？

Answer 1

在您的package.json文件中，更改

"homepage": "http://somedomainnamehere.com/"

到

"homepage": "."

然后，您可以再次运行npm run build。 请参阅this question.

此后，您几乎可以将build文件夹的内容放置在任何主机中。

• 如果您拥有共享的托管帐户，则可以将其直接放入 public_html文件夹。
• 如果您有Heroku，则可以关注 部署诸如this tutorial之类的静态页面的教程。
• Github Pages也是托管新项目的好地方和免费场所。

希望这会有所帮助。