Imgur 或 PlantNet API，适用于在本地主机上运行的网站，但部署在 Render 上时则不行

Question

我是使用 API、全栈应用程序和 JavaScript 的初学者，想使用 Imgur 的 API 上传图像并获取 URL，然后使用 PlantNet 的 API 来识别植物。该代码在本地主机上运行得很好，但是当部署在渲染器上时，会出现错误 503：内部服务错误，甚至没有给出我在调试时使用的任何控制台日志错误消息。我对该怎么做以及如何解决这个问题感到困惑。是 Imgur API 问题还是其他问题？

下面是我使用 JavaScript 的服务器端代码：

import 'dotenv/config';
import express from 'express';
import multer from 'multer';
import fetch from 'node-fetch';
import path from 'path';
import { fileURLToPath } from 'url';
import fs from 'fs';
import axios from 'axios';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

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

const uploadDir = path.join(__dirname, 'uploads');

if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir, { recursive: true });
    console.log('Uploads directory created:', uploadDir);
} else {
    console.log('Uploads directory exists:', uploadDir);
}

fs.access(uploadDir, fs.constants.W_OK, (err) => {
    if (err) {
        console.error(`Uploads directory is not writable: ${err}`);
    } else {
        console.log('Uploads directory is writable');
    }
});

const upload = multer({ dest: uploadDir });

app.use(express.static(path.join(__dirname, 'public')));

//GET request from PlantNet API
async function identifyPlant(project, imageUrl) {
    const apiKey = process.env.PLANTNET_API_KEY;
    const url = new URL(`https://my-api.plantnet.org/v2/identify/${project}`);

    url.searchParams.append('images', imageUrl);
    url.searchParams.append('organs', 'auto');
    url.searchParams.append('include-related-images', 'true');
    url.searchParams.append('no-reject', 'false');
    url.searchParams.append('lang', 'en');
    url.searchParams.append('type', 'kt')
    url.searchParams.append('api-key', apiKey);

    try {
        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });

        if (!response.ok) {
            throw new Error('Failed to fetch data');
        }

        const data = await response.json();
        console.log('Success:', JSON.stringify(data, null, 2));

        if (!Array.isArray(data.results)) {
            console.error('data.results is not an array:', data);
            return [];
        }

        const results = data.results.map(result => {
            const images = Array.isArray(result.images) ? result.images.map(image => image.url.o) : [];
            return {
                score: result.score,
                species: {
                    scientificName: result.species.scientificName,
                    genus: result.species.genus.scientificName,
                    family: result.species.family.scientificName,
                    commonNames: result.species.commonNames
                },
                images: images
            };
        });
        return results;
    } catch (error) {
        console.error('Error identifying plants:', error);
    }
}

// using Imgur API
async function uploadImage(imagePath) {
    const clientId = process.env.CLIENT_ID_IMGUR;

    try {
        const image = fs.readFileSync(imagePath, { encoding: 'base64'});
        console.log('Uploading image to Imgur')

        const response = await axios.post('https://api.imgur.com/3/image', {
            image: image,
            type: 'base64'
        }, {
            headers: {
                Authorization: `Client-ID ${clientId}`
            }
        }); 

        if (response.data && response.data.data && response.data.data.link) {
            console.log('Imgur API response:', response.data);
            return response.data.data.link;
        } else {
            throw new Error('Failed to get image link from Imgur');
        }
    } catch (error) {
        console.error('Error uploading image:', error);
        throw error;
    }
}


app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.post('/uploads', upload.single('image'), async (req, res) => {
    const project = 'all';

    const imagePath = req.file.path;
    console.log('Image received:', imagePath)

    try {
        const imageUrl = await uploadImage(imagePath);
        console.log('Image uploaded to Imgur:', imageUrl)

        const result = await identifyPlant(project, imageUrl);
        console.log('Plant identified:', result)

        fs.unlinkSync(imagePath);
        res.json(result);
    } catch (error) {
        console.log('Error in /uploads endpoint:', error);
        fs.unlinkSync(imagePath);
        res.status(500).send('Error identifying plant');
    }
});

app.listen(port, () => {
    console.log(`Server listening at http://localhost:${port}`);
});

再次，我尝试使用 console.log 消息来理解问题，但它们根本没有显示，我只得到 503: Internal service error, failed to upload image (这是我在另一个脚本中添加的另一条 console.log 消息如果我无法从 Imgur 得到正确的回应）。在本地主机上，一切正常，并且列出了植物标识。 如有任何帮助，我们将不胜感激。

Answer 1

确保在渲染中正确设置环境变量（CLIENT_ID_IMGUR 和 PLANTNET_API_KEY）。

• 渲染：检查渲染仪表板以确保环境 为您部署的服务正确设置变量。

验证您的渲染部署配置以确保其设置正确。这包括构建和启动命令、基本目录以及任何必要的构建脚本。