? ? 最近全權(quán)負(fù)責(zé)了一個前后端分離的web項目，前端使用create-react-app^[1], 后端使用golang做的api服務(wù)。

npx?create-react-app?my-app cd?my-app npm?start

歘歘歘，就搭建了一個react前端項目。

前端老鳥都知道npm start或yarn start以開發(fā)模式啟動react App：在localhost:3000調(diào)試預(yù)覽前端項目，編輯器的變更會實時體現(xiàn)在web頁面。

前端老鳥也知道npm run build或yarn build是以生產(chǎn)為目標(biāo)，將優(yōu)化后的靜態(tài)文件輸出到build文件夾 (優(yōu)化構(gòu)建性能、壓縮產(chǎn)出物、給文件名哈希)。

從一個全棧程序員的視角，開發(fā)時最好能一次啟動前后端兩個程序。

快閃二：你能在react app開發(fā)模式中一鍵啟動多個服務(wù)嗎？

1. 安裝concurrently插件

npm install concurrently -D

2 . 配置npm命令

"scripts":?{"start":?"concurrently??\"react-scripts?start\"??\"go?run?main.go\"?","build":?"react-app-scripts?build","test":?"react-app-scripts?test","eject":?"react-scripts?eject"},

注意上面的start腳本內(nèi)容：?react-scripts start啟動了前端app，?go run main.go啟動了后端api服務(wù)。

3.?npm start或yarn start啟動項目

開發(fā)模式，前后端項目不在一個端口，內(nèi)置axios發(fā)起的ajax請求存在跨域。
解決跨域問題，要么反向代理，要么讓后端做CORS。

這里我們采用反向代理的方式。

4.?react開發(fā)模式設(shè)置proxy^[2]

? create-react-app允許你設(shè)置一個proxy，僅用于開發(fā)模式。

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文件，設(shè)置要代理的后端地址??proxy:"localhost:8034"
，開發(fā)模式localhost:3000收到的未知請求將會由前端開發(fā)服務(wù)器代理轉(zhuǎn)發(fā)。

引用鏈接

[1]?create-react-app:?https://github.com/facebook/create-react-app
[2]?react開發(fā)模式設(shè)置proxy:?https://coursework.vschool.io/setting-up-a-full-stack-react-application/

?性感豹紋

?鵝廠二面，Nginx回憶錄

?前后端分離，如何在前端項目中動態(tài)插入后端API基地址？（in docker）

?前端鏡像打包這么慢，你該反省一下

?程序員應(yīng)對瀏覽器同源策略的姿勢

?對CORS OPTIONS預(yù)檢請求的一些思考

?面試官：單點登錄你搞過嗎？

?難纏的布隆過濾器，這次終于通透了

本文內(nèi)容和制圖均為原創(chuàng)，文章永久更新地址請參閱左下角原文，老鳥輕噴，菜鳥互啄。

總結(jié)

以上是生活随笔為你收集整理的大前端快闪二：react开发模式 一键启动多个服务的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。