大前端快闪二：React开发模式一键启动多个服务
本文转载自微信公众号「精益码农」，作者有态度的马甲。转载本文请联系精益码农公众号。
成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、网站设计、外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的临湘网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
最近全权负责了一个前后端分离的web项目，前端使用create-react-app[1], 后端使用golang做的api服务。
- npx create-react-app my-app
- cd my-app
- npm start
歘歘歘，就搭建了一个react前端项目。
前端老鸟都知道npm start或yarn start以开发模式启动react App：在localhost:3000调试预览前端项目，编辑器的变更会实时体现在web页面。
前端老鸟也知道npm run build或yarn build是以生产为目标，将优化后的静态文件输出到build文件夹 (优化构建性能、压缩产出物、给文件名哈希)。
从一个全栈程序员的视角，开发时最好能一次启动前后端两个程序。
快闪二：你能在react app开发模式中一键启动多个服务吗?
1. 安装concurrently插件
- npm install concurrently -D
2 . 配置npm命令
- "scripts": {
- "start": "concurrently \"react-scripts start\" \"go run main.go\" ",
- "build": "react-app-rewired build",
- "test": "react-app-rewired test",
- "eject": "react-scripts eject"
- },
注意上面的start脚本内容： react-scripts start启动了前端app， go run main.go启动了后端api服务。
3. npm start或yarn start启动项目
开发模式，前后端项目不在一个端口，内置axios发起的ajax请求存在跨域。
解决跨域问题，要么反向代理，要么让后端做CORS。
这里我们采用反向代理的方式。
4. react开发模式设置proxy[2]
create-react-app允许你设置一个proxy，仅用于开发模式。
To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json。
在package.json文件，设置要代理的后端地址 proxy:"localhost:8034"
，开发模式localhost:3000收到的未知请求将会由前端开发服务器代理转发。
引用链接
[1] create-react-app: https://github.com/facebook/create-react-app
[2] react开发模式设置proxy: https://coursework.vschool.io/setting-up-a-full-stack-react-application/
文章名称：大前端快闪二：React开发模式一键启动多个服务
标题路径：http://www.shufengxianlan.com/qtweb/news43/308343.html
网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联