2

我們使用的是Webpack,React,Node.JS,但我認爲這個問題更具通用性,即具體的技術。在構建開發模式或生產模式時(例如使用DefinePlugin),我可以使用Webpack配置SPA。如何在加載時配置SPA?

如何針對不同的部署環境(例如分段生產)在生產模式下配置SPA(在生成時配置)?例如,這些不同的部署會與不同的後端服務器API進行交談。

不知何故,SPA必須從服務器取得一些本地上下文,因爲它正在被瀏覽器取得。或者,我們必須在SPA可以安全地獲取的每臺服務器上擁有一個自定義配置文件?

我們在服務器上使用NodeJS,這個SPA最終將作爲一個同構的應用程序運行,這樣可以提供幫助。我們正在將這些應用程序部署在Docker鏡像中,並且在部署時很容易配置它們的環境。

感謝您的任何建議。

+0

單獨的webpack配置和環境變量之間的組合? – azium

+1

可以構建許多不同的SPA(使用webpack配置和環境變量),但是在構建時配置不是「運行」時間。 –

+0

你可以試試browserify和dotenv節點模塊? – maheshiv

回答

-1

我發現做的是需要什麼的一種方式。通過在提供SPA時設置配置細節的cookie。然後,SPA可以讀取該cookie來獲取配置(並刪除該cookie,因爲它不再需要)。

有一個名爲ClientConfig的NPM模塊,它將協助完成我所描述的內容。它與稱爲GetConfig的伴隨NPM模塊非常相似,它有助於在服務器端進行配置。 ClientConfig:https://github.com/henrikjoreteg/clientconfig

如何使用ClientConfig和GetConfig(單獨和共同)這裏描述:http://read.humanjavascript.com/ch12-settings-and-configs.html

這似乎是一個解決方案,我雖然我不知道任何潛在的安全問題(這是送花兒給人不是第一次出現更復雜),如果沒有更簡單的方法。任何意見或進一步的解決方案將不勝感激

+0

請解釋您爲什麼認爲這不是一個解決方案 - 我認爲這是解決方案! –

0

我們現在正在爲同樣的概念而苦苦掙扎。我發現在運行時配置的最佳方式是使用env變量(可以在構建時設置,但也可以在運行時使用docker native或任何其他編排工具(例如ECS或GKE)覆蓋)。

另一個更髒的方式,我們以前使用的是通過圖像的CMD指令執行運行時調整。這不是真正的建議,因爲它使你的圖像可變,並可以使它容易出錯。然而 - 它確實有效,如果明智地使用可以達到你想要的。這樣做的一個簡單的例子是替換當前的CMD這可能看起來有點像這樣CMD node app.js像這樣的東西 - bash -c "wget prod.conf && node app.js"

+0

我不確定如何爲Web瀏覽器設置環境變量。我在服務器上設置了所有的環境變量,當然,它們不會影響客戶端。同樣,對於Docker鏡像/容器上的CMD指令。 SPA已經在Docker鏡像中構建。 –

-1

我們當前的代碼使用WebPack DefinePlugin,但我不認爲這允許我們做我們需要的。我還發現,其中提到的客戶端,但再一次,我不確定它是否是一個可行的解決方案的ExtendedDefinePlugin:

https://github.com/ArikMaor/extended-define-webpack-plugin https://www.npmjs.com/package/extended-define-webpack-plugin

的DefinePlugin也在這裏討論:

Passing environment-dependent variables in webpack

但我不相信這將允許我們根據部署上下文而不是構建上下文來配置客戶端SPA。