在React.js本地服务（localhost:8080）嵌入iframe部署聊天助手

一、正确通过iframe嵌入聊天助手 #

直接复制构建产物的script/link标签无效，因为iframe是嵌入完整的独立页面，正确操作步骤如下：

1. 先给聊天助手的构建产物启动一个临时本地服务，比如执行npx serve -s webchat-assistant/build（假设构建产物存放在build文件夹），启动后会得到类似localhost:3000的访问地址
2. 在主项目（运行在localhost:8080）的index.html中添加iframe标签，指向聊天助手的服务地址：

<iframe src="http://localhost:3000" width="400" height="600" frameborder="0"></iframe>

此时刷新主项目页面，就能看到嵌入的聊天助手。

二、将两个应用部署到同一localhost:8080 #

完全可以实现，两种常用方案：

方案1：将聊天助手构建产物放入主项目静态资源目录 #

1. 把webchat-assistant构建产物（比如build文件夹内的所有文件）复制到主React项目的public/webchat目录下（没有webchat文件夹就新建）
2. 主项目index.html中的iframe直接使用相对路径引用：

<iframe src="/webchat" width="400" height="600" frameborder="0"></iframe>

3. 重启主项目（localhost:8080），主项目的静态资源服务器会自动托管public目录下的文件，/webchat路径会指向复制过去的聊天助手页面，实现同端口访问。

方案2：配置主项目打包工具做路由代理（适合开发阶段） #

如果主项目是用Create React App创建的，可在package.json中添加代理配置：

"proxy": {
  "/webchat": {
    "target": "http://localhost:3000", // 聊天助手的本地服务地址
    "pathRewrite": {"^/webchat": ""}
  }
}

之后主项目的iframe引用/webchat路径，主项目会自动将该路径的请求代理到聊天助手的服务，实现同端口访问。

注意：生产部署时，方案1更直接，只需将聊天助手的静态文件和主项目的构建产物一起部署到服务器即可。

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