如何在create react应用程序中部署使用express制作的api

npx create-react-app my-app
cd my-app

mkdir api
cd api

npm init -y
npm install express

const express = require('express');
const router = express.Router();

router.get('/api/data', (req, res) => {
  // 处理API请求并返回数据
  const data = { message: 'Hello from API!' };
  res.json(data);
});

module.exports = router;

const express = require('express');
const apiRouter = require('./api');

const app = express();
const port = 5000;

app.use(apiRouter);

app.listen(port, () => {
  console.log(`API server is running on port ${port}`);
});

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000', // Express API的地址
});

export const fetchData = async () => {
  try {
    const response = await api.get('/api/data');
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    return null;
  }
};

import React, { useEffect, useState } from 'react';
import { fetchData } from './api';

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchDataAsync = async () => {
      const result = await fetchData();
      setData(result);
    };

    fetchDataAsync();
  }, []);

  return (
    <div>
      {data ? (
        <p>{data.message}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default App;

npm run build