在 Digitalocean 上使用 nginx 部署 Express 服务器和 React JS

Question

这是我第一次在 DO 上使用 Nginx 部署 Expressjs 和 Reactjs。我能够将前端设置为从互联网访问，但我在后端遇到问题。我已经看过多个问题、视频、指南，但仍然挣扎了一个星期。希望能得到一些见解！非常感谢。

测试站点链接：www.simpletodo.xyz

我主要遵循的指南链接：https://gist.github.com/sjosephrw/5bc7efbf4c332070165c61dba253288d

App.js（相关位）

<button
    onClick={(e) => {
        e.preventDefault();

        fetch('https://www.simpletodo.xyz/backend/test')
            .then((res) => res.json())
            .then((res) => setTest(res))
            .catch((err) => console.log(err));
    }}>
    Test Backend
</button>
{test && <div>{test.text}</div>}

server.js (node/express)

const express = require('express');
const app = express();
const PORT = 4000;
const cors = require('cors');

app.use(cors());

app.get('/test', (req, res) => {
    console.log('is it gonna work??')
    res.json({ text: 'Broooo it works!!!!' });
});

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

< strong>/etc/nginx/sites-available/simpletodo.xyz.conf

server{
        #Path to React front end
        root /var/www/html/simpletodo.xyz;

        #Main html file
        index index.html;

        #Server name
        server_name simpletodo.xyz www.simpletodo.xyz;

        #Store access log files
        access_log /var/log/nginx/simpletodo.xyz.access.log;

        #Store error log
        error_log /var/log/nginx/simpletodo.xyz.error.log;

        location / {
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /backend/ {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://127.0.0.1:4000;
                proxy_ssl_session_reuse off;
                proxy_set_header Host $http_host;
                proxy_cache_bypass $http_upgrade;
                proxy_redirect off;
        }
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/simpletodo.xyz/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/simpletodo.xyz/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server{
    if ($host = www.simpletodo.xyz) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = simpletodo.xyz) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
        listen 80;
        listen [::]:80;
        server_name simpletodo.xyz www.simpletodo.xyz;
    return 404; # managed by Certbot
}

前端和后端都在使用pm2

Netstat 输出显示后端正在端口 4000 上运行

/var/log/nginx/log