home tools books contact

Using Ansible to configure NGINX on Ubuntu and host a static website

This tutorial will demonstrate how to write an Ansible playbook so that you can automate the installation and configuration of NGINX on a Ubuntu Server. The playbook will install NGINX, remove the default website, create a new virtual host and deploy a static website.

Advertisement

Prerequisites

Before we begin you will need to have installed Ansible on your local machine and have access to a remote Ubuntu server.

The following steps have been tested with Ansible v2.9.11 running on a MacBook Pro with a clean installation of Ubuntu Server 18.04 running as a VM on VMware Fusion*. The steps will also work on a DigitalOcean* droplet. Click here to read how to deploy a droplet using Ansible.

Once you have installed Ansible and have setup your Ubuntu server, add the IP address along with the following hostnames to your local hosts file.

10.1.1.21     ubuntu
10.1.1.21     helloworld.com

Step 1: Create Inventory File

First, we will create a folder to store the Ansible files in.

cd
mkdir ansible && cd ansible

Create a file called inventory.yml then add the following:

web:
  hosts:
    ubuntu
  vars:
    domain: helloworld.com
    ansible_user: ubuntu
    ansible_ssh_private_key_file: ~/.ssh/id_rsa
    ansible_sudo_pass: qwerty
Advertisement

Step 2: Create NGINX Template File

Create a folder called templates:

mkdir templates

Create a file inside the templates folder called site.conf.j2 and add the following:

server {
  listen 80;
  listen [::]:80;
  server_name {{ domain }};
  root /var/www/{{ domain }};
  location / {
    try_files $uri $uri/ =404;
  }
}

Step 3: Create NGINX Playbook

Create a playbook called nginx.yml and add the following:

- hosts: web
  become: yes
  tasks:
  - name: "apt-get update"
    apt:
      update_cache: yes
      cache_valid_time: 3600

  - name: "install nginx"
    apt:
      name: ['nginx']
      state: latest

  - name: "create www directory"
    file:
      path: /var/www/{{ domain }}
      state: directory
      mode: '0775'
      owner: "{{ ansible_user }}"
      group: "{{ ansible_user }}"

  - name: delete default nginx site
    file:
      path: /etc/nginx/sites-enabled/default
      state: absent
    notify: restart nginx

  - name: copy nginx site.conf
    template:
      src: site.conf.j2
      dest: /etc/nginx/sites-enabled/{{ domain }}
      owner: root
      group: root
      mode: '0644'
    notify: restart nginx

  handlers:
    - name: restart nginx
      service:
        name: nginx
        state: restarted
Advertisement

Step 4: Sync Files

Create a folder to store the example static website.

mkdir site

Add a html file called index.html to the folder:

<!DOCTYPE html>
<html lang="en">
  <title> </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
  <body>
    <article class="vh-100 dt w-100 bg-dark-pink">
      <div class="dtc v-mid tc white ph3 ph4-l">
        <h1 class="f6 f2-m f-subheadline-l fw6 tc">Hello World!</h1>
      </div>
    </article>
  </body>
</html>

Create a playbook called sync.yml and add the following:

- hosts: web
  tasks:
  - name: "sync website"
    synchronize:
      src: site/
      dest: /var/www/{{ domain }}
      archive: no
      checksum: yes
      recursive: yes
      delete: yes
    become: no
Advertisement

Step 5: Run Playbook and Test Site

Run the playbook to install and configure NGINX:

ansible-playbook -i inventory.yml nginx.yml

Run NGINX Ansible playbook

Run the playbook to sync the website files:

ansible-playbook -i inventory.yml sync.yml

Run NGINX Sync playbook

Open a web browser and test the website works by browsing to http://helloworld.com

Test NGINX Static Website

Advertisement

Conclusion

In this tutorial we demonstrated how to install and configure NGINX with Ansible. We also saw how to deploy a static website with the Ansible synchronize module.

Written by: Tony Mackay

Ansible Automation NGINX Ubuntu

* GraspingTech participates in various affiliate marketing programs, which means we may earn a small commission at no additional cost to you, should you click on a link to a product and make a purchase.

Advertisement