Question

这是我第一次尝试使用Express后端提供React应用程序以提交联系表。它可以在我的本地计算机上运行，但是无法使用Nginx服务器在ubuntu上提交表单。

前端React应用程序正常工作。

我尝试使用Nginx作为反向代理，以通过运行server.js的PM2为应用程序提供服务。

这是我的文件夹结构-

> React-project
  > backend
    - server.js
  > public
  > src
    - index.html

我已将PM2设置为进程管理器以运行server.js。

这是我的 server.js 代码，其凭据已更改-

app.get('/api', (req, res) => {
    res.send('welcome to my form')
});

app.post('/api/form', (req, res) => {

    let data = req.body
    let smtpTransport = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: "email@email.com",
            pass: "password"
        },
        tls: {
            rejectUnauthorized: false
        }
    });

    let mailOptions = {
        from: data.email,
        to: 'email@email.com',
        subject: `Message from ${data.firstName}`,
        html: `
        <h3>Informations</h3>
        <ul>
            <li>Name: ${data.firstName}</li>
            <li>Lastname: ${data.lastName}</li>
            <li>Email: ${data.email}</li>
        </ul>
    
        <h3>Message</h3>
        <p>${data.message}</p>
        
        `
    }
    smtpTransport.verify(function (error, success) {
        if (error) {
            console.log(error);
        } else {
            console.log("Server is ready to take our messages");
        }
    });
    smtpTransport.sendMail(mailOptions, (error, response) => {

        if (error) {
            res.send(error);
        }
        else {
            res.send('Success');
            console.log('success');
        }

    })

    smtpTransport.close();
})



const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`server is running on port ${PORT}`);
});

前端反应代码，用于使用Axios在React中提交电子邮件-

axios.post("/api/form", data)
        .then(res=>{
            this.setState({
                sent: true,

            }, this.resetForm())
        }).catch((err)=> {
            console.log("message not sent " + err);
        });

这是我的Nginx网站可用的配置文件-

server {
        listen 80;
        server_name websitename.com www.websitename.com 11.11.111.111;
        
        location /api {
         proxy_pass https://11.11.111.111:5000;
         proxy_http_version 1.1;
         proxy_set_header Host $host;
         proxy_cache_bypass $http_upgrade;
        }

        location / {
         root /home/username/react-project/build;
         index index.html index.html;
         try_files $uri/ /index.html;

         access_log /var/log/nginx/front.out.log;
         error_log /var/log/nginx/front.err.log;
        } 

        #certbot code block --
}

我必须承认我对该配置文件上的行的含义了解很少。我从教程和stackoverflow问题中查看了它，并尝试对其进行调整。

在具有Nginx服务器和PM2的Ubuntu上通过React前端服务Express后端

0 个答案: