如何将React API服务点指向我的域名而不是localhost:8000。

huangapple go评论64阅读模式
英文:

How can I point the react api service point to hit my domain rather than localhost:8000

问题

我已经在Vultr服务器上部署了我的React应用,并在服务器上安装了nginx并通过运行以下命令配置了下面的设置。

$ sudo nano /etc/nginx/sites-available/default

server {

    listen 80;
    server_name somedomain-test.com www.somedomain-test.com;
    root /var/www/somedomain-test.com/build;
    index index.html;
}

我运行了npm run build,并将生成的文件夹复制到以下目标文件夹/var/www/automateandmore.com/build

然后运行了以下命令:

$ sudo nginx -t
$ sudo systemctl restart nginx

我能看到前端。现在我已经从文件夹位置src/启动了server.js,但我仍然能看到它正在调用localhost:8000/service/listofblogs。我应该如何解决这个问题,有人可以给予建议吗?

这是我的package.json设置。

{
  "name": "myblogs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    .....
  },
  "proxy": "http://localhost:8000",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ....
}

.env 文件

DANGEROUSLY_DISABLE_HOST_CHECK=true
REACT_APP_URL=http://somedomain-test.com
英文:

I have deployed my react app in Vultr server and installed nginx in server and configured the below settings by running below command.

$ sudo nano /etc/nginx/sites-available/default

server {

    listen 80;
    server_name somedomain-test.com www.somedomain-test.com;
    root /var/www/somedomain-test.com/build;
    index index.html;
}

I did ran npm run build and copied the build folder into the following destination folder /var/www/automateandmore.com/build

Then ran below commands:

$ sudo nginx -t
$ sudo systemctl restart nginx

I able to see the front end. Now I have started the server.js from the folder location src/ but still I can see it is calling localhost:8000/service/listofblogs:
How do i fix the issue, could someone please advise ?

This is my package.json settings

{
  "name": "myblogs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    .....
     
  },
  "proxy": "http://localhost:8000",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
    ....
  }
}

.env file

DANGEROUSLY_DISABLE_HOST_CHECK=true
REACT_APP_URL=http://somedomain-test.com

答案1

得分: 5

"If I read the docs correctly, you have it backwards. See Proxying API Requests in Development

To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json, for example:

"proxy": "http://localhost:4000",

But you say "rather than localhost:8000", but that is the url your proxy is giving the app.

Change it to the url you want to hit."

英文:

If I read the docs correctly, you have it backwards. See Proxying API Requests in Development

> To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json, for example:
>
> js
> "proxy": "http://localhost:4000",
>

But you say "rather than localhost:8000", but that is the url your proxy is giving the app.

Change it to the url you want to hit.

huangapple
  • 本文由 发表于 2023年4月17日 09:14:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76031110.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定