Skip to content

Fix ENV variables are not being set inside docker #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 20, 2023
Merged

Fix ENV variables are not being set inside docker #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a254b0
Fix ENV variables are not being set inside docker
pashidlos Aug 16, 2023
3bafd4f
Update Dockerfile
pashidlos Aug 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
REACT_APP_API_URL=http://localhost:4200
PORT=8080
VRT_VERSION=4.20.0
VRT_VERSION=5.0.0
26 changes: 19 additions & 7 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,19 @@ FROM node:18-alpine3.18 AS builder
WORKDIR /app

# Copy all files from the repo to /app
COPY . .
COPY /public ./public
COPY /src ./src
COPY index.html .
COPY package*.json .
COPY tsconfig.json .
COPY vite.config.ts .

# Install app dependencies
RUN npm ci --verbose

# Build the ui
RUN npm run build

# Create environment variable js file
RUN node generate-env-browser.js

### STAGE 2: Run ###
# This image is around 5 megabytes
FROM nginx:1.25-alpine3.17-slim
Expand All @@ -26,7 +28,17 @@ COPY /nginx /etc/nginx/conf.d
EXPOSE 8080
EXPOSE 443

COPY --from=builder /app/build /usr/share/nginx/html
COPY --from=builder /app/env-config.js /usr/share/nginx/html/
WORKDIR /usr/share/nginx/html

# Copy built source
COPY --from=builder /app/build .

# Copy override ENV script with default values
COPY ./env.sh .
COPY .env .
Copy link
Contributor

@paazmaya paazmaya Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps the issue could be fixed by just this one line change, to copy .env file to Docker container

Copy link
Member Author

@pashidlos pashidlos Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is how it currently works and though the root cause
it's copied with default values like localhos:4200 and when container starts it should be overridden by ENV variables from docker
if the script to form new .env file is not executed within the container it remains unchanged

Copy link
Contributor

@paazmaya paazmaya Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you clarify what do you mean?

Copy link
Member Author

@pashidlos pashidlos Aug 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is what I expect _env_ variable to be on real env

{
   PORT: "443"
   REACT_APP_API_URL: "https://visual-regression-tracker.com:4200"
   VRT_VERSION: "5.0.0-rc3"
}

despite the values that are copied into image initially https://github.com/Visual-Regression-Tracker/frontend/blob/master/.env

we set those values via docker-compose env variables https://github.com/Visual-Regression-Tracker/frontend/blob/master/docker-compose.yml#L13-L14

so when you start the app we have script executed to form new _env_ https://github.com/Visual-Regression-Tracker/frontend/blob/master/package.json#L41

and we need the same inside the container
I could have used initial node script but alpine image doesn't have node installed

Copy link
Contributor

@paazmaya paazmaya Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I see. So the JavaScript file generation should happen later in the process, perhaps in the stage 2

Copy link
Member Author

@pashidlos pashidlos Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SwiLink I can see that VRT_VERSION is set
what is the value in .env for REACT_APP_API_URL?
also docker-compose file should have it set as in template https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/blob/master/docker-compose.yml#L18

Copy link

@SwiLink SwiLink Aug 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

REACT_APP_API_URL - https://mywebsite.com/api, for example, but it's really set in .env, have rebuilded images and containers multiple times. Can provide real website personally in Telegram, i think.

Copy link
Member Author

@pashidlos pashidlos Aug 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SwiLink let's keep it transparent
I'm not providing support via private messages, we have public chat and github for it
replace sensitive data before sharing

Copy link

@SwiLink SwiLink Aug 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! Ok, here is my .env:

## Logging
# https://www.elastic.co/guide/en/elastic-stack/7.14/overview.html
ELK_VERSION=7.14.1
ELASTIC_URL=http://localhost:9200

## VRT version
VRT_UI_VERSION="5.0.0-rc3"
VRT_API_VERSION=5.0.0
VRT_MIGRATION_VERSION=5.0.0

## Frontend

# direct URL to backend with port (same as APP_PORT)
REACT_APP_API_URL=https://screenshots.wifox.org/api
# frontend port
PORT=8080

## Backend

# direct URL to frontend with port (same as PORT)
APP_FRONTEND_URL=https://screenshots.wifox.org
# backend port
APP_PORT=4200
# seed to generate JWT
JWT_SECRET=test
# user session lifetime
JWT_LIFE_TIME=1d
# max image size to upload
BODY_PARSER_JSON_LIMIT="5mb"

## DB

POSTGRES_PORT=5432
POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=vrt_db

Copy link

@SwiLink SwiLink Aug 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now it's working:)) Don't know what's the reason, but i know that later it will stop to work:)


# Make our shell script executable
RUN chmod +x env.sh

# Nginx server will now start automatically.
# Start Nginx server with override ENV variables script
CMD ["/bin/sh", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
7 changes: 7 additions & 0 deletions env.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
#!/bin/sh
# (c) https://github.com/kunokdev/cra-runtime-environment-variables/blob/master/env.sh
# line endings must be \n, not \r\n !

echo "window._env_ = {" > ./env-config.js
awk -F '=' '{ print $1 ": \"" (ENVIRON[$1] ? ENVIRON[$1] : $2) "\"," }' ./.env >> ./env-config.js
echo "}" >> ./env-config.js
43 changes: 0 additions & 43 deletions generate-env-browser.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"uuid": "^9.0.0"
},
"scripts": {
"start": "node generate-env-browser.js && cp env-config.js ./public/ && vite",
"start": "chmod +x ./env.sh && sh ./env.sh && cp env-config.js ./public/ && vite",
"test": "jest",
"format": "prettier --write integration_tests src *.js *.ts *.md",
"build": "vite build",
Expand Down