React项目如何仅在生产环境保留Head脚本，Staging环境移除？

核心结论：可以通过代码条件判断实现，同时结合部署流程配置环境变量，以下是几种适配你GCP+Docker部署场景的方案： #

方案1：在Create React App的public/index.html中使用环境变量（适合静态HTML模板场景） #

如果你的React项目基于Create React App（CRA）开发，它支持在public/index.html中直接引用以REACT_APP_开头的环境变量，我们可以通过构建时的环境变量控制脚本是否渲染：

1. 配置构建环境变量

   • 生产环境构建命令：

     REACT_APP_DEPLOY_ENV=production npm run build
     

   • Staging环境构建命令：

     REACT_APP_DEPLOY_ENV=staging npm run build
     

   （如果用Docker构建，将上述命令写入Dockerfile，不同环境传递对应的构建参数即可）

2. 修改public/index.html
   在head区域用条件注释结合环境变量实现控制：

   <head>
     <!-- %REACT_APP_DEPLOY_ENV% === 'production' ? '' : '<!--' -->
     <script type='text/javascript'>
       (function(){var g=function(p,q,t,v){
       this.get=function(a){for(var a=a+"=",c=document.cookie.split(";"),b=0,p=c.length;b<p;b++){for(var d=c[b];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};
       this.set=function(a,c){var b="",b=new Date;b.setTime(b.getTime()+6048E5);b="; ";
       try{(new g(100,"r","abcd","https://abcd.siteinterpret.com")).start()}catch(i){}})();
     </script>
     <div id='abcd'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
     <!-- %REACT_APP_DEPLOY_ENV% === 'production' ? '-->' : '' -->
   </head>
   

方案2：用React Helmet动态注入脚本（适合组件级控制） #

如果你的head内容通过React组件管理，推荐使用react-helmet库动态控制脚本加载，灵活性更高：

1. 安装react-helmet

   npm install react-helmet
   

2. 在根组件中添加条件渲染逻辑

   import { Helmet } from 'react-helmet';
   
   function App() {
     // 从环境变量获取当前部署环境
     const isProduction = process.env.REACT_APP_DEPLOY_ENV === 'production';
   
     return (
       <>
         <Helmet>
           {isProduction && (
             <>
               <script type='text/javascript'>
                 {(function(){var g=function(p,q,t,v){
                 this.get=function(a){for(var a=a+"=",c=document.cookie.split(";"),b=0,p=c.length;b<p;b++){for(var d=c[b];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};
                 this.set=function(a,c){var b="",b=new Date;b.setTime(b.getTime()+6048E5);b="; ";
                 try{(new g(100,"r","abcd","https://abcd.siteinterpret.com")).start()}catch(i){}})();
               </script>
               <div id='abcd'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
             </>
           )}
         </Helmet>
         {/* 你的其他组件内容 */}
       </>
     );
   }
   
   export default App;
   

3. 部署时配置环境变量
   在Docker构建或docker-compose中设置REACT_APP_DEPLOY_ENV变量：

   • 生产环境Dockerfile示例：

     FROM node:18-alpine
     WORKDIR /app
     COPY package*.json ./
     RUN npm install
     COPY . .
     ENV REACT_APP_DEPLOY_ENV=production
     RUN npm run build
     # 后续部署静态文件的步骤...
     

   • Staging环境可通过构建参数传递变量：

     docker build --build-arg DEPLOY_ENV=staging -t my-app:staging .
     

方案3：Docker构建时替换静态文件内容（适合非CRA项目） #

如果你的项目不是基于CRA开发，可在Docker构建阶段用sed命令替换index.html中的脚本内容：

1. 在index.html中标记脚本块

   <head>
     <!-- PRODUCTION_ONLY_SCRIPT_START -->
     <script type='text/javascript'>
       <!-- 你的脚本内容 -->
     </script>
     <div id='abcd'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
     <!-- PRODUCTION_ONLY_SCRIPT_END -->
   </head>
   

2. Dockerfile中添加条件替换逻辑

   FROM node:18-alpine
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build
   
   # 根据构建参数决定是否保留脚本
   ARG DEPLOY_ENV=production
   RUN if [ "$DEPLOY_ENV" = "staging" ]; then \
         sed -i '/PRODUCTION_ONLY_SCRIPT_START/,/PRODUCTION_ONLY_SCRIPT_END/d' build/index.html; \
       fi
   
   # 后续部署步骤...
   

3. 构建不同环境的镜像

   • 生产环境：

     docker build --build-arg DEPLOY_ENV=production -t my-app:prod .
     

   • Staging环境：

     docker build --build-arg DEPLOY_ENV=staging -t my-app:staging .
     

关于你尝试的代码说明 #

你之前用<% if (process.env.NODE_ENV === 'production') %>是EJS模板语法，React项目默认不支持这种写法（除非额外配置模板引擎），所以直接使用会无效。上面的方案均适配React项目和你的GCP+Docker部署场景。

内容的提问来源于stack exchange，提问作者Valeria