Continuous integration and continuous deployment have become significant parts of the software development process. GitLab comes with built-in continuous integration, continuous deployment, and continuous delivery support to build, test, and deploy your application.

This article walks through the steps needed to create a CI/CD pipeline using GitLab CI. We are showing here how to build and deploy Angular code (front-end).

Requirements

• You have a GitLab account and have created a GitLab repository for storing source code.

• You have a server machine with Gitlab Runner, Maven, Ansible, Docker, and Nexus installed.

Steps

1. Register and Install Gitlab-runner

Do this step using this link: https://docs.gitlab.com/runner/install/. Note: Use the shell executor while registering Runner.

2. Add Config File to Your Project Repository

Add your source code to the repository. Add a .gitlab-ci.yml file to the root directory of your project .  Open the file and add the contents. Here, we have written build and deploy code in same stage:

3. Add Variables 

Replace variables with values in the 'Variables' section under the 'Settings' tab.

4. Setup Nexus Repository

Note: Below are the settings for the current project scenario.

5. Ansible Playbook 

Below is an Ansible playbook for the current project scenario.

6. Repository View

Now, after adding source code and config files, the repository will look as below:

7. CI/CD Pipeline Execution

Any changes to code will trigger the pipeline and we can see the status in CI/CD Pipeline tab.

You can see the complete log status if you click the 'failed' or 'passed' status icons.

Conclusion

Developers can start using this CI/CD pipeline to build and deploy by updating their code in the repository. Artifacts will be available in Nexus repository for further deployments if there are any. You can set up more jobs for enhancing the pipeline. This basic CI/CD pipeline using GitLab CI would look as below: