大前端快閃二:react開發模式 一鍵啓動多個服務

最近全權負責了一個前後端分離的web項目,前端使用create-react-app, 後端使用golang做的api服務。

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

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

前端老鳥都知道npm startyarn start以開發模式啓動react App:在localhost:3000調試預覽前端項目,編輯器的變更會實時體現在web頁面。

前端老鳥也知道npm run buildyarn 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 startyarn start啓動項目

在開發模式,前後端項目不在一個端口,存在跨域。
解決跨域問題,要麼反向代理,要麼讓後端做CORS。

這裏我們採用反向代理的方式。

4. react開發模式設置proxy

create-react-app允許你設置一個代理URL,僅用於開發模式。

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收到的未知請求將會由前端開發服務器代理轉發。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章