【问题标题】:How to change React Base URL from localhost to my custom domain如何将 React Base URL 从本地主机更改为我的自定义域
【发布时间】:2023-01-09 20:15:11
【问题描述】:

我刚刚创建了我的反应应用程序,一切都在我的本地主机上工作,也通过我配置的 API 连接到后端应用程序,现在我只是在运行yarn run build 后将我的反应应用程序部署到 nginx 服务器,并将构建文件夹上传到我的服务器根目录目录。主页已提供服务,其他不需要连接到服务器的页面也已提供服务,但是当我尝试登录时出现错误,从错误中我意识到我的应用程序正在向http://localhost:3000/v1/auth/login而不是@987654323发送请求@ 如何在构建我的 React 应用程序之前进行此更改。下面是我的 package.json 文件

{
  "name": "mysite",
  "version": "0.1.0",
  "private": true,
  "proxy": "https://api.mysite.com",
  "dependencies": {
    "@date-io/dayjs": "^2.16.0",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.10.2",
    "@mui/material": "^5.10.17",
    "@mui/x-date-pickers-pro": "^5.0.12",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "jquery": "^3.6.0",
    "mdb-react-ui-kit": "^4.1.0",
    "moment": "^2.29.4",
    "popper.js": "^1.16.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-bootstrap-submenu": "^2.0.0",
    "react-countdown": "^2.3.5",
    "react-dom": "^18.2.0",
    "react-fontawesome": "^1.7.1",
    "react-icons": "^4.4.0",
    "react-image-gallery": "^1.2.9",
    "react-loading-skeleton": "^3.1.0",
    "react-phone-number-input": "^3.2.9",
    "react-pro-sidebar": "^1.0.0-alpha.7",
    "react-redux": "^8.0.2",
    "react-responsive": "^9.0.0-beta.10",
    "react-responsive-carousel": "^3.2.23",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "react-select": "^5.6.1",
    "react-simple-star-rating": "^4.0.5",
    "react-slick": "^0.29.0",
    "redux": "^4.2.0",
    "semantic-ui-react": "^2.1.3",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.5",
    "sweetalert": "^2.1.2",
    "swiper": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
    "@expo/webpack-config": "^0.17.2",
    "react-error-overlay": "6.0.9"
  },
  "resolutions": {
    "styled-components": "^5",
    "//": "See https://github.com/facebook/create-react-app/issues/11773",
    "react-error-overlay": "6.0.9"
  }
}

【问题讨论】:

  • 你在 NGINX 中尝试过反向代理吗
  • @SanuKhan 不,我没有,我认为这应该是反应问题,应该在构建之前修复,但我不知道该怎么做
  • 您正在使用 fetch 或 axios 调用您的 api?如果是,您可能需要在构建之前更改您的基本网址
  • @SanuKhan 我使用 axios 并且我已经更改了我的基本 URL

标签: javascript reactjs frontend react-scripts


【解决方案1】:

代理仅适用于开发服务器,不适用于生产环境。您必须创建一个 env 文件并改用它。以下是您的操作方式:

// .env
REACT_APP_APP_HOST='https://api.mysite.com'

process.env.REACT_APP_APP_HOST // use this to access your api

【讨论】:

  • 这听起来很有趣,所以我想在哪个目录中将这个 .env 文件与 package.json 文件一起添加到我的 React 应用程序的根目录中,或者这个 .evn 文件应该在哪里?
  • 是的,与 package.json 一起位于根目录
猜你喜欢
  • 2018-01-12
  • 1970-01-01
  • 1970-01-01
  • 2020-11-14
  • 1970-01-01
  • 2014-10-12
  • 2013-07-22
  • 1970-01-01
  • 2016-10-11
相关资源
最近更新 更多