Получение с сервера localhost в приложении Create React во время разработки и выборка из развертывания во время производства - PullRequest
Новая
       185

Получение с сервера localhost в приложении Create React во время разработки и выборка из развертывания во время производства

1 голос
/ 14 июля 2020

Это личная страница портфолио, внутри которой я реализую контактную форму, используя nodemailer.

Все настройки nodemailer настраиваются на стороне сервера. Мне просто нужен совет, как указать правильное место в почтовом запросе клиента с точки зрения разработки и развертывания.

Я рассчитал, что это необходимо для установки переменной среды для производства и разработки и выполнения выборки на основе этого. Теперь мне просто интересно, как go найти все, что я бы поместил в выборку для производства.

будет ли это просто указание на мое собственное приложение: fetch(www.mydomain.com/send-email, data) ...

I Я нахожусь в документации Heroku, пытаясь понять это.

По сути, у меня есть огромное слепое пятно, которое поражает API сервера из приложения Create React, которое не запускается независимо на localhost: 3000. Мне еще предстоит попасть на серверный маршрут от моего клиента, который не обслуживается локально на localhost. Когда я отправляю sh это в Heroku, мне нужен правильный маршрут или конфигурация, мне нужен совет, как это сделать.

Я немного понимаю проксирование. Просто интересно, какие шаги нужно предпринять, чтобы правильно попасть на мой серверный маршрут с клиента / сервера, развернутого на Heroku, в отличие от localhost: 3000 во время развертывания.

Когда я нахожусь в разработке, я почти всегда топчу ios. опубликуйте сервер, который я развернул на 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}!`);
});

структура папок выглядит так: 

main
 |-server
  |-server.js
 |-src
  |-components
    |-Contact.js

1 Ответ

0 голосов
/ 14 июля 2020

Используйте переменную process.env.NODE_ENV, чтобы различать среды.

Когда вы запускаете npm start, он всегда равен 'development', когда вы запускаете npm test, он всегда равен 'test', а когда вы запускаете npm run build для создания производственного пакета, он всегда равен 'production'. Вы не можете переопределить NODE_ENV вручную .

Таким образом, вы можете создать и экспортировать такую ​​функцию, как 

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
}

Подробнее см. https://create-react-app.dev/docs/adding-custom-environment-variables/

...