在 Vercel 部署随机图 API

在本文中，将详细介绍如何在 Vercel 平台上部署一个具有分类功能的随机图片 API。通过这个 API，用户可以根据不同的分类获取随机图片链接，并且还可以从所有分类中随机获取一张图片。

项目结构

首先，我们需要确定项目的目录结构，如下所示：

random-image-api/
├── api/
│   ├── meinv.txt
│   ├── dongman.txt
│   ├── randomImage.js
├── public/
│   ├── index.html
│   ├── favicon.ico
├── package.json
└── vercel.json

1. 准备分类文本文件

在 api 目录下创建 meinv.txt 和 dongman.txt 文件，并在每个文件中添加图片链接，每行一个链接。例如：

当然你也可以自己创建新分类，只要格式为.txt就行

meinv.txt：

https://example.com/meinv1.jpg
https://example.com/meinv2.jpg

dongman.txt：

https://example.com/dongman1.jpg
https://example.com/dongman2.jpg

2. 创建 `randomImage.js`

在 api 目录下创建 randomImage.js 文件，并添加以下代码：

const express = require('express');
const fs = require('fs');
const path = require('path');
const cors = require('cors');

const app = express();

// 使用cors中间件
app.use(cors({
  origin: '*'
  // 或者指定特定的域名
  // origin: 'https://www.api1.link'
}));

// 从public目录中读取静态文件
app.use(express.static('public'));

// 从指定文件中获取随机图像链接的函数
const getRandomImage = (filePath) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        const lines = data.split('\n').filter(line => line.trim() !== '');
        const randomLine = lines[Math.floor(Math.random() * lines.length)];
        resolve(randomLine);
      }
    });
  });
};

// 从所有文本文件中随机获取图片链接的函数
const getRandomImageFromAllFiles = () => {
  return new Promise((resolve, reject) => {
    const dirPath = path.join(__dirname);
    fs.readdir(dirPath, (err, files) => {
      if (err) {
        reject(err);
      } else {
        const txtFiles = files.filter(file => file.endsWith('.txt'));
        if (txtFiles.length === 0) {
          reject(new Error('No text files found'));
        } else {
          const promises = txtFiles.map(file => getRandomImage(path.join(dirPath, file)));
          Promise.all(promises)
            .then(results => {
              const allImages = results.flat();
              const randomImage = allImages[Math.floor(Math.random() * allImages.length)];
              resolve(randomImage);
            })
            .catch(reject);
        }
      }
    });
  });
};

// 所有类别随机图像的路由
app.get('/random', async (req, res) => {
  try {
    const imageUrl = await getRandomImageFromAllFiles();
    res.redirect(imageUrl);
  } catch (error) {
    res.status(404).send('No images found');
  }
});

// 主页文档的默认路由
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../public/index.html'));
});

// 指定类别随机图像的路由
app.get('/:category', async (req, res) => {
  const category = req.params.category;
  const filePath = path.join(__dirname, `${category}.txt`);

  try {
    const imageUrl = await getRandomImage(filePath);
    res.redirect(imageUrl);
  } catch (error) {
    res.status(404).send('Category not found');
  }
});

module.exports = app;

3. 创建 `index.html`

在 public 目录下创建 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>随机图 | API</title>
        <link rel="icon" href="/favicon.ico">
        <style>
            html,
            body {
                margin: 0;
                color: #424242;
                font-weight: 300;
                font-family: "-apple-system", "BlinkMacSystemFont",
                    "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
                    "Source Han Sans SC", "Noto Sans CJK SC",
                    "WenQuanYi Micro Hei", "sans-serif";
                font-size: 16px;
            }

            * {
                box-sizing: border-box;
            }

            header {
                padding: 40vh 0 8vh 0;
                text-align: center;
                font-weight: 100;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                height: 100vh;
                overflow: hidden;
                background: #a0e5e4;
            }

            h1,
            h2,
            h3 {
                font-weight: 400 !important;
                font-weight: bold;
                margin: 0;
            }

            h1 {
                font-size: 3.5rem;
                padding: 20px;
            }

            h2 {
                font-size: 2rem;
                font-weight: 300;
                text-align: center;
            }

            h3 {
                font-size: 1.5rem;
                font-weight: 300;
            }

            #scroll-down {
                background-color: transparent;
                margin-top: 2rem;
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                border: 2px solid #424242;
                cursor: pointer;
                animation: bounce 2s infinite 2s;
            }

            #scroll-down::before {
                display: block;
                content: "";
                transform: rotate(-45deg) translate(0.15rem, 0.15rem);
                width: 0.4rem;
                height: 0.4rem;
                border: 2px solid #424242;
                border-width: 0px 0 2px 2px;
            }

            a {
                text-decoration: none;
                color: #5fbf62;
                font-weight: bold;
            }

            p {
                font-size: 18px;
                line-height: 1.6;
            }

            main {
                padding: 1vw;
            }

            section {
                padding: 1rem;
            }

            footer {
                padding: 1vh;
                text-align: center;
                background-color: #aaaaaa;
            }

            footer a {
                color: #1e03ea;
            }

            footer a:hover {
                text-decoration: underline;
            }

            @keyframes bounce {
                0%,
                100%,
                20%,
                50%,
                80% {
                    transform: translateY(0);
                }

                40% {
                    transform: translateY(-10px);
                }

                60% {
                    transform: translateY(-5px);
                }
            }
        </style>
    </head>

    <body>
        <header>
            <section>
                <h1>随机图 | API</h1>
                <h3>使用文档</h3>
            </section>
            <button id="scroll-down"></button>
        </header>
        <main>
            <section>
                <h2>随机图片 API</h2>
                <p>欢迎使用随机图片 API！你可以通过以下路径获取随机图片：</p>
                <ul>
                    <li><strong>/random</strong> - 随机获取 <a>一张</a> 图片</li>
                    <li><strong>/meinv</strong> - 随机获取 <a>美女</a> 图片</li>
                    <li><strong>/dongman</strong> - 随机获取 <a>动漫</a> 图片</li>
                </ul>
                <p>示例：</p>
                <ul>
                    <li>
                        <a href="/random" target="_blank"
                            >https://your-domain.vercel.app/random</a
                        >
                    </li>
                    <li>
                        <a href="/meinv" target="_blank"
                            >https://your-domain.vercel.app/meinv</a
                        >
                    </li>
                    <li>
                        <a href="/dongman" target="_blank"
                            >https://your-domain.vercel.app/dongman</a
                        >
                    </li>
                </ul>
            </section>
        </main>
        <script>
            document
                .getElementById("scroll-down")
                .addEventListener("click", function () {
                    document.querySelector("main").scrollIntoView({
                        behavior: "smooth",
                    });
                });
        </script>
        <footer>
            <p>
                <a href="https://github.com/aizhiqian">Github</a>
            </p>
        </footer>
    </body>
</html>

4. 添加 `favicon.ico`

将 favicon.ico 文件放在 public 目录下。你可以使用任意图标生成工具生成 favicon.ico 文件。

5. 创建 `package.json`

在项目根目录下创建 package.json 文件，内容如下：

{
  "name": "random-image-api",
  "version": "1.0.0",
  "main": "api/randomImage.js",
  "dependencies": {
    "express": "^4.19.2",
    "cors": "^2.8.5"
  }
}

6. 创建 `vercel.json`

在项目根目录下创建 vercel.json 文件，内容如下：

{
  "version": 2,
  "builds": [
    {
      "src": "api/randomImage.js",
      "use": "@vercel/node"
    },
    {
      "src": "/public/**",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/",
      "dest": "/public/index.html"
    },
    {
      "src": "/favicon.ico",
      "dest": "/public/favicon.ico"
    },
    {
      "src": "/(.*)",
      "dest": "/api/randomImage.js"
    }
  ]
}

7. 部署到 Vercel

当然你也可以创建一个新的 Github 仓库，把代码推送到该仓库，然后在 Vercel 中选择该仓库直接部署。
这样你就不需要执行下述命令了。

在项目根目录中，打开终端并运行以下命令以部署到 Vercel：

npm install -g vercel
vercel

按照提示登录或注册 Vercel 账号，并选择你的项目配置。部署完成后，你将获得一个域名。通过访问该域名及其路径，你可以实现上述功能。

例如：

https://your-domain.vercel.app/ 显示项目的主页
https://your-domain.vercel.app/random 获取所有 .txt 文件中的随机图片
https://your-domain.vercel.app/meinv 获取 “meinv.txt” 文件中的随机图片
https://your-domain.vercel.app/dongman 获取 “dongman.txt” 文件中的随机图片
https://your-domain.vercel.app/新分类 获取 “新分类.txt” 文件中的随机图片

这样，你就成功创建并部署了一个具有分类功能的随机图片 API，并添加了主页说明文档。希望这篇文章能帮助你在 Vercel 上轻松部署你的随机图片 API。

项目结构

1. 准备分类文本文件

2. 创建 randomImage.js

3. 创建 index.html

4. 添加 favicon.ico

5. 创建 package.json

6. 创建 vercel.json