Part 2: Infrastructure as Code with Vagrant and Ansible

In the previous part of this series, we learned how to automate the setup of a local deployment environment using Vagrant and Ansible. Building upon that, this part will focus on deploying a static website within our local virtual machine (VM). This step ensures that your site runs in a controlled environment that closely mirrors a production server.

Prerequisites

In writing this part, I made the following assumptions. You:

• have completed the Part 1 of this series and have a functional Vagrant VM provisioned with Ansible.
• have a basic knowledge of static website files (HTML, CSS, and JavaScript).

If you haven’t completed Part 1, refer to it for setting up Vagrant and Ansible before continuing.

Step 1: Prepare Your Static Website Files

Before deploying a static website, you need to have a website to deploy. For this, you can build your owm website using html and css or download a free website template off the internet. There are many free website templates available online. I will be using a simple one from Free CSS called Mediplus-lite.

You can download this or any other template from the website and place it in a directory. I have downloaded the template and placed it in a public directory: /repo/part-2/public/Mediplus-Lite-free-css.com.zip

Step 2: Update Configuration Files

Ansible Playbook

Modify your provision.yml to include tasks for deploying the static website. Append the following tasks:

    - name: Install unzip
      apt:
        name: unzip
        state: present
 
    - name: Unzip and move website files
      shell:
        cmd: |
          unzip /home/vagrant/public/Mediplus-Lite-free-css.com.zip -d /var/www/html/
          mv /var/www/html/mediplus-lite /var/www/html/mediplus-lite.com
          cp /home/vagrant/public/site.conf /etc/apache2/sites-available/mediplus-lite.com.conf
 
    - name: Enable new site
      shell: /usr/sbin/a2ensite mediplus-lite.com
      notify: Reload Apache
 
    - name: Disable default Apache site
      shell: /usr/sbin/a2dissite 000-default.conf
      notify: Reload Apache
 
  handlers:
    - name: Reload Apache
      service:
        name: apache2
        state: reloaded

Explanation of the tasks:

1. Install unzip: Much like the "Install Apache" task, this task installs the unzip package, which is required to extract the website files.
2. Unzip and move website files: This task runs a series of shell commands to:

3. Enable new site: Enables the new website by creating a symbolic link to the site configuration file.
4. Disable default Apache site: Disables the default Apache site.

Apache Virtual Host

An Apache virtual host is a file that contains the configuration for a website. This file is used to define the website's name, the server name, the port, and the location of the website files. The virtual host file is located in the Apache configuration directory (/etc/apache2/sites-available/).

For our static website, we will create a site.conf file under public folder and move this into the VM using vagrant. Below is the contents of the site.conf file:

<VirtualHost *:80>
        ServerAdmin webmaster@localhost
        ServerName mediplus-lite.com
        ServerAlias www.mediplus-lite.com
        DocumentRoot /var/www/html/mediplus-lite.com
 
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

This file defines the website's name, server name, and the location of the website files. The DocumentRoot directive specifies the directory where the website files are located.

The <VirtualHost *:80> directive specifies the port number to use for the website. In this case, we are using port 80, which is the default port for HTTP. We will make a separate tutorial for configuring https in the future.

Vagrantfile

For the vagrant file, we only need to add one line to sync our local public folder with the VM. This makes our website file and site.conf accessible from within the VM. We can also handle this file transfer using ansible, I will show you how in Part 3 of this tutorial series.

  config.vm.synced_folder "./public", "/home/vagrant/public"

Step 3: Test Your Configuration

Run the following command to re-provision the VM with the updated playbook:

vagrant provision

After provisioning completes, you can open your browser and navigate to the IP address of the VM, "192.168.56.6". You should see your static website live!

Conclusion

Congratulations! You’ve successfully deployed a static website locally using Vagrant and Ansible. In the next part, we’ll explore setting up a VPS server on AWS and deploying this exact same static website to it with minor modifications to copy our website files to the server.

You can access the repository for the series using this link.