使用Razzle实现SSR的React项目无法访问.well-known目录文件

1. 确认生产构建后的静态资源是否存在 #

Razzle在生产构建时，会将public目录下的文件打包到build/public路径下。先登录服务器，进入项目构建后的build/public目录，执行ls -la .well-known/查看assetlinks.json是否存在：

• 如果文件不存在，说明构建过程中未复制隐藏目录，需修改Razzle配置：
  在项目根目录创建razzle.config.js，添加以下配置确保隐藏目录被打包：

  module.exports = {
    modify: (config, { target, dev }, webpack) => {
      if (target === 'web' && !dev) {
        config.plugins.push(
          new webpack.CopyPlugin({
            patterns: [
              { from: 'public/.well-known', to: '.well-known' }
            ]
          })
        );
      }
      return config;
    }
  };
  

  重新执行npm run build后再部署到服务器。

2. 配置服务器静态资源路由（以Nginx为例） #

如果用Nginx做反向代理，默认会忽略以.开头的隐藏目录请求，需在站点配置文件中添加规则：

• 打开Nginx配置文件（通常在/etc/nginx/sites-available/你的站点.conf）
• 在server块中添加：

  location /.well-known/ {
    root /你的项目路径/build/public;
    allow all;
    try_files $uri $uri/ =404;
  }
  

  替换/你的项目路径/build/public为实际静态资源目录，执行sudo nginx -t检查配置合法性，再执行sudo systemctl reload nginx重启Nginx。

3. 修正Razzle服务器端静态资源配置 #

如果使用Razzle自带的server.js作为服务端，需确保express.static允许访问隐藏文件：

• 打开server.js，修改静态资源中间件配置：

  app.use(express.static(path.join(__dirname, 'build/public'), { dotfiles: 'allow' }));
  

  关键是添加dotfiles: 'allow'参数，默认express.static会忽略以.开头的文件/目录。

4. 修复服务器文件权限 #

Ubuntu服务器的文件权限可能导致资源无法读取，执行以下命令调整权限：

sudo chmod -R 755 /你的项目路径/build/public/.well-known
sudo chown -R www-data:www-data /你的项目路径/build/public/.well-known

www-data为Nginx/Node进程常用用户组，可根据实际运行进程的用户调整。

5. 本地测试定位问题 #

在服务器本地执行curl http://localhost:你的项目端口/.well-known/assetlinks.json：

• 如果能返回文件内容，说明问题出在反向代理配置；
• 如果无法返回，说明项目本身的静态资源配置存在问题。

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