建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號(hào)「精益碼農(nóng)」，作者有態(tài)度的馬甲。轉(zhuǎn)載本文請(qǐng)聯(lián)系精益碼農(nóng)公眾號(hào)。
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的臨湘網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
最近全權(quán)負(fù)責(zé)了一個(gè)前后端分離的web項(xiàng)目，前端使用create-react-app[1], 后端使用golang做的api服務(wù)。
- npx create-react-app my-app
- cd my-app
- npm start
歘歘歘，就搭建了一個(gè)react前端項(xiàng)目。
前端老鳥都知道npm start或yarn start以開發(fā)模式啟動(dòng)react App：在localhost:3000調(diào)試預(yù)覽前端項(xiàng)目，編輯器的變更會(huì)實(shí)時(shí)體現(xiàn)在web頁(yè)面。
前端老鳥也知道npm run build或yarn build是以生產(chǎn)為目標(biāo)，將優(yōu)化后的靜態(tài)文件輸出到build文件夾 (優(yōu)化構(gòu)建性能、壓縮產(chǎn)出物、給文件名哈希)。
從一個(gè)全棧程序員的視角，開發(fā)時(shí)最好能一次啟動(dòng)前后端兩個(gè)程序。
快閃二：你能在react app開發(fā)模式中一鍵啟動(dòng)多個(gè)服務(wù)嗎?
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腳本內(nèi)容： react-scripts start啟動(dòng)了前端app， go run main.go啟動(dòng)了后端api服務(wù)。
3. npm start或yarn start啟動(dòng)項(xiàng)目
開發(fā)模式，前后端項(xiàng)目不在一個(gè)端口，內(nèi)置axios發(fā)起的ajax請(qǐng)求存在跨域。
解決跨域問題，要么反向代理，要么讓后端做CORS。
這里我們采用反向代理的方式。
4. react開發(fā)模式設(shè)置proxy[2]
create-react-app允許你設(shè)置一個(gè)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收到的未知請(qǐng)求將會(huì)由前端開發(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/
當(dāng)前名稱：大前端快閃二：React開發(fā)模式一鍵啟動(dòng)多個(gè)服務(wù)
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/dhephgg.html
