解决nextjs生产环境下客户端（浏览器）无法获取环境变量的问题

ragga-time

于 2024-05-14 18:57:49 发布

阅读量416

点赞数 2

文章标签： next.js docker 环境变量

本文链接：https://blog.csdn.net/weixin_44273392/article/details/138866027

版权

问题发现

在完成 docker 部署至生产环境时发现浏览器获取不到容器注入的环境变量但是服务端（nodejs）可以；

尝试了许多方式 publicRuntimeConfig / config 以及官方的NEXT_PUBLIC前缀都无法让浏览器获取到容器注入的环境变量

参考方案

于是在网上找到了一篇解决方案参考了下：
参考连接

解决方案

结果发现在 _document.tsx 这个入口中导出的 Document 组件只会在服务端运行【nodejs】 并且每次刷新都会运行;

那么就可以在这个组件中将环境变量注入到浏览器的 window 中

import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default function Document() {
	const processEnv = {
		env: {
			NEXT_PUBLIC_CLIENT_URL: process.env.NEXT_PUBLIC_CLIENT_URL
		}
	}
	console.log('这里是服务端生成配置发送给客户端的地方 => ', processEnv);

	return (
		<Html lang="en">
			<Head />
			<body>
				<Script id="initState" strategy="beforeInteractive">
					{`window.process=${JSON.stringify(processEnv)}`}
				</Script>
				<Main />
				<NextScript />
			</body>
		</Html>
	);
}

这样全局的process.env中就能获取到容器注入的环境变量了

const BASE_URL = `http://${
    typeof window !== 'undefined' ? process.env.NEXT_PUBLIC_CLIENT_URL : 
    process.env.NEXT_PUBLIC_SERVER_URL
}/clientApi`;

并且在容器环境变量发生改变时，刷新客户端即可获得最新的环境变量了。不需要重启容器

ragga-time

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
解决nextjs生产环境下客户端（浏览器）无法获取环境变量的问题

在完成 docker 部署至生产环境时发现浏览器获取不到容器注入的环境变量但是服务端（nodejs）可以；这样全局的process.env中就能获取到容器注入的环境变量了。，刷新客户端即可获得最新的环境变量了。那么就可以在这个组件中将环境变量注入到浏览器的。前缀都无法让浏览器获取到容器注入的环境变量。并且每次刷新都会运行;
复制链接

扫一扫