如何在 Netlify 中构建/部署 Node.js Express？没有404错误

Question

我在后端使用node.js + Express开发了一个url缩短器，并在前端做出反应。

在本地工作正常，但在 Netlify 上构建时，项目返回错误 404 并且无法工作。

此类项目有正确的构建配置吗？

下面是后端代码

   const express = require('express');
   const shortid = require('shortid');
   const cors = require('cors');
   const { resolve } = require('url');
   const app = express();
   const PORT = 5000;
   require('dotenv').config();
   const urlDatabase = {};

   const corsOptions = {
      origin: '*',
      methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
      credentials: true,
      optionsSuccessStatus: 204,
    };
    
   app.use(cors(corsOptions));

   app.use(express.json());

   app.post('/shorten', (req, res) => {
   const { originalUrl } = req.body;
   const shortCode = shortid.generate();
   const shortUrl = `${process.env.BACKEND_URL}/${shortCode}`;

   urlDatabase[shortCode] = originalUrl;

   res.json({ shortUrl });
   });

   app.get('/:shortCode', (req, res) => {
   const { shortCode } = req.params;
   const originalUrl = urlDatabase[shortCode];

   if (originalUrl) {
      res.redirect(originalUrl);
   } else {
      res.status(404).json({ error: 'URL not found' });
   }
   });

   app.listen(PORT, () => {
   console.log(`Server is running on '${process.env.BACKEND_URL}:${PORT}'`);
   });

还有前端

import React, { useState } from 'react';
import axios from 'axios';
import { Form, Button, Alert } from 'react-bootstrap';
import './App.css';

const App = () => {
  const [originalUrl, setOriginalUrl] = useState('');
  const [shortenedUrl, setShortenedUrl] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const shortenUrl = async () => {
    try {
      if (!originalUrl) {
        setErrorMessage('Por favor, digite uma URL válida.');
        setShortenedUrl('');
      } else {
        console.log('Backend URL:', process.env.REACT_APP_BACKEND_URL);
        const response = await axios.post(`${process.env.REACT_APP_BACKEND_URL}/shorten`, {
          originalUrl,
        });
        
        setShortenedUrl(response.data.shortUrl);
        setErrorMessage('');
      }
    } catch (error) {
      console.error('Error shortening URL:', error);
      setErrorMessage('Ocorreu um erro ao encurtar a URL. Tente novamente.');
      setShortenedUrl('');
    }
  };

  return (
    <div className="App">
      <div className="container">
        <h1>Encurtador de Link</h1>
      </div>
      <Form className='form'>
        <Form.Group controlId="formOriginalUrl" className='form-url-original'>
          <Form.Label className='text-url'>Insira o Link Original</Form.Label>
          <Form.Control
            className='input'
            type="url"
            placeholder="Digite o Link original"
            value={originalUrl}
            onChange={(e) => setOriginalUrl(e.target.value)}
          />
        </Form.Group>

        <Button variant="primary" className='btn-url-original' onClick={shortenUrl}>
          Encurtar Link
        </Button>
      </Form>

      {errorMessage && <Alert variant="danger" className="mt-3 new-url">{errorMessage}</Alert>}

      {shortenedUrl && !errorMessage && (
        <div className="mt-3 new-url">
          <p>Seu Novo Link</p>
          <a href={shortenedUrl} target="_blank" rel="noopener noreferrer">
            {shortenedUrl}
          </a>
        </div>
      )}
    </div>
  );
};

export default App;

环境变量设置正确。

但是，当访问后端 url 时，它不会返回任何内容，所以我相信错误出在 Netlify 构建配置中，有人可以帮助我吗？

注意：我是前端开发者和后端初学者

我已经尝试了一切，但我不知道还能尝试什么

Answer 1

您看过本指南吗？ 它解释了 Netlify 上出现意外 404 的所有可能原因，包括可能的罪魁祸首：https://answers.netlify.com/t/support-guide-i-ve-deployed-my-site-but-i-still-see -页面未找到/125

如果没有所有相关详细信息，很难确定您的情况是什么（供将来参考：链接到您的公共构建日志是理想的选择，因此我们可以确保您的部署实际上成功并找出您的函数名称是什么；它还可能显示您是否已经使用 rexdirect 规则完成了我在下面建议的操作）。

我建议指南中最有可能成为您的直接原因的是有序列表中的#2，即确保您的应用程序将所有没有特定文件的流量路由到您的路由器。 在示例中，它讨论了路由到

/index.html

，但我认为您可能想要路由到您的函数，我不确定其路径（它将是

/.netlify/functions/thenameyouchose

）。 在

_redirects

文件中看起来像这样：

/* /.netlify/functions/thatname 200

...或者像这样在

netlify.toml

文件中：

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/thatname"
  status = 200
  force = false

请注意，在这两种情况下，我假设您可能有其他资产，例如

/logo.png

，您希望将其用作静态资产，因此我没有像 netlify 文档中所讨论的那样“强制”重定向：https://docs .netlify.com/routing/redirects/redirect-options/#force-redirects

Answer 2

我对那些不断收到此错误的人的建议： 尝试手动上传代码

-在项目的终端上运行命令“npm run build” -仅获取“build”文件夹并将其上传到新的 netlify 站点 -不客气