Reactjs 在开发期间从CreateReact应用程序中的localhost服务器获取与在生产期间从部署获取

这是一个个人投资组合页面，我正在其中使用NodeEmailer实现一个联系人表单

NodeEmailer的事情都是从服务器端设置的。我只是需要一些关于将客户端post请求指向开发和部署的正确位置的建议

我在为生产与开发设置一个环境变量，并在此基础上进行获取时也考虑了同样的问题。现在我只是想知道如何着手寻找我将投入生产的任何东西

是否只是指向我自己的应用程序：

fetch（www.mydomain.com/send-email，data）.

我在Heroku医生那里想弄清楚这件事

基本上，我有一个巨大的盲点，那就是使用CreateReact应用程序的服务器API，该应用程序不是在localhost:3000上独立启动的。我还没有从我的客户机找到一个本地主机上没有提供服务的服务器路由。当我把这个推给Heroku时，我需要有正确的路由或配置，我需要的是一些关于如何做到这一点的建议

我对代理有些了解。只是想知道在部署过程中，从部署在Heroku上的客户机/服务器（而不是localhost:3000）正确点击我的服务器路由的步骤是什么

当我在开发时，我几乎总是使用axios.post，在localhost上启动一台服务器：3000， 然后我从我的客户那里得到了类似的东西

axios.post('localhost:3000/send-email', data)
      .then( () => {
        setSent(true) 
      })
      .then(() => {
        resetForm()
      })
      .catch((err)=> {
        console.log('Message not sent', err)
      })
  }

…然后由express服务器上的端点在localhost:3000上进行处理，这看起来有点像我在下面粘贴的内容

const express = 
  require('express'), 
  bodyParser = require('body-parser'), 
  nodemailer = require('nodemailer'), 
  cors = require('cors'), path = require('path'), 
  port = process.env.PORT || 3000, publicPath = path.join(__dirname, '..', 'build');
require('dotenv').config();
const app = express();

app.use(cors());
app.use(express.static(publicPath));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('*', (req, res) => {
  res.sendFile(path.join(publicPath, 'index.html'));
});

app.post('/send-email', (req, res) => {
  console.log('request: ', req.body)
  let data = req.body;
  let transporter = nodemailer.createTransport({
    service: 'gmail',
    port: 465,
    auth: {
      user: process.env.EMAIL,
      pass: process.env.PASSWORD
    }
  });

  let mailOptions = {
    from: data.email,
    to: process.env.EMAIL,
    subject: `${data.subject}`,
    html: `<p>${data.name}</p>
            <p>${data.email}</p> 
            <p>${data.message}</p>`
  };

  transporter.sendMail(mailOptions,
  (err, res) => {
    if(err) {
      res.send(err)
    } else {
      res.send('Success')
    }
    transporter.close();
  });
})

app.listen(port, () => {
  console.log(`Server is up on port ${port}!`);
});

---

使用

process.env.NODE\u env

变量来区分不同的环境

当您运行

npm start

时，它始终等于

'development'

，当您运行

npm test

时，它始终等于

'test'

，当您运行

npm run build

以生成生产包时，它始终等于

'production'

无法手动覆盖

节点环境

因此，您可以创建并导出如下函数

export function apiDomain() {
    const production = process.env.NODE_ENV === 'production'
    return production ? 'anotherDoman' : 'localhost:3000'
}

或者，根据您的要求

export function apiDomain() {
    const { protocol, hostname, origin } = window.location
    return hostname === 'localhost' ? `${protocol}//${hostname}` : origin
}

---

有关更多详细信息，请参阅

谢谢，我根据环境变量设置了它。查看编辑…“它是否只是指向我自己的应用程序：fetch（www.mydomain.com/send-email，data）…”

export function apiDomain() {
    const { protocol, hostname, origin } = window.location
    return hostname === 'localhost' ? `${protocol}//${hostname}` : origin
}