React Native Web（Amplify托管）添加Stripe Apple Pay验证文件方法

方案一：配置静态资源目录 + Amplify重写规则（推荐） #

这是最贴合React Native Web静态资源处理逻辑的方案，无需额外服务或复杂路由：

1. 创建静态资源目录：在项目根目录新建public文件夹，将无扩展名的Apple Pay验证文件直接放入该目录（比如文件名是apple-developer-merchantid-domain-association）。
2. 配置React Native Web打包规则：
   • 若使用自定义Webpack配置，修改webpack.config.js，确保public目录被识别为静态资源目录：

     const path = require('path');
     
     module.exports = {
       // 其他已有配置
       devServer: {
         static: {
           directory: path.join(__dirname, 'public'),
         },
       },
       output: {
         assetModuleFilename: '[name][ext]', // 保留原文件名（无扩展名）
       },
     };
     

   • 若使用Expo，直接在app.json中添加静态资源路径配置：

     {
       "expo": {
         "web": {
           "staticAssetsPath": "./public"
         }
       }
     }
     

3. 配置Amplify重写规则：
   登录AWS Amplify控制台，进入你的项目 → 「部署」→ 「重写与重定向」，添加一条规则：
   • 源地址：/.well-known/<你的验证文件名>（替换为实际文件名）
   • 目标地址：/<你的验证文件名>
   • 类型：200 (Rewrite)

方案二：用Lambda@Edge直接返回文件内容 #

如果不想修改项目结构，可通过CloudFront关联的Lambda函数直接返回验证文件内容：

1. 创建Lambda函数：
   在AWS Lambda控制台创建Node.js runtime的函数，代码如下（替换占位内容）：

   exports.handler = async (event) => {
     const request = event.Records[0].cf.request;
     const targetFileName = 'apple-developer-merchantid-domain-association'; // 替换为你的文件名
     const fileContent = '这里粘贴验证文件的完整文本内容'; // 替换为实际内容
   
     if (request.uri === `/.well-known/${targetFileName}`) {
       return {
         status: '200',
         statusDescription: 'OK',
         headers: {
           'content-type': [{ key: 'Content-Type', value: 'text/plain' }]
         },
         body: fileContent
       };
     }
     return request;
   };
   

2. 关联到CloudFront：
   在CloudFront控制台找到Amplify托管对应的分发，将上述Lambda函数关联到「Viewer Request」事件，确保请求/.well-known路径时触发函数返回内容。

方案三：简化路由返回文件内容（替代WebView方案） #

如果之前用React Navigation的路由方案太冗余，可直接通过React Router（React Navigation Web底层依赖）配置路由返回文件内容：

1. 添加路由配置：
   在你的根路由组件中添加对应路由，直接返回验证文件内容：

   import { Route, Routes } from 'react-router-dom';
   
   const WellKnownFile = ({ params }) => {
     const targetFileName = 'apple-developer-merchantid-domain-association';
     const fileContent = '这里粘贴验证文件的完整文本内容';
   
     if (params.fileName === targetFileName) {
       return <pre style={{ margin: 0, padding: 0 }}>{fileContent}</pre>;
     }
     return null;
   };
   
   // 嵌入到你的路由结构中
   function AppRoutes() {
     return (
       <Routes>
         {/* 其他业务路由 */}
         <Route path="/.well-known/:fileName" element={<WellKnownFile />} />
       </Routes>
     );
   }
   

2. 确保Amplify重写规则兼容：
   保留Amplify默认的单页应用重写规则（将所有路径指向index.html），这样路由才能正常匹配。

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