[英]How to access environment variables from Node app client
I have a Node app deployed to Elastic Beanstalk.我有一个部署到 Elastic Beanstalk 的 Node 应用程序。 I have javascript that runs client-side to make HTTP requests.
我有运行客户端的 javascript 来发出 HTTP 请求。 The client-side javascript refers to routes that have the port hard-coded in the URI.
客户端 javascript 指的是在 URI 中具有硬编码端口的路由。
Elastic Beanstalk listens on port 8081. In my app.js file, I can write const port = process.env.PORT || 3000
Elastic Beanstalk 侦听端口 8081。在我的 app.js 文件中,我可以写
const port = process.env.PORT || 3000
const port = process.env.PORT || 3000
and that works just fine (because this runs server-side). const port = process.env.PORT || 3000
并且效果很好(因为它在服务器端运行)。
The difficulty I'm having is in my client-side javascript.我遇到的困难在于我的客户端 javascript。 Suppose I have something like this
假设我有这样的事情
fetch('http://localhost:3000/users/login', {...})
To run on Elastic Beanstalk, I need to change this to 8081, but if I try to make it dynamic as in app.js, the process
variable isn't found.要在 Elastic Beanstalk 上运行,我需要将其更改为 8081,但如果我尝试使其像在 app.js 中一样动态,则找不到
process
变量。 Concretely, if I change the route to具体来说,如果我将路线更改为
const port = process.env.PORT || 3000
fetch('http://localhost:' + port + '/users/login', {...})
then I get the following error: ReferenceError: Can't find variable: process
.然后我收到以下错误:
ReferenceError: Can't find variable: process
。
I think I understand the crux of the problem (the environment variables are only available on the server), but I'm a Node/Express noob, and I'm not sure what the best way is to access the PORT environment variable on the client.我想我明白问题的关键(环境变量仅在服务器上可用),但我是 Node/Express 菜鸟,我不确定访问 PORT 环境变量的最佳方法是什么客户。
If you use webpack
to bundle your FE application, you can configure your application to pass along the environment variables to the FE application.如果您使用
webpack
捆绑您的 FE 应用程序,您可以配置您的应用程序以将环境变量传递给 FE 应用程序。
This blog describes how it's done when using create react app
.这个博客描述了使用
create react app
时它是如何完成的。 On inspecting the webpack config, two functions which essentially do the trick are:在检查 webpack 配置时,两个主要起作用的函数是:
function getClientEnvironment () {
const raw = Object.keys(process.env)
// Custom regex to allow only a certain category of variables available to the application
.filter(<restrict the variables available to the application>)
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
NODE_ENV: process.env.NODE_ENV || 'development'
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
const env = getClientEnvironment()
And in your webpack configuration page, you could add these to the plugins
section of webpack config:在你的 webpack 配置页面中,你可以将这些添加到 webpack config 的
plugins
部分:
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
new webpack.DefinePlugin(env.stringified)
This will allow you to access the variables in js
as这将允许您访问
js
的变量
process.env.<VARIABLE NAME>
and in HTML
as:并在
HTML
为:
%<VARIABLE NAME>%
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.