Continuous Delivery Using Docker - A React.js Application
Let's recap where we are so far:
- In my first post, Getting Docker Running On AWS, I explored what Docker is then walked through the steps to get a hello world web application up on Amazon Web Services.
- In the next post, Docker Hub Hello World, the focus was switched to creating my own image in Docker Hub. This was a manual build.
- Logically, the next post was to automate the build process, Docker Hub Automated Build.
Now, if we know how to create an automatic Docker Hub build, and we know how to do a manual deploy to Amazon Web Services, then, we should be able to kick off an application deploy upon a successful build with a code change in one of our own repositories.
Let's explore how we can do this with a React.js application.
Create a React.js Application
I mentioned in my Docker Hub Automated Build blog, I have been going through a course by Tyler McGinnis, React.js Fundamentals. The intent of this article is not to explain or teach React.js. The first two sections of the course do a great job of explaining the framework.
For the purposes of this tutorial, the only additional requirement (assuming previous prerequisites of other tutorials are met) is to have node installed on your computer, https://nodejs.org/en/download/.
You can refer to my React.js tutorial on my GitHub repository as a foundation for your own example, https://github.com/DEV3L/docker-node-js-webpack.git.
Test Your Application Locally
The following commands assume you already have git and node installed.
git clone https://github.com/DEV3L/docker-node-js-webpack.git
cd docker-node-js-webpack
npm install
npm run start
curl http://localhost:8080Create An Automated Docker Hub Build
- In GitHub Add Docker as a Service Through a Your Repository's Settings
- https://github.com/ -> Your Repository
- Settings > Webhooks & Services > Docker
- Create an Automated Docker Hub Build Linking to the GitHub Repository Clone
- https://hub.docker.com/
- Click the Create button -> select Create Automated Build
- Click the Create Auto-build Github button
- Name the repository and give it an optional description
- https://hub.docker.com/r/dev3l/node-react-webpack-hello-world/
- Manually Run The First Build
- From your Docker Hub repository click the Build Settings tab
- You can manually trigger a build from each repository, click the Trigger button
Run Your Application in a Docker Container
The following commands assume you already have docker installed and started.
docker run -d -p 8080:8080 dev3l/node-react-webpack-hello-world
curl http://192.168.99.100:8080/Create a Continuous Delivery Pipeline Using Docker Cloud
This section assumes that you have created an AWS account and have followed through the Getting Docker Running On AWS blog.
- https://cloud.docker.com/dashboard/onboarding
- Click Create A Stack -> Create
Stackfile:
web:
autoredeploy: true
image: "dev3l/node-react-webpack-hello-world"
ports:
- "3002:8080"- Click Create and Deploy
Find Your Stack Endpoint URL
If you navigate to your stack you just created (should be showing by default if you are still on the previous step), you can find the Endpoint section with a link to your running container.
E.g.: http://web.docker-node-js-webpack.37959054.svc.dockerapp.io:3001/
Summary
Our introductory exploration of Docker is complete.
We have a working example of a Continuously Delivered application using Docker. This is some pretty powerful stuff. In essence, if you know how to deploy a Docker container, you know how to deploy all Docker containers.
One additional step that I did not include in this tutorial was to register the endpoint to a domain. I did a quick Google search and found a site that lets users register free .com alternatives, http://www.com.nu/. The process of registering a domain through them is pretty easy, although I would not recommend it for a high visibility production site.
Get In Touch
We'd love to hear from you! Whether you have a question about our services, need a consultation, or just want to connect, our team is here to help. Reach out to us through the form, or contact us directly via social media.
