Due to React’s inlining, console.log(process.env.REACT_APP_FIREBASE_API_KEY); should work while console.log(process); should give you ReferenceError: process is not defined. (You are using Create React App, right?)
But note that this will only work from your src/*.js files (which undergo the inlining), not interactively in the web browser console.
If the code in the generated bundle is console.log(process.env.REACT_APP_FIREBASE_API_KEY); instead of console.log("test16682");, it suggests that the inlining failed (e.g. because env var was not set when npm run build ran, or because you forgot the process.env. part, or because the env var’s name didn’t start with “REACT_APP_”).
If you still have trouble, I suggest you take baby steps starting from a version with an .env file (since you managed to get that working before):
-
Make sure that with an .env file you can use
console.log(process.env.REACT_APP_FIREBASE_API_KEY);
from src/*.js.
(Maybe also look at generated bundle to confirm inlining happened as expected.)
-
Switch to an env var by removing the .env file and setting the build command in the Dockerfile to
RUN REACT_APP_FIREBASE_API_KEY=test16682 npm build
Make sure console.log() still works.
-
Switch to a build secret by setting the build command to
RUN --mount=type=secret,id=REACT_APP_FIREBASE_API_KEY \
REACT_APP_FIREBASE_API_KEY="$(cat /run/secrets/REACT_APP_FIREBASE_API_KEY)" \
npm run build
and deploy using fly deploy --build-secret REACT_APP_FIREBASE_API_KEY=test16682.
When I said you could view the source of those files using a web browser, I meant that if you know which generated file contains the secret (e.g. build/static/js/main.XXX.js), you ought to be able to view that file from a web browser (e.g. open the app in the web browser, use “View Source”, then edit the URL to point to the generated file, maybe view-source:https://APP_NAME.fly.dev/static/js/main.XXX.js). Then use “Find” to look for the secret. If you find it, you have proof that it’s public. [Edit: The value will be visible as long as the variable is used somewhere in your code, doesn’t have to be via console.log().]
General tip: You’ll usually get better help if you can provide a “minimal reproducible example”, e.g.
Run npx create-react-app my-app, append console.log(process.env.REACT_APP_FIREBASE_API_KEY); to my-app/src/index.js, create Dockerfile with content <XXX> [text please – not image], run fly ..., open the app in a web browser. Expect secret to be displayed in browser’s web console, but instead get <full error message>.
(Obviously it’s not always possible to create such an example, but when it is it can make debugging much easier.)
