Vercel での Next.js 14.1 サーバー アクションのローカル ファイル アクセスの管理

さまざまな方法を使用した Next.js 14.1 サーバー アクションのファイル アクセスの問題の修正

実稼働環境でローカル ファイルに安全にアクセスするために、このソリューションでは API ルートを備えた Node.js バックエンドを利用します。

const { PDFDocument } = require('pdf-lib');
const fs = require('fs');
const path = require('path');
export default async function handler(req, res) {
  try {
    const pdfDataDir = path.join(process.cwd(), 'actions', 'pdf_data');
    const templatePath = path.join(pdfDataDir, 'template.pdf');
    const pdfDoc = await PDFDocument.load(fs.readFileSync(templatePath));
    const pdfBytes = await pdfDoc.save();
    res.setHeader('Content-Type', 'application/pdf');
    res.status(200).send(pdfBytes);
  } catch (error) {
    res.status(500).send('Error generating PDF');
  }
}

次に、モジュラー Webpack 構成を使用してファイルをコピーします。JavaScript 用の実稼働ビルド

ローカル ファイルが本番環境で適切にバンドルされることを保証するために、このアプローチでは Webpack 設定を変更します。

const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && isServer) {
      config.plugins.push(
        new CopyPlugin({
          patterns: [{
            from: path.join(__dirname, 'actions', 'pdf_data'),
            to: path.join(__dirname, '.next', 'server', 'actions', 'pdf_data'),
          }],
        })
      );
    }
    return config;
  },
};

サーバーアクションの代わりにAPIルートを使用してファイルに動的にアクセスする

この方法では、動的ファイル アクセスの代わりに API ルートを使用して、本番環境に対応したローカル ファイル サービスを提供します。

import { promises as fs } from 'fs';
import path from 'path';
export default async function handler(req, res) {
  try {
    const pdfDataDir = path.join(process.cwd(), 'actions', 'pdf_data');
    const filePath = path.join(pdfDataDir, 'template.pdf');
    const file = await fs.readFile(filePath);
    res.setHeader('Content-Type', 'application/pdf');
    res.status(200).send(file);
  } catch (err) {
    res.status(500).send('Error loading file');
  }
}

API ルートでのファイル アクセスの単体テスト

この単体テストでは、PDF ファイルが API ルートによって適切に提供されることを確認します。

import handler from '../pages/api/generate-pdf';
import { createMocks } from 'node-mocks-http';
describe('PDF Generation API', () => {
  it('should return a PDF', async () => {
    const { req, res } = createMocks({ method: 'GET' });
    await handler(req, res);
    expect(res._getStatusCode()).toBe(200);
    expect(res._getHeaders()['content-type']).toBe('application/pdf');
  });
});

Next.js サーバー アクションでのローカル ファイルの処理に関するよくある質問

1. ローカル ファイルが実稼働環境で利用可能であることを確認するにはどうすればよいですか?
2. インクルードにより CopyPlugin Webpack 構成では、PDF やフォントなどのローカル アセットがビルドにバンドルされ、アクセス可能になるようにすることができます。
3. 本番環境で ENOENT エラーが発生するのはなぜですか?
4. このエラーの理由は、Vercel などのシステムでは、アクセスしようとしているファイルまたはディレクトリが実稼働ビルドに含まれていないためです。
5. ファイルにアクセスしたいのですが、サーバーアクションの代わりにAPIルートを利用できますか?
6. はい、ファイル アクセス機能を API ルートに転送することで、追加の制御が可能になり、運用環境でファイルが正しく提供されることを保証できます。
7. ファイルパスにおける process.cwd() の役割は何ですか?
8. process.cwd() 現在の作業ディレクトリを提供し、環境の変化に依存しないファイル パスの動的な作成を支援します。
9. ファイルストレージには @vercel/blob を使用する必要がありますか?
10. @vercel/blob はオプションですが、PDF 作成などのプロセスに遅れが生じる可能性があります。より高速なオプションとしては、API ルートまたは直接ファイル アクセスがあります。

ローカル ファイル アクセスの処理に関する最終的な考え方

Next.js 14.1、特に Vercel でサーバー アクションを使用する場合、ローカル ファイルへのアクセスは大きな困難になる可能性があります。ただし、開発者は、Webpack の CopyPlugin や API ルートなどのテクノロジを使用して、ファイルがパックされて運用環境で利用できるようにすることができます。

ファイル機能を API ルートに移行するなど、動的なファイル処理手法に集中することで、問題を回避できます。ファイル アクセス技術をさらに研究すると、後の展開でさらに効果的なソリューションが得られる可能性があります。