webpack區分不同環境的api url

常常我們會把「前端本身跑專案的方式的環境」跟「開發流程的環境」搞混,都是叫做環境,但是我當初也是搞了很久才弄懂(汗

 

前端的專案環境通常由 webpack 區分成:

  • development:在本地跑起node serve專案,為方便開發而使用的方式。
  • productionwebpack打包後產生的靜態檔案,會排除沒用到的依賴,部署要用的就是這種打包檔,一般會放在/dist裡。

開發流程環境通常會區分以下幾種:

  • development:工程師自己再開發的時候使用的環境。
  • sit:如果公司有QA團隊,這個環境會給QA測試。
  • uat:通過QA測試之後,會放到uat環境給客戶測試(到這邊都還只是測試)
  • production:正式環境,就是一般使用者會看到的釋出版本。

後端也會這樣區分,所以會關乎到你api路徑的設定。


 

package.json

原本我們起專案的指令,會有dev(或是serve)和build

{
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.config.js",
    "build": "webpack --config ./build/webpack.config.js",
    "start": "PORT=8080 serve -s dist",
  },
}

 這時候我們development環境和production環境要加上參數去區分,假設我們先分成sitproduction環境就好。

修改指令如下:

{
  "scripts": {
    "dev": "webpack-dev-server --env.api=SIT --config ./build/webpack.config.js",
    "dev:prod": "webpack-dev-server --config ./build/webpack.config.js",
    "build": "webpack --env.api=SIT --config ./build/webpack.config.js",
    "build:prod": "webpack --config ./build/webpack.config.js",
    "start": "PORT=8080 serve -s dist",
  },
}

可以看到我先增了兩個指令:dev:prodbuild:prod

然後在原本的dev指令和build指令都加上一個api的參數,他們的值都是字串的"SIT"

也就是說我可以在dev環境跑sit或是productionapi,build環境也同理。

所以整理一下目前排列組合有四種環境:

  • 本地端起sit環境:yarn dev
  • 本地端起production環境:yarn dev:prod
  • 打包sit環境:yarn build
  • 打包production環境:yarn build:prod

 

 

webpack.config.js

通常我們會在 webpack 裡面設定一些環境變數:

module.exports = env => {
  let config = [];
  config.push(
    new webpack.EnvironmentPlugin({
      API_URL: "your-api-domain.com"
    }),
  );
  return config;
}

但這樣 api 路徑是寫死的,我們需要依照環境來打不同的api。

還記得我們剛剛在指令那邊有加上一個參數叫做api,他的值是字串的"SIT"

所以修改程式如下:

module.exports = env => {
  let config = [];
  config.push(
    new webpack.EnvironmentPlugin({
      API_URL: env?.api === "SIT" 
        ? "your-sit-api-domain.com" 
        : "your-production-api-domain.com"
    }),
  );
  return config;
}

最後yarn dev測試一下是不是打到your-sit-api-domain.com這個位置的 api ~


備註一下,如果是 vue 專案的話,直接新增.env.development.env.production檔案,然後在vue.config.js裡面設定就好~

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。