Even if this website is written in HTML 5 and uses some of the most known technologies and frameworks for web development (Bootstrap, CSS, JavaScript), its main goal is to be implemented with a DevOps approach.
Each website version listed below uses different DevOps tools - check them to find out more.
This version implements CI/CD pipelines using GitHub, DockerHub and Azure DevOps.
The CI pipeline built on Azure DevOps will be triggerd when the DEVELOP branch from GitHub is modified. If the build is successful, the resulting image will be uploded in a DockerHub repository.
The CD pipeline built on DockerHub will be trigged when the MASTER branch from GitHub recives a new version tag. In this case, the Build Job will be computed on DockerHub servers, and the resulting image will be saved in a different repository.
Step 1 - Link GitHub and DockerHub to Azure Pipeline.
Project settings -> Serivce connections -> New service connections -> GitHub.
Project settings -> Serivce connections -> New service connections -> Docker registry and fill in the connection form.
Step 2 - Link GitHub to DockerHub. Create DockerHub repositories.
Account Settings -> Linked Accounts and select GitHub from the Provider tab.
Repositories -> "Target Rpository Name" -> Builds -> Configure Automated Builds,
and select Tag as Source Type in the Build Rules category.
Step 3 - Build Azure DevOps pipelines
Pipelines -> Builds -> New Pipeline, then choose GitHub as source code. Since GitHub is already connected,
in the Repository combo box you will see all your GitHub repositories. Select the desired repository and branch for which you want
to create the CI pipeline.
Task version 2.*.
In the Container Registry, insert the Docker Registry Connection created in Step 1;
in the Container Repository, insert the DockerHub CI repository created in Step 2.
"Project name" -> Pipelines -> "Pipeline name" -> Edit -> Trigger -> Enable continuous integration
and select the desired branch for which you want to enable the CI.
Video demo of steps 1-3. The created image is available on my Dockerhub.
Starting with this release, the portfolio website will be deployed on Docker. In order to do this a Docker Image is needed. The web server used inside the docker container for running this static HTML website is Nginx.
Step 1 - Dockerfile
Docker Images start from a base image. The base image (in this case, the Alpine version of Nginx) should include the platform dependencies required by the website. This base image is defined as an instruction in the Dockerfile. Docker Images are built based on the contents of a Dockerfile. At this stage, the Dockerfile is a list of two instructions that describe how to deploy the application. The first line defines the base image. The second line copies the content of the current directory into a particular location inside the container.
FROM nginx:alpineCOPY . /usr/share/nginx/html
Step 2 - Build Docker Image
The Dockerfile is used by the Docker CLI build command. The build command executes each instruction within the Dockerfile. The resulting image will have the name portfolio-image with a v1.2.0 tag, and can be launched to display the website.
docker build -t portfolio-image:v1.2.0 .
Step 3 - Run
Some network parameters must be provided to launch the built image.
For example, to open and bind the image to a network port on the host we need to provide the parameter -p
<host-port>:<container-port>.
The command below launches the newly built image with a user-friendly name and tag, and
binds the image webserver port 80 to
the host using the -p parameter.
Once launched, we'll be able to access the results of port 80 via localhost. Now we have a static HTML
website being served by Nginx.
docker run --name demo_portfolio -d -p 80:80 portfolio-image:v1.2.0
Video demo of steps 1-3. The created image is available on my Dockerhub.
This is the first relese of the website. No automation here. Just a static website hosted on GitHub pages.