我正在部署我的第一个 Node.js / React / MySQL 应用程序。我决定将其部署在 Hostinger 的 VPS 服务器上（我第一次使用 VPS）。 我按照一些教程使用 Nginx 设置服务器。我克隆了我的存储库，构建了前端，现在前端和后端都在线，但它们不会一起通信（从客户端到服务器的每个请求都会返回 404 错误。）
后端（带有一些可访问的资源）：http://api.foryoumaquillage.fr/api/categories
前端：http://shop.foryoumaquillage.fr/ （在网络选项卡中，您可以看到对获取“类别”的调用，该调用返回 404。它尝试访问的类别是我上面的后端链接中可访问的类别）
在开发过程中一切正常。我使用 Axios 发出获取请求。他们通过代理进行通信（前端的 package.json 中的“proxy”：“http://localhost:4005”。我在生产中删除了这一行）
我的 Nginx 后端配置：
server {
server_name api.foryoumaquillage.fr www.api.foryoumaquillage.fr;
location / {
proxy_pass http://127.0.0.1:4005;
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/oscar-ecommerce/frontend/build;
index index.html index.htm;
server_name shop.foryoumaquillage.fr www.shop.foryoumaquillage.fr;
location / {
try_files $uri $uri/ =404;
}
}
这些配置位于不同的文件中，位于 /etc/nginx/sites-available 文件夹中，并链接到 /etc/nginx/sites-enabled/ 文件夹。我尝试将配置放入一个唯一的文件中，但它不起作用。
有关信息，这里是我的前端 package.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"
]
}
}
和后端的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:4005)
我安装了cors（我在开发中没有使用它）来尝试解决我的问题，但它不起作用。目前它允许来自任何地方的请求。
app.use(cors())我尝试按照旧的 Stackoverflow 解决方案更改 Nginx 配置（例如让我的后端监听 3005），但没有任何效果（通常我尝试的更改只会使我的 api 无法访问......）。
正如我所说，这是我第一次部署像这样的“复杂”应用程序，也是我第一次使用 vps / nginx。所以我可能在我的代码或设置我的 Nginx 服务器中犯了一个菜鸟错误
cUrl其他一些想法：
我的前端和 API 在同一台服务器上运行，只有一个 nginx。默认 nginx（端口 80）的根目录是客户端分发的根目录，任何指向
/api我像这样设置我的 nginx
proxy-passproxy_pass http://nodejs;
与
serverupstream upstream nodejs {
server 127.0.0.1:8081;
keepalive 256;
keepalive_timeout 300s;
}