關(guān)于如何在部署環(huán)境修改process.env & 本地測(cè)試

missonce 發(fā)布于2019-08-23 12:12 / 2662人閱讀

摘要：前言最近在搞一些監(jiān)控的東西，需要根據(jù)不同的環(huán)境上報(bào)到不同的地址，中間遇到了一些問題，在這里簡(jiǎn)單總結(jié)分享下。關(guān)于假如你對(duì)相關(guān)的概念還不熟悉，請(qǐng)移步環(huán)境變量的那些事兒這篇文章總結(jié)的比較好。作為一個(gè)對(duì)象，它對(duì)于應(yīng)用程序始終是可用的，故無需使用。

前言

最近在搞一些監(jiān)控的東西，需要根據(jù)不同的環(huán)境上報(bào)到不同的地址，中間遇到了一些問題，在這里簡(jiǎn)單總結(jié)分享下。

關(guān)于process.env

假如你對(duì)process.env 相關(guān)的概念還不熟悉，請(qǐng)移步：
Node環(huán)境變量 process.env 的那些事兒 , 這篇文章總結(jié)的比較好。

webpack 在構(gòu)建的時(shí)候，可以為process.env 賦值：

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = "development";
process.env.NODE_ENV = "development";


// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = "production";
process.env.NODE_ENV = "production";

process 對(duì)象是一個(gè) global （全局變量），提供有關(guān)信息，控制當(dāng)前 Node.js 進(jìn)程。作為一個(gè)對(duì)象，它對(duì)于 Node.js 應(yīng)用程序始終是可用的，故無需使用 require()。

假如你需要根據(jù)不同的部署環(huán)境做一些區(qū)分，比如：

if (process.env.env === "test") {
  BASE_API_1 = "xxx
} else if (process.env.env === "uat") {
  BASE_API_1 = "xxx
} else if (process.env.env === "staging") {
  BASE_API_1 = "xxx
} else if (process.env.env === "live") {
  BASE_API_1 = "xxx"
} else {
  BASE_API_1 = "xxx";
}

比如用的是jenkins, 構(gòu)建的時(shí)候會(huì)自動(dòng)給環(huán)境變量加一個(gè)env 屬性，也就是上面看到的env.env, 不同的環(huán)境會(huì)有不同的值，比如 uat, staging, live;

本地構(gòu)建的時(shí)候，是取不到這個(gè)值的，因?yàn)闆]有這個(gè)環(huán)境。但是你也可以手動(dòng)來賦值，比如給env.env 賦值為"test", 就可以在終端執(zhí)行：

env=test yarn start

隨便打印一下：

console.log(process.env.env);

這樣就可以了 :)

希望對(duì)大家有所啟發(fā)，謝謝。

GPU云服務(wù)器云服務(wù)器本地測(cè)試環(huán)境網(wǎng)站本地測(cè)試環(huán)境測(cè)試環(huán)境部署部署測(cè)試環(huán)境

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98110.html

相關(guān)文章

實(shí)戰(zhàn)Vue簡(jiǎn)易項(xiàng)目（2）定制開發(fā)環(huán)境

摘要：至于，為什么跟蹤文件因?yàn)檫@個(gè)功能是開發(fā)環(huán)境下獨(dú)有的，要修改開發(fā)環(huán)境吖，必然找開發(fā)環(huán)境的配置文件進(jìn)行跟蹤。測(cè)試可行性重啟項(xiàng)目后，在瀏覽器中輸入是你本地，可通過查看能夠訪問，就說明局域網(wǎng)內(nèi)的其他端可以訪問。然而，這樣并沒有結(jié)束。本章內(nèi)容包含上一章思考的解決，還有一些其它的定制... CSS預(yù)處理關(guān)于對(duì).vue文件模塊處理規(guī)則的配置依次可在build/webpack.base.conf....

woshicixide 2019-08-23 10:33 評(píng)論0 收藏0
Vue-項(xiàng)目從本地搭建到線上部署（wǒ shì biaō tí dǎng）

摘要：放置在目錄下或通過絕對(duì)路徑被引用。對(duì)于相關(guān)來說，我們推薦使用而不是直接鏈?zhǔn)街付āＴ诓桓呐渲梦募那闆r下，前端頁(yè)面迭代發(fā)布，不需要重啟服務(wù)。作者：gauseen 0. 關(guān)于 Vuejs 簡(jiǎn)介：Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，易用、靈活、高效。生態(tài)系統(tǒng) 項(xiàng)目介紹 awesome-vue Vue.js 相關(guān)很棒的...

Arno 2019-08-26 13:49 評(píng)論0 收藏0
前端自動(dòng)部署 - Shell腳本

前言前端部署服務(wù)器，需要經(jīng)過打包、遷移、部署、回退操作，如果每次都手動(dòng)處理，那么容易出錯(cuò)還浪費(fèi)時(shí)間，自動(dòng)化部署又比較復(fù)雜，那么選擇shell腳本做自動(dòng)化，也是一個(gè)不錯(cuò)的選擇，具體實(shí)現(xiàn)如下：項(xiàng)目環(huán)境執(zhí)行自動(dòng)化構(gòu)建的前端項(xiàng)目myweb項(xiàng)目通過命令構(gòu)建測(cè)試環(huán)境文件或生產(chǎn)環(huán)境文件linux服務(wù)器，nginx部署項(xiàng)實(shí)現(xiàn)原理一、構(gòu)建一個(gè)前端項(xiàng)目通過cra構(gòu)建前端項(xiàng)目，修改配置文件，通過傳遞配置參數(shù)，配置測(cè)試環(huán)...

社區(qū)管理員 2022-10-08 14:51 評(píng)論0 收藏0
業(yè)務(wù)代碼如何判斷生產(chǎn)/開發(fā)環(huán)境

摘要：開發(fā)環(huán)境和生產(chǎn)環(huán)境分離的原因在開發(fā)時(shí)，會(huì)產(chǎn)生或者是測(cè)試的代碼，這些代碼不應(yīng)該出現(xiàn)在生產(chǎn)環(huán)境中。當(dāng)項(xiàng)目部署時(shí)，往往會(huì)將代碼進(jìn)行一系列的壓縮來優(yōu)化它，如此會(huì)徹底破壞代碼的可讀性。方案二使用這個(gè)參數(shù)來辨別開發(fā)環(huán)境。開發(fā)環(huán)境和生產(chǎn)環(huán)境分離的原因在開發(fā)時(shí)，會(huì)產(chǎn)生 debug 或者是測(cè)試的代碼，這些代碼不應(yīng)該出現(xiàn)在生產(chǎn)環(huán)境中。當(dāng)項(xiàng)目部署時(shí)，往往會(huì)將代碼進(jìn)行一系列的壓縮來優(yōu)化它，如此會(huì)徹底破壞代...

Jackwoo 2019-08-23 11:34 評(píng)論0 收藏0
使用Docker-compose打包整個(gè)網(wǎng)站項(xiàng)目一鍵部署

一、前言我們常常見到很多比較棒的開源項(xiàng)目，但在本地安裝運(yùn)行的話就會(huì)很復(fù)雜，要配置不同的環(huán)境，安裝不同的依賴，好一點(diǎn)的會(huì)用docker直接拉取，或者打包好。這些無疑都會(huì)增加初學(xué)者上手的成本，所以這篇文章總結(jié)了下目前比較常用的解決方法之一：使用docker-compose同時(shí)管理多個(gè)服務(wù)，只需要一行命令docker compose up -d，就可以啟動(dòng)一個(gè)包含后端項(xiàng)目、前端項(xiàng)目、數(shù)據(jù)庫(kù)的完整服務(wù)。而...

社區(qū)管理員 2022-10-08 14:56 評(píng)論0 收藏0