我正在部署我的第一个Node. js/ React / MySQL应用程序。我决定将它部署在Hostinger的VPS服务器上（第一次使用VPS）。我按照一些教程使用Nginx设置服务器。我克隆了我的仓库，构建了前端，现在前端和后端都在线了，但是它们不能一起通信（从客户端到服务器的每个请求都返回404错误）。
在开发过程中，一切都运行良好。我使用Axios来发出获取请求。他们通过代理进行通信（“代理”：frontend的package.json中的“http：//localhost：4000”。我在生产中删除了这条线）
My Nginx config for backend：

server {
        server_name api.mywebsite.com www.api.mywebsite.com;

        location / {
        proxy_pass http://127.0.0.1:4000;
        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;
        }
}

对于前端：

server {
        listen 80;
        listen [::]:80;

        root /var/www/mywebsite/frontend/build;
        index index.html index.htm;

        server_name shop.mywebsite.com www.shop.foryoumaquillage.fr;

        location / {
                try_files $uri $uri/ =404;
        }
}

这些配置位于不同的文件中，位于/etc/nginx/sites-available文件夹中，并链接到/etc/nginx/sites-enabled/文件夹。我试着把配置放在一个唯一的文件中，但它不起作用。
这里是我的前端包.json：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@paypal/react-paypal-js": "^8.1.1",
    "@redux-devtools/extension": "^3.2.5",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "ag-grid-community": "^30.0.3",
    "ag-grid-react": "^30.0.4",
    "axios": "^1.4.0",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.5",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-image-gallery": "^1.2.11",
    "react-multi-carousel": "^2.8.4",
    "react-redux": "^8.1.1",
    "react-router-bootstrap": "^0.26.2",
    "react-router-dom": "^6.11.1",
    "react-select": "^5.7.3",
    "react-simple-star-rating": "^5.1.7",
    "recharts": "^2.6.2",
    "rsuite": "^5.33.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "set PORT=3005 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

backend的package.json：

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server-prod": "node server.js",
    "server-dev": "npx nodemon server.js",
    "client": "npm start --prefix ../frontend",
    "dev": "concurrently --kill-others-on-fail \"npm run server-dev\" \"npm run client\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "express-fileupload": "^1.4.0",
    "express-rate-limit": "^6.8.1",
    "helmet": "^7.0.0",
    "jsonwebtoken": "^9.0.0",
    "mysql2": "^3.3.3",
    "node-fetch": "^2.6.12",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "concurrently": "^8.2.0",
    "nodemon": "^2.0.22"
  }
}

我尝试的内容：

我尝试使用以下命令更改Axios配置：

import axios from 'axios';

export const AxiosRequest = axios.create({
  baseURL: process.env.API_URL,
});

我对所有的获取请求都使用AxiosRequest（API_URL=http：//127.0.0.1：4000）
我安装了cors（我在开发中没有使用）来尝试解决我的问题，但它不起作用。目前，它允许来自任何地方的请求。app.use(cors())
我试着改变Nginx的配置遵循旧的Stackoverflow解决方案（例如让我的后端监听3005），但没有工作（通常我尝试的更改只是让我的API无法访问.）。
如前所述，这是我第一次部署像这样的“复杂”应用程序，也是我第一次使用vps / nginx。所以我可能在代码或设置Nginx服务器时犯了一个新手错误

编辑

关于我如何部署应用程序的详细说明：我通过hostinger购买了域名，并创建了2个DNS记录：两者都是类型A，指向相同的IP地址，TTL为14400。一个名为api.mywebsite.com，另一个名为shop.mywebsite.com（名称是唯一的区别）。
在我的服务器上，在目录/var/www/中，我为应用程序创建了一个新目录，在其中我有后端目录和前端目录。