Docker + Webpack Enviroment Variables

[spencerlepine]

Docker + Webpack Enviroment Variables Challenge

Situation

The client cannot bundle the files with webpack ( npm run build) without having all the environment variables already defined in the Node.js runtime. Dockerfile will execute npm run build, and it MUST set the ENV variables when building the image.

Note: docker can build the server image without ENV vars, and load/reference a .env file with dotenv when running a container later.

Task

My setup for this project is to read directly from a .env file. When building Docker images, this cuases problems, since different libaries handle process.env differently. Everything in this project should reference process.env from the Node.js runtime, instead of depending on a literal .env file.

The EC2 production server needed to have a .env file in the system, but this required me to manually SSH into the machine just create/update the values.

Action

Used build arguments to pass values to Docker when building images, and set ENV variables with running containers.

• [x] Refactored the Docker file for the client to refrence build ARGS and set ENV varaibles.
• [x] Updated the Docker-compose file to pass build-args when building client image
• [x] Updated the GitHub Action workfows to pass build-args when building the client image
• [x] Updated the GitHub Action workfows to pass env variables when running the client container
• [x] Removed broken refrences to .env file on the EC2 server. Only use ENV variables in the Node.js runtime, not storing a .env file on the EC2.

Review

Webpack is the main problem here. Use create-react-app can access .env files like the server does. I was hesitant to refactor the client and remove webpack in case it broke jest.

This was a valuable lesson to explore manaing ENV variables with Docker. I was able to thoughtfully plan how the project would access ENV vars throughout the build/testing/deployment phases.

Without running into this error, I would have still used a .env file manually on the EC2 server. Now, the GitHub enviroment will store the secrets, and the GitHub Action will set the ENV vars during the deployment.

[spencerlepine]

RED='\033[0;31'
BLUE='\033[34m'
GREEN='\033[0;32m'
NC='\033[0m' # No Color
echo -e "$BLUE Starting EC2 deployment script $NC"
sudo service docker stop
# rm -f .env
# echo "${{ secrets.ENV_PRODUCTION }}" > .env

NODE_ENV="${{ secrets.NODE_ENV }}"
SERVER_URL="${{ secrets.SERVER_URL }}"
PORT="${{ secrets.PORT }}"
MONGODB_URL="${{ secrets.MONGODB_URL }}"
SKIP_PREFLIGHT_CHECK="${{ secrets.SKIP_PREFLIGHT_CHECK }}"
REACT_APP_FIREBASE_API_KEY="${{ secrets.REACT_APP_FIREBASE_API_KEY }}"
REACT_APP_FIREBASE_AUTH_DOMAIN="${{ secrets.REACT_APP_FIREBASE_AUTH_DOMAIN }}"
REACT_APP_FIREBASE_PROJECT_ID="${{ secrets.REACT_APP_FIREBASE_PROJECT_ID }}"
REACT_APP_FIREBASE_STORAGE_BUCKET="${{ secrets.REACT_APP_FIREBASE_STORAGE_BUCKET }}"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="${{ secrets.REACT_APP_FIREBASE_MESSAGING_SENDER_ID }}"
REACT_APP_FIREBASE_APP_ID="${{ secrets.REACT_APP_FIREBASE_APP_ID }}"
REACT_APP_FIREBASE_MEASUREMENT_ID="${{ secrets.REACT_APP_FIREBASE_MEASUREMENT_ID }}"

# ls -a
echo -e "$GREEN Created the production .env file $NC"
docker kill $(docker ps -q) || true
docker system prune -a --volumes -f
echo -e "$RED Removed existing Docker containers $NC"
sudo service docker start
echo -e "$BLUE Authenticating Docker $NC"
docker login -u="${{ secrets.DOCKERHUB_USERNAME }}" -p="${{ secrets.DOCKERHUB_PASSWORD }}"
docker run --env-file ./.env -d -p 5000:5000 ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_SERVER_REPO }}:latest
echo -e "$BLUE Started up latest Server image $NC"

docker run -id -p 3000:3000 --env NODE_ENV=$NODE_ENV \
--env SERVER_URL=$SERVER_URL \
--env PORT=$PORT \
--env MONGODB_URL=$MONGODB_URL \
--env SKIP_PREFLIGHT_CHECK=$SKIP_PREFLIGHT_CHECK \
--env REACT_APP_FIREBASE_API_KEY=$REACT_APP_FIREBASE_API_KEY \
--env REACT_APP_FIREBASE_AUTH_DOMAIN=$REACT_APP_FIREBASE_AUTH_DOMAIN \
--env REACT_APP_FIREBASE_PROJECT_ID=$REACT_APP_FIREBASE_PROJECT_ID \
--env REACT_APP_FIREBASE_STORAGE_BUCKET=$REACT_APP_FIREBASE_STORAGE_BUCKET \
--env REACT_APP_FIREBASE_MESSAGING_SENDER_ID=$REACT_APP_FIREBASE_MESSAGING_SENDER_ID \
--env REACT_APP_FIREBASE_APP_ID=$REACT_APP_FIREBASE_APP_ID \
--env REACT_APP_FIREBASE_MEASUREMENT_ID=$REACT_APP_FIREBASE_MEASUREMENT_ID \
${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_CLIENT_REPO }}:latest

[spencerlepine]

Now running on https://bit.ly/woofer-demo