如何将 React 前端和 Node 后端部署到生产环境中? (不是 Heroku)

时间:2021-02-17 15:33:10

标签: node.js reactjs heroku deployment production-environment

我想部署一个应用程序,它有一个联系表单,一旦表单提交,该表单使用 Nodemailer 发送电子邮件。前端在 React 中,提交后它会向 Node.js 中的后端发送 axios 请求。在本地主机上它完美运行。此外,我已经成功地将整个应用程序部署到 Heroku(前端和后端),但是我想将此应用程序(或者更确切地说是网站)部署到具有我的域名的普通托管帐户。是否有可能?提前致谢!

这是我在 app.js 中的后端服务器。

const express = require("express")
const app = express()
const PORT = process.env.PORT || 5000
require("dotenv/config")
const cors = require("cors")
const nodemailer = require("nodemailer")

app.listen(PORT, () => {
  console.log("Server running on port: " + PORT);
})

app.use(express.urlencoded({extended:true}))
app.use(express.json())
app.use(cors()) 

app.get("/", (req,res) => {
  console.log("app is working");
})

app.post("/", async (req,res) => {
  console.log(("Form submittet"));
  console.log(req.body);
  const {imeiprezime,predmet,poruka} = req.body  
  try {
    const pitanje = [imeiprezime,predmet,poruka]
    console.log(pitanje);
    await res.status(201).json({pitanje})
    let transporter = nodemailer.createTransport({
      host: "smtp-mail.outlook.com",
      port: 587,
      secure: false, // true for 465, false for other ports
      auth: {
        user: "mislav0508@hotmail.com", 
        pass: process.env.EMAIL_PASS, 
      },
      tls: {
        rejectUnauthorized:false
      }
    });  
    // send mail with defined transport object
    let info = await transporter.sendMail({
      from: '"Mislav Crnkovic" <mislav0508@hotmail.com>', // sender address
      to: `mislav0508@hotmail.com`, // list of receivers
      subject: `Contact form: ${predmet}`, 
      html: `
      <p>Ime i prezime: ${imeiprezime}</p>                    
      <p>Predmet: ${predmet}</p>                    
      <p>Poruka: ${poruka}</p> 
      `, // html body
    }); 
    console.log("Message sent: %s", info.messageId);   
    console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
  } catch (error) {
    res.status(400)
    console.log(error)
  }
})

这是我在 React 中的前端函数:

const handleSubmit = async (e) => {
    e.preventDefault()    
    if(data.imeiprezime && data.predmet && data.poruka){
      await axios.post("http://localhost:5000/", data) //change URI when deploying app.
      .then((result) => {
        const pitanje = result.data.pitanje
        console.log(pitanje);
        alert("Hvala vam na upitu!")        
      })
      .catch(err => console.log(err))    
      setData({imeiprezime:"",predmet:"",poruka:""})      
    }else{
      console.log("please fill out required fields");
      alert("Molimo popunite sva polja")
    }
  }

0 个答案:

没有答案