Hosting your static website in a linux virtual machine
Tags: devops, linux, webserver, html
Published: 2022-11-30 10:16:56

To host a website on a linux virtual machine is fairly simple. The website hosted will be available on the internet publicly as long as our Linux virtual machine is running. 
In this tutorial, we'll be hosting a HTML template from tooplate.com, feel free to use your custom made HTML documents.

## Prerequisites
**Vagrant**: This tutorial assumes a working knowledge of vagrant and how to automate creating virtual machines using `Vagrantfile`

## Step 1. Create a virtual machine

### Creating an ubuntu virtual machine
We'll be using `spox/ubuntu-arm` box image to setup our ubuntu virtual machine.

Navigate to your project directory and create the `Vagrantfile` with the following command.

```sh
vagrant init spox/ubuntu-arm
```
or copy and paste the `Vagrantfile` below.

Now, the `Vagrantfile` is created and can be edited through vim editor.

```sh
vim Vagrantfile
```


```
# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

  # Every Vagrant development environment requires a box. You can search for
  # boxes at https://vagrantcloud.com/search.
  config.vm.box = "spox/ubuntu-arm"

  # Disable automatic box update checking. If you disable this, then
  # boxes will only be checked for updates when the user runs
  # `vagrant box outdated`. This is not recommended.
  # config.vm.box_check_update = false

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # NOTE: This will enable public access to the opened port
  # config.vm.network "forwarded_port", guest: 80, host: 8080

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine and only allow access
  # via 127.0.0.1 to disable public access
  # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  config.vm.network "private_network", ip: "192.168.33.10"

  # Create a public network, which generally matched to bridged network.
  # Bridged networks make the machine appear as another physical device on
  # your network.
  config.vm.network "public_network"

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  # config.vm.synced_folder "../data", "/vagrant_data"

  # Provider-specific configuration so you can fine-tune various
  # backing providers for Vagrant. These expose provider-specific options.
  # Example for VirtualBox:
  #
  config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
     vb.memory = "1024"
  end
  #
  # View the documentation for the provider you are using for more
  # information on available options.

  # Enable provisioning with a shell script. Additional provisioners such as
  # Ansible, Chef, Docker, Puppet and Salt are also available. Please see the
  # documentation for more information about their specific syntax and use.
  # config.vm.provision "shell", inline: <<-SHELL
  #   apt-get update
  #   apt-get install -y apache2
  # SHELL
end

```


### Creating a centos virtual machine
We'll be using `geerlingguy/centos7` box image to setup our cento7 virtual machine.

PS: For M1 users, I recommend you use `jacobw/fedora35-arm64` instead of the above mentioned box image.

Navigate to your project directory and create the `Vagrantfile` with the following command.

```sh
vagrant init geerlingguy/centos7
```

Now, the `Vagrantfile` is created and can be edited through vim editor.

```sh
vim Vagrantfile
```
or copy and paste the `Vagrantfile` below.

```
# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

  # Every Vagrant development environment requires a box. You can search for
  # boxes at https://vagrantcloud.com/search.
  config.vm.box = "jacobw/fedora35-arm64"

  # Disable automatic box update checking. If you disable this, then
  # boxes will only be checked for updates when the user runs
  # `vagrant box outdated`. This is not recommended.
  # config.vm.box_check_update = false

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # NOTE: This will enable public access to the opened port
  # config.vm.network "forwarded_port", guest: 80, host: 8080

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine and only allow access
  # via 127.0.0.1 to disable public access
  # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  config.vm.network "private_network", ip: "192.168.33.10"

  # Create a public network, which generally matched to bridged network.
  # Bridged networks make the machine appear as another physical device on
  # your network.
  config.vm.network "public_network"

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  # config.vm.synced_folder "../data", "/vagrant_data"

  # Provider-specific configuration so you can fine-tune various
  # backing providers for Vagrant. These expose provider-specific options.
  # Example for VirtualBox:
  #
  config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
     vb.memory = "1024"
  end
  #
  # View the documentation for the provider you are using for more
  # information on available options.

  # Enable provisioning with a shell script. Additional provisioners such as
  # Ansible, Chef, Docker, Puppet and Salt are also available. Please see the
  # documentation for more information about their specific syntax and use.
  # config.vm.provision "shell", inline: <<-SHELL
  #   apt-get update
  #   apt-get install -y apache2
  # SHELL
end

```

### Required components to host the website in our `Vagrantfile`

1. IP Address to access the website: `  config.vm.network "private_network", ip: "192.168.33.10"`
2. Optional assign a dynamic IP Address to the virtual machine: `config.vm.network "public_network"`
3. Hosting our website might need an extra amount of RAM, other than the default memory provided. 
```
config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
     vb.memory = "1024"
end
```

With the above configuration, we're ready to start the virtual machine.

Start the VM:
```sh
vagrant up
```

Log into the VM:
```sh
vagrant ssh
```

To provide the highest level of privilege, we need to login as the root user.

```sh
sudo -i
```

## Step 2. Installing required packages, inside our VM.

Hosting our packages would require a couple of packages installed in our VM.

Run the command below, to install of them at once.

For ubuntu machine;

```sh
sudo apt install apache2 wget unzip -y
```

For centos machine;

```sh
yum install httpd wget unzip -y
```
P.S. httpd in centos is equivalent apache2 o ubuntu machine.

1. **httpd**: Apache web-server that hosts our website in the virtual machine.
2. **wget**: An http package to download our template from tooplate.com
3. **unzip**: This package is required because our template will be in `.zip` format, and needs to be extracted.

With the installation complete, the apache2 web-server has been automatically started by ubuntu, `systemctl status apach2` to confirm. For centos machines, we can start our service by running the following command `systemctl start httpd`.

we could also enable the service, so that it comes up at boot time `systemctl enable httpd`

Access the default IP Address assigned to the VM:

```sh
ifconfig
```
result:

![ifconfig result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqcu2g8ifbn43ymbtxa4.png)

Access the IP Address in the browser, and the following default web page, would show up.

![Default Apache homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aefsl42ld9nhhhibj9rh.png)



## Download and extract the html directory into virtual machine.

Server data of our VM is located in the `/var/www/html` directory, this is where html files can be saved and served on the browser.

### Step 1. Navigate to `/tmp` directory and download the zip file.

```sh
wget https://www.free-css.com/assets/files/free-css-templates/download/page285/cial.zip
```

### Step 2. Extract the directory and copy it's content into `/var/www/html`.

Extract the document;
```sh
unzip cial.zip && cd html
```
Copy the content into `/var/www/html`

```sh
sudo cp -r * /var/www/html
```

### Restart apache2/httpd and reload the browser

```sh
systemctl restart httpd
```

Reload the browser tab with your VM IP Address.


![browser reload result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8dihyfa2a354lb99hle.png)