Heroku Pipeline - Intermediate Variable Included in Production

Question

I recently used the React / Express application for Heroku, but I had a problem with environment variables that are part of Heroku's embedded application and deployment pipeline - in a nutshell, the values ​​of environment variables from the app stagingare transferred when moving to production- the only way I can correctly setting environment variables is a direct click on the application productionthat really defeats the goal of the deployment pipeline in the first place. Here is a brief description of the scenario:

The corresponding environment variable API_URLreferenced in webpack.config.jsthis way:

plugins: [
    new webpack.DefinePlugin({
        'API_URL': JSON.stringify(process.env.API_URL || 'http://localhost:4000/api/v1')
    })
]

The API itself is another Heroku application with releases stagingand production, therefore, the values ​​of the environment variable are API_URLset in my Reok application Heroku application configuration as https://staging-api-12345.herokuapp.com/api/v1well, https://production-api-12345.herokuapp.com/api/v1respectively.

When I push the React application up staging, it works fine, however, when I advertise the application up productionand make the first API call, it still points to https://staging-api-12345.herokuapp.com/api/v1. Well, I understand why this is so - the application was created by clicking on staging... so I tried to rebuild the application after moving up to production, but this did not work, it still used stagingenvironment variables.

Heroku slug , ?

Answer 1

, - .

, API_URL , . envs , env.js

export const API_URL = process.env.API_URL;
export const OTHER_VAR = process.env.OTHER_VAR;

,

import { API_URL, OTHER_VAR } from 'env.js';