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.



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.     ubuntu     helloworld.com

Step 1: Create Inventory File

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

mkdir ansible && cd ansible

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

    domain: helloworld.com
    ansible_user: ubuntu
    ansible_ssh_private_key_file: ~/.ssh/id_rsa
    ansible_sudo_pass: qwerty

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
  - name: "apt-get update"
      update_cache: yes
      cache_valid_time: 3600

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

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

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

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

    - name: restart nginx
        name: nginx
        state: restarted

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">
    <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>

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

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

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



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.