EC2上React+Flask（Vite）生产环境部署出现404错误

现象 #

• 执行npm run dev时前端后端联动正常，Flask后端单独运行也正常
• 执行npm run build和npm run preview时出现错误
• 直接访问EC2公网URL时显示异常页面
• 访问EC2公网URL/api/hello时，控制台报错且页面返回404提示：

Not Found
The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

代码文件 #

app.py

from flask import Flask, jsonify
from flask_cors import CORS
import logging
from logging.handlers import RotatingFileHandler
import os

app = Flask(__name__)
CORS(app)

# Set up logging
if not os.path.exists('logs'):
    os.mkdir('logs')
file_handler = RotatingFileHandler('logs/myapp.log', maxBytes=10240, backupCount=10)
file_handler.setFormatter(logging.Formatter(
    '%(asctime)s %(levelname)s: %(message)s [in %(pathname)s:%(lineno)d]'
))
file_handler.setLevel(logging.INFO)
app.logger.addHandler(file_handler)
app.logger.setLevel(logging.INFO)
app.logger.info('MyApp startup')

@app.route('/')
def hellodefault():
    app.logger.info('Hello endpoint was accessed')
    return jsonify(message="Hello from default Flask Route!")

@app.route('/api/hello')
def hello():
    app.logger.info('Hello endpoint was accessed')
    return jsonify(message="Hello from Flask!")

if __name__ == '__main__':
    app.run(debug=True)

App.jsx

import { useState, useEffect } from 'react'
import axios from 'axios'
import './App.css'

function App() {
  const [message, setMessage] = useState('')

  useEffect(() => {
    const apiUrl = `${import.meta.env.VITE_API_URL}/api/hello`;
    console.log('VITE_API_URL:', import.meta.env.VITE_API_URL);
    axios.get(apiUrl)
      .then(response => setMessage(response.data.message))
      .catch(error => console.error('Error:', error))
  }, [])

  return (
    <div className="App">
      <h1>{message}</h1>
    </div>
  )
}

export default App

环境变量文件

• .env.development：VITE_API_URL=http://127.0.0.1:5000
• .env.production：VITE_API_URL=http://ec2-xxx-amazon.com

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

内容的提问来源于stack exchange，提问作者alexis alvarez