0% found this document useful (0 votes)
47 views9 pages

Fix React App Exit Issues in Docker

This document provides troubleshooting steps for issues with React apps running in Docker, including adding properties to the docker-compose.yml file and addressing test re-running issues on Windows. It also outlines necessary updates for Travis CI configurations and AWS Elastic Beanstalk deployment settings. Additionally, it includes instructions for cleaning up resources and creating IAM users for AWS access.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
47 views9 pages

Fix React App Exit Issues in Docker

This document provides troubleshooting steps for issues with React apps running in Docker, including adding properties to the docker-compose.yml file and addressing test re-running issues on Windows. It also outlines necessary updates for Travis CI configurations and AWS Elastic Beanstalk deployment settings. Additionally, it includes instructions for cleaning up resources and creating IAM users for AWS access.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

React App Exited With Code 0

4-1-2020
Recently, a bug was introduced with the latest Create React App
version that is causing the React app to exit when starting with
Docker Compose.

To Resolve this:

Add stdin_open property to your docker-compose.yml file


1. web:
2. stdin_open: true

Make sure you rebuild your containers after making this change
with docker-compose down && docker-compose up --build
https://github.com/facebook/create-react-app/issues/8688
https://stackoverflow.com/questions/60790696/react-scripts-start-
exiting-in-docker-foreground-cmd

updated 4-21-2020

If you are using any version of Windows and your React app is not
automatically reloading after a code change, you can add this
environment variable to your compose file:
1. services:
2. web:
3. environment:
4. - CHOKIDAR_USEPOLLING=true

5. Tests Not Re-running on


Windows
6. updated 4-21-2020
7. If you are using Windows Home you may have noticed that
when adding a test or making a change to the App.test.js
the tests are not re-running inside the container.
8. While this works on macOS (and likely Linux), Jest watchers
seem to be completely broken on certain versions of
Windows. We are looking into a potential fix or hack to get
this working again and will update this note if we find one.
9. Note - Since the latest release of Create React App and
Docker Desktop v2.2 this does not appear to be an issue for
Windows Pro or Enterprise users.
Required Travis Script Updates
In the upcoming lecture, we will be adding a script to
our .travis.yml file. Due to a change in how the Jest library works
with Create React App, we need to make a small modification:
1. script:
2. - docker run USERNAME/docker-react npm run test -- --coverage
3.

instead should be:


1. script:
2. - docker run -e CI=true USERNAME/docker-react npm run test

Additionally, you may want to set the following property to the


top of your .travis.yml file:
1. language: generic

You can read up on the CI=true variable here:

https://facebook.github.io/create-react-app/docs/running-
tests#linux-macos-bash
and environment variables in Docker here:

https://docs.docker.com/engine/reference/run/#env-environment-
variables

Required Updates for Amazon


Linux 2 Platform - DO NOT SKIP
updated 8-12-2021
When creating our Elastic Beanstalk environment in the next
lecture, we need to select Docker running on 64bit Amazon
Linux 2 and make a few changes to our project:
This new AWS platform will conflict with the project we have built
since it will look for a docker.compose.yml file to build from by
default instead of a Dockerfile.

To resolve this, please do the following:

1. Rename the development Compose config file


Rename the docker-compose.yml file to docker-compose-
dev.yml. Going forward you will need to pass a flag to specify
which compose file you want to build and run from:
docker-compose -f docker-compose-dev.yml up
docker-compose -f docker-compose-dev.yml up --build
docker-compose -f docker-compose-dev.yml down
2. Create a production Compose config file
Create a docker-compose.yml file in the root of the project and
paste the following:
1. version: '3'
2. services:
3. web:
4. build:
5. context: .
6. dockerfile: Dockerfile
7. ports:
8. - '80:80'

AWS EBS will see a file named docker-compose.yml and use it to


build the single container application.

Travis Keys Update and Account


Migration
In the upcoming lecture, we will be adding our AWS variables to
the deploy script of the .travis.yml file. There is a slight change
that will be required, otherwise, you will get an error when Travis
attempts to run your code.

The code will now look like this:


1. access_key_id: $AWS_ACCESS_KEY
2. secret_access_key: $AWS_SECRET_KEY

Important - Please read before deploying


Travis is in the process of finalizing its transition from .org
to .com. By the end of May 2021, the .org services will be fully
shut down. If you are still using a travis-ci.org account you will
need to follow this migration guide ASAP:

https://docs.travis-ci.com/user/migrate/open-source-repository-
migration#migrating-a-repository

Environment Cleanup
Remember, we need to delete the resources we created or you
might end up paying real money for them. To clean up the Elastic
Beanstalk instance we created, do the following:

1. Go to the Elastic Beanstalk dashboard.

2. In the left sidebar click "Applications"

3. Click the application you'd like to delete.

4. Click the "Actions" button and click "Delete Application"


5. You will be prompted to enter the name of your application to
confirm the deletion.

Note: it might take a few minutes for the dashboard to update


and show that your app is being deleted. Be a little patient!
AWS Configuration Cheat Sheet
updated 8-12-2021
This lecture note is not intended to be a replacement for the
videos, but to serve as a cheat sheet for students who want to
quickly run thru the AWS configuration steps or easily see if they
missed a step. It will also help navigate through the changes to
the AWS UI since the course was recorded.

Docker Compose config Update


Make sure to follow the steps in the earlier lecture note to rename
your development docker compose file and create a new
production compose file:

https://www.udemy.com/course/docker-and-kubernetes-the-
complete-guide/learn/lecture/27975358
Initial Setup
1. Go to AWS Management Console

2. Search for Elastic Beanstalk in "Find Services"

3. Click the "Create Application" button

4. Enter "docker" for the Application Name

5. Scroll down to "Platform" and select "Docker" from the


dropdown list.

6. Change "Platform Branch" to Docker running on 64bit


Amazon Linux 2
7. Click "Create Application"

8. You should see a green checkmark after some time.

9. Click the link above the checkmark for your application. This
should open the application in your browser and display a
Congratulations message.

Change from Micro to Small instance type:


Note that a t2.small is outside of the free tier. t2 micro has been
known to timeout and fail during the build process on the old
platform. However, this may not be an issue on the new
Docker running on 64bit Amazon Linux 2 platform. So,
these steps may no longer be necessary.
1. In the left sidebar under Docker-env click "Configuration"

2. Find "Capacity" and click "Edit"

3. Scroll down to find the "Instance Type" and change


from t2.micro to t2.small
4. Click "Apply"

5. The message might say "No Data" or "Severe" in Health


Overview before changing to "Ok"

Add AWS configuration details to .travis.yml file's deploy


script
1. Set the region. The region code can be found by clicking the
region in the toolbar next to your username.
eg: 'us-east-1'

2. app should be set to the Application Name (Step #4 in the


Initial Setup above)
eg: 'docker'

3. env should be set to the lower case of your Beanstalk


Environment name.
eg: 'docker-env'

4. Set the bucket_name. This can be found by searching for the


S3 Storage service. Click the link for the elasticbeanstalk bucket
that matches your region code and copy the name.
eg: 'elasticbeanstalk-us-east-1-923445599289'

5. Set the bucket_path to 'docker'


6. Set access_key_id to $AWS_ACCESS_KEY
7. Set secret_access_key to $AWS_SECRET_KEY
Create an IAM User
1. Search for the "IAM Security, Identity & Compliance Service"

2. Click "Create Individual IAM Users" and click "Manage Users"

3. Click "Add User"

4. Enter any name you’d like in the "User Name" field.

eg: docker-react-travis-ci

5. Tick the "Programmatic Access" checkbox


6. Click "Next:Permissions"

7. Click "Attach Existing Policies Directly"

8. Search for "beanstalk"

9. Tick the box next to "AdministratorAccess-


AWSElasticBeanstalk"

10. Click "Next:Tags"

11. Click "Next:Review"

12. Click "Create user"

13. Copy and / or download the Access Key ID and Secret Access
Key to use in the Travis Variable Setup.
Travis Variable Setup
1. Go to your Travis Dashboard and find the project repository for
the application we are working on.

2. On the repository page, click "More Options" and then


"Settings"

3. Create an AWS_ACCESS_KEY variable and paste your IAM


access key from step #13 above.
4. Create an AWS_SECRET_KEY variable and paste your IAM secret
key from step #13 above.
Deploying App
1. Make a small change to your src/App.js file in the greeting text.

2. In the project root, in your terminal run:


1. git add.
2. git commit -m “testing deployment"
3. git push origin main

3. Go to your Travis Dashboard and check the status of your build.

4. The status should eventually return with a green checkmark


and show "build passing"

5. Go to your AWS Elasticbeanstalk application

6. It should say "Elastic Beanstalk is updating your environment"


7. It should eventually show a green checkmark under "Health".
You will now be able to access your application at the external
URL provided under the environment name.

You might also like