React 应用部署 Plesk 遇到 404 和 500 错误怎么办？

2024-07-24 22:13:51

React 应用部署 Plesk 遇到 404 和 500 错误？这份指南帮你解决！

你兴致勃勃地将 React 应用部署到 Plesk 服务器，准备大展身手，却迎头碰上了 404 "endpoint not found" 和 500 "server not found" 错误？别灰心，你不是一个人！很多开发者在将 React 应用部署到 Plesk 并连接 MySQL 数据库时都会遇到类似问题。本文将为你解析这些错误背后的原因，并提供详细的解决方案，帮你扫清障碍，顺利完成部署。

深入剖析 404 和 500 错误

在开始解决问题之前，我们先来了解一下这两个错误代码究竟意味着什么：

404 错误 : 这个错误代码表示你的 React 前端应用无法找到后端 API 的路由。简单来说，就是前端发出的请求迷路了，后端服务器无法理解它想要什么。
500 错误 : 这个错误代码通常意味着你的后端服务器遇到了问题，它可能无法正常启动，也可能无法处理前端的请求。如果你看到 Phusion Passenger 报错，那基本可以确定是后端服务器出了问题。

抽丝剥茧，解决部署难题

了解了错误代码的含义，接下来我们就要找出问题根源并逐一解决。以下是一些常见的错误来源和相应的解决方案：

1. 数据库连接：你的应用能否找到数据库？

首先，我们需要检查你的 React 应用后端代码是否正确配置了数据库连接信息。这些信息通常包括：

数据库地址：Plesk 提供的数据库地址通常是 localhost:3306。
数据库端口：默认为 3306。
数据库名：你需要将占位符替换为你自己创建的数据库名称。
用户名：你需要使用你创建的数据库用户名。
密码：你需要使用你设置的数据库密码。

代码示例 :

const mysql = require('mysql2');

const connection = mysql.createConnection({
  host: 'localhost',
  port: 3306,
  user: 'your_db_user', // 替换为你的数据库用户名
  password: 'your_db_password', // 替换为你的数据库密码
  database: 'your_db_name' // 替换为你的数据库名称
});

connection.connect((err) => {
  if (err) {
    console.error('Error connecting to database:', err);
    return;
  }
  console.log('Connected to the database!');
});

2. API 路由：你的前端和后端是否步调一致？

接下来，我们需要检查你的后端 API 路由是否与前端请求的路径一致。例如，如果你的 React 前端发送了一个请求到 /api/users 来获取用户列表，那么你的后端也需要在 /api/users 路径上定义一个相应的路由来处理这个请求。

代码示例 :

const express = require('express');
const app = express();

app.get('/api/users', (req, res) => {
  // 从数据库获取用户列表
  connection.query('SELECT * FROM users', (err, results) => {
    if (err) {
      console.error('Error fetching users:', err);
      res.status(500).send('Error fetching users');
      return;
    }
    res.json(results);
  });
});