作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如果之前已经回答过这个问题,我深表歉意,但我在这里用一些应该很简单的东西撞墙......
我的项目正在运行 server
模式。我们需要能够在 处传递环境变量运行时间 并在 上提供它们两者 服务器端和客户端
我正在使用 publicRuntimeConfig
docs 中描述的方法我没有做任何不寻常的事情(要遵循的代码)
问题是在开发模式( yarn dev
)下运行时一切正常,但是当我构建项目并将其 dockerize (或将其移动到 kubernetes 进行部署)时,它无法正常工作。
这是代码:next.config.js
const nextConfig = {
publicRuntimeConfig: {
PARAM_A: process.env.PARAM_A || "defaultA",
PARAM_B: process.env.PARAM_B || "defaultB"
}
};
module.exports = nextConfig;
_app.tsx
import React from "react";
import App, { AppContext } from "next/app";
import Head from "next/head";
import { Menu } from "../src/components/menu";
class CustomApp extends App {
static async getInitialProps({ Component, ctx }: AppContext) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
console.log("[_app.tsx] pageProps", pageProps);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
<>
<Head>
<title>Testing Area</title>
</Head>
<Menu />
<Component {...pageProps} />
</>
);
}
}
export default CustomApp;
index.tsx
,
otherpage.tsx
和
help.tsx
除了措辞之外完全相同,所以我只会放下
index.tsx
节省空间:
import React, { Component } from "react";
import getConfig from "next/config";
import { NextPageContext } from "next";
class Index extends Component {
static async getInitialProps(ctx: NextPageContext) {
const nextConfig = getConfig();
const clientConfig = (nextConfig && nextConfig.publicRuntimeConfig) || {};
const settings = Object.keys(process.env).length > 1 ? process.env : clientConfig;
console.log("[INDEX PAGE] - nextConfig", nextConfig);
console.log("[INDEX PAGE] - clientConfig", nextConfig.publicRuntimeConfig);
console.log("[INDEX PAGE] - settings", settings);
console.log("[INDEX PAGE] - process.env", process.env);
return { settings };
}
render() {
return <div>INDEX Page</div>;
}
}
export default Index;
yarn dev
,此行在浏览器开发工具中的输出
console.log("[INDEX PAGE] - nextConfig", nextConfig);
符合预期(注意
PARAM_A
和
PARAM_B
):
[INDEX PAGE] - nextConfig
{serverRuntimeConfig: {…}, publicRuntimeConfig: {…}}
serverRuntimeConfig: {}
publicRuntimeConfig:
PARAM_A: "mycustomAvalue"
PARAM_B: "mycustomBvalue"
__proto__: Object
__proto__: Object
publicRuntimeConfig
:
[INDEX PAGE] - nextConfig
{serverRuntimeConfig: {…}, publicRuntimeConfig: {…}}
serverRuntimeConfig: {}
publicRuntimeConfig: {}
__proto__: Object
最佳答案
publicRuntimeConfig
将在您构建应用程序时进行捆绑。
当您构建 Docker 镜像时,您的应用程序构建就会发生。但是,您的环境变量此时不可用。
当您启动容器时,您提供环境变量,以便您的服务器端代码可以使用它们,但您的客户端代码不能。
一种解决方案是在容器启动时构建您的应用程序,因为构建将可以访问您提供的 env 变量。不过,我不会真正推荐这种方法。
另一种解决方案是使用 Docker 构建参数在构建时设置环境变量:
文件
ARG PARAM_A
ARG PARAM_B
ENV PARAM_A=$PARAM_A
ENV PARAM_B=$PARAM_B
# ...
docker build --build-arg PARAM_A=something --build-arg PARAM_B=something ...
关于typescript - NextJS 和环境变量 - 向客户端获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59877588/
我是一名优秀的程序员,十分优秀!