How to Deploy a static HTML website using Ansible on GCP in 10 minutes

In this article, I will guide through deploying a static website using Ansible on GCP. This is aimed at installation of Nginx applications using ansible without the need to run by hand(manual).

What is Ansible?

Ansible is an open source automation and orchestration tool for software provisioning, configuration management, and software deployment. Ansible uses SSH for communicating between the machine that runs Ansible and the machines the configuration is being applied to.

How does Ansible works?

Ansible works by connecting to your nodes and pushing out small programs, called “Ansible modules” to them. Ansible then executes these modules (over SSH by default), and removes them when finished. Your library of modules can reside on any machine, and there are no servers, daemons, or databases required.

Use cases of Ansible

• Deploying Applications
• Configuring Operating systems
• Execution of IT Tasks such as updates, creating users, assigning permissions.

Now that we have a better understanding of what ansible does, let us get started with the deployment.

Prerequisites

• Create a Google Cloud Platform (GCP) project, or use an existing one.
• Installation of Ansible
• Clone the sample codes or setup your own codes.

Let us get started with the deployment

1. Set up an Ansible Compute Engine Instance on GCP

a. Login in to GCP and create 2 or 3 compute engine instance(1 Control node and 2 Managed node )i will walk us through installation of ansible on the control node.

Managed node -ansible host1 and ansible host2

Control node-ansible master

b. I will be cloning the sample codes from a Public GitHub repository to the Ansible control node machine and will make necessary changes to the code.

git clone https://github.com/do-community/html_demo_site.git
cd html_demo_site

c. Install Ansible with the following command:

sudo apt-add-repository ppa:ansible/ansible
sudo apt update
sudo apt install ansible

Check your Ansible version by running ansible --version

d. Let us set up the Inventory File(this files holds the details of the host we are managing) and add the IP address of the host as shown below:

Add the hosts to be managed to the ansible inventory file. This inventory file can be used to organize hosts to be managed by ansible into groups and sub groups as well as set host variables.

sudo nano /etc/ansible/hosts
[servers]
server1 ansible_host=10.128.0.8
server2 ansible_host=10.128.0.9
[all:vars]ansible_python_interpreter=/usr/bin/python3

e. Let us list the inventory to see the hosts on the ansible inventory list

ansible-inventory --list -y

2. Set up SSH key pair on the Ansible control node and the Ansible managed node(hosts)

Ansible hosts are remote servers that are monitored and controlled by the Ansible control node. Each host needs to have the control node’s SSH key in the system user’s authorized keys directory.

ssh-keygen

On the Ansible control node, we will need to copy the public key from the Ansible manged node , this could be done manually or with the use of tools such as ssh-copy-id. Copy the public key (id_rsa.pub)into Ansible managed node(server1,server2) as shown below:

ssh-copy-id user@remote-host(Ip address of the control node)

Make sure that the following changes are being made on the sshd_config file

* pubkeyAuthentication yes

• authorized_key change it to the path which the authorized keys is in the ansible control mode.
• PasswordAuthentication no

sudo nano /etc/ssh/sshd_config

Then restart the sshd_config using the command:

sudo systemctl restart sshd.service

On the ansible control node ,if you do not want to use the ssh copy Id utility run the following command :

cat ~/.ssh/id_rsa.pub | ssh iyanu@10.128.0.9 “mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys”

cat ~/.ssh/id_rsa.pub -this reads the public key par of the keypair you generated

| — Sends the output from the command on the left [cat command ] to the command on the right

ssh user @10.128.0.9 “mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys” — This logs into the host via ssh , creates a directory for holding ssh artifacts, changes its permission to read write and execute for just the user, and redirects the output of the first cat in a new file authorized keys file which is needed to know the ssh keys allowed to authenticate against the server

Restart sshd as well on the ansible control node

sudo systemctl restart sshd.service

Now we can proceed to verify if ansible can reach the hosts as well as perform passwordless SSH login to them. We run the below command

ansible all -m ping

This command checks connectivity for all hosts in the inventory using ansible’s ping module and also checks if the user has valid SSH creds for the hosts.

3. Create a Playbook for installing nginx

I created a new Ansible playbook for the installation of nginx .Create new file named playbook.yml in the same directory as shown below:

— -
- hosts: all
 become: yes
 vars:
 document_root: /var/www
 app_root: html_demo_site-main
 tasks:
 — name: Update apt cache and install Nginx
 apt:
 name: nginx
 state: latest
 update_cache: yes
- name: Copy website files to the server’s document root
 copy:
 src: path-to-local-directory
 dest: var/www/html
 mode: preserve
- name: Apply Nginx template
 template:
 src: nginx/nginx.conf
 dest: /etc/nginx/sites-available/default
 notify: Restart Nginx
- name: Enable new site
 file:
 src: /etc/nginx/sites-available/default
 dest: /etc/nginx/sites-enabled/default
 state: link
 notify: Restart Nginx
- name: Allow all access to tcp port 80
 ufw:
 rule: allow
 port: ‘80’
 proto: tcp
handlers:
 — name: Restart Nginx
 service:
 name: nginx
 state: restarted

The above command installs and configures nginx and add the static website documents like index.html,about.html and css on the server 1 and server 2.

4. Creating a Template for Nginx’s Configuration

I had to set up the Nginx template that is necessary to contains the web server configuration. Create a new folder within your “nginx” directory to hold the nginx config as shown below:

mkdir nginx
nano nginx/nginx.conf
server {
 listen 80;
root var/www/html;
 index index.html index.htm;
server_name www.iyanu.com;
location / {
 default_type “text/html”;
 try_files $uri.html $uri $uri/ =404;
 }
}

Let us execute our playbook I will be using the default inventory file and my user credential to connect to the remote server.

ansible-playbook playbook.yml --ask-become-pass

5.Congratulations… We have successfully deployed our Ansible Playbook without any failure. Lets go to our browser and and type the external IPaddress:80, You will be able to see the Webpage as shown below…

Note: This is applicable to host 2 as well.

Conclusion

Thank you for reading. I hope you enjoyed this article ,if you have any questions kindly reach out to me on LinkedIn.