在Node.js构建React项目时为build目录创建API符号链接

项目背景 #

• React项目路径：/var/www/html/project-root
• PHP API路径：/var/www/html/php-api
• 需求：执行sudo npm run build构建生产版本后，在build目录下创建/api符号链接指向PHP API目录，实现axios.get('/api/v2/users')的本地API调用

已尝试的错误方法 #

1. Node.js fs.symlink() 用法错误 #

用户尝试的代码参数顺序有误，无法正确创建目标链接：

fs.symlink(__dirname + "\\api",
    "symlinkToDir", '/var/www/html/php-api', (err) => {
        if (err)
            console.log(err);
        else {
            console.log("Symlink created");
            console.log("Symlink is a directory:",
                fs.statSync("symlinkToDir").isDirectory()
            );
        }
    });

2. npm脚本命令绑定错误 #

将符号链接命令绑定到了eject脚本而非build脚本，执行时机完全不对：

"scripts": {
    "start": "node server/index.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject && ln -s /var/www/html/php-api/ /var/www/html/project-root/build/api"
}

正确实现方式 #

方案1：直接修改npm build脚本 #

将符号链接命令追加到build步骤后，添加-f参数确保覆盖已存在的旧链接：

"scripts": {
    "start": "node server/index.js",
    "build": "react-scripts build && ln -sf /var/www/html/php-api /var/www/html/project-root/build/api",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

• -f参数：若build/api已存在，强制覆盖避免报错
• 执行sudo npm run build时，shell命令会以root权限运行，确保目录权限无问题

方案2：Node.js脚本实现跨平台兼容 #

如果需要兼顾本地开发（如Windows）和生产环境（Linux），可以编写单独的构建后脚本：

1. 在项目根目录创建post-build.js：

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

const apiTarget = '/var/www/html/php-api';
const symlinkPath = path.join(__dirname, 'build', 'api');

// 先移除已存在的链接或文件
try {
    fs.unlinkSync(symlinkPath);
} catch (err) {
    // 文件不存在时忽略错误
    if (err.code !== 'ENOENT') throw err;
}

// 创建目录类型的符号链接
fs.symlink(apiTarget, symlinkPath, 'dir', (err) => {
    if (err) {
        console.error('API符号链接创建失败:', err);
        process.exit(1);
    }
    console.log('API符号链接创建成功');
});

2. 修改npm脚本：

"scripts": {
    "start": "node server/index.js",
    "build": "react-scripts build && node post-build.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

部署注意事项 #

• 确保执行构建的用户对/var/www/html/project-root/build目录拥有读写权限
• 若使用Nginx/Apache部署，需配置服务器允许跟随符号链接：
  • Nginx：添加disable_symlinks off;到对应server块
  • Apache：添加Options +FollowSymLinks到目录配置

内容的提问来源于stack exchange，提问作者Zak