Production Grade Workflow using Dockerfile, Dockerfile.dev, docker-compose.yml and Nginx server later deploying the app on AWS Elastic Beanstalk using Travis-CI and serve it to the end user(s).
This is a simple web app bootstrapped with Create React App.
This is a demo app built with an intention to successfully deploy a react.js app on AWS BEANSTALK and can be served to end user.
Note: You can also deploy this app on your local server by just using Dockerfile present in the root directory of this project, it will get deployed on NGINX server
Some pre-requisites to start with this projects:
- Docker and docker-compose should be installed on your local machine.
- Basic knowledge of GitHub.
- Basic knowledge of Travis-CI
- Basic knowledge of AWS and it's services will be plus.
If you are new to Docker find out how docker works here.
- Development Flow and running the application on development server.
- Running Unit Test Suite.
- Creating a Production ready build and deploying it to Nginx Server which further serves the application to end user.
- Dockerfile.dev
- Dockerfile
- docker-compose.yml
- Multi-Container
- Port-Mapping
- Volume-Mapping
| Command | Description |
|---|---|
| Dockerfile.dev | It's sole purpose is to run the project in Development environment by creating a Development Server and Unit Tests can also be run using this. |
| docker-compose.yml | This is just an extenstion for Dockerfile.dev, allowing us to run the containers without using long command in terminal as explained below, such as for volume mapping flow. |
| Dockerfile | This will create a production ready build and push it to Nginx container for Deployment purpose. |
| Command | Description |
|---|---|
| docker build -t image-name -f Dockerfile.dev . | This will create an image for the whole project and tagging it with a name. |
| docker run -p host_port:3000 image-name | This will start the Development Environment server and you can access the project on localhost:3000 (If you have mapped it to port 3000 on host machine). |
| docker run image-name npm run test | This will start Unit Tests in the project by overriding the primary command of the container to npm run test. |
| docker run -v /home/node/app/node_modules -v $(pwd):/home/node/app -p 3000:3000 container-id | This will start running docker container with volume mapping of host system directory with container's file system, this enable the changes to be reflected on browser without rebuilding the docker file. |
| Command | Description |
|---|---|
| docker-compose up | This will start building the project using the provided configuration and start Development server and start running the test suite too. |
Make a small change to your src/App.js file in the greeting text and see the changes getting reflected on your browser realtime without you having to rebuild the image that's the power of volume mapping.
| Command | Description |
|---|---|
| docker build -t image-name . | This will create a production optimized build ready to be served and tagging it with a name. |
| docker run -p host_port:80 image-name | *This will start the container with Nginx server and map it to the specified host port and can be viewed on localhost:8080 (If you have mapped it to port 8080 on host machine). * |
Once you are satisfied with the way your application work on your deployment server(NGINX) you can go ahead and configure your AWS and Travis CI to automate the build deployment as soon as you push your changes to the master branch of the project.
Steps to configure AWS and Travis-CI to automate the build generation can be found here.