文章/答案/技术大牛

发布

社区首页 >问答首页 >用于react的运行时环境变量

问用于react的运行时环境变量
EN

Stack Overflow用户

提问于 2018-12-04 02:19:37

回答 1查看 2.7K关注 0票数 1

我们有三个环境Dev、Staging和Prod。创建-反应-应用程序构建非常适合于这三个环境，但是在构建过程中唯一的变化是API端点的环境变量。

我们正在为构建过程使用Jenkins管道，并将输出放在S3 Bucket中，这个过程的唯一问题是，我们必须为每个环境单独构建，尽管除了那个API环境变量之外，所有东西都是相同的。这需要相当长的时间。

因此，我可能的解决方案是从编译后的环境变量转移到运行时环境。我偶然发现了这。但我不知道如何在现实中成为Jenkins和AWS的新手

我们的文件夹结构如下所示

Project
|---mocks
|---static
|---index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React APP</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

reactjs

jenkins

amazon-s3

jenkins-pipeline

create-react-app

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-12 02:43:18

所以，我写的是我们解决这个问题的方式。在Jenkinfile文件中，该文件放置在我们的项目回购中。我们对每一种环境都作了如下改变。

在每个阶段之前，我们只需用各自的文件重写env.js。

 stage('Push to Dev') {
       ...
       steps {
         .....
           sh 'cp ./config/dev.js ./build/env.js'
            .....
       }
    }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53604806

复制

相似问题

问用于react的运行时环境变量
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于react的运行时环境变量EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于react的运行时环境变量
EN