Host your website at home (under construction)

All previous how-to-s are the preamble to the current post. In fact, what we desire is to host our website at home, and be in complete control on what and how we install on our server. At this point you should have an Ubuntu server on which Apache, MySQL, PHP and WordPress have been installed. Also you are able to connect to your server locally, using a browser installed on the server and the local IP address (127.0.0.1), through the URL http://127.0.0.1.

Verify Remote Access

When we installed Apache, we learned how to access the webserver from a remote computer using the external IP address. A first step would be to test if this is still working without any problems. Here is a short reminder. Open a terminal on your server and run the command:

/sbin/ifconfig

The output should be similar to:

enp0s3: flags=4163  mtu 1500
     inet 192.168.111.143  netmask 255.255.255.0  broadcast 192.168.111.255
     inet6 fe80::381:9ef2:4578:c5a5  prefixlen 64  scopeid 0x20
     ether 08:00:27:a2:bf:35  txqueuelen 1000  (Ethernet)
     RX packets 66772  bytes 12328607 (12.3 MB)
     RX errors 0  dropped 24  overruns 0  frame 0
     TX packets 5585  bytes 929943 (929.9 KB)
     TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

 lo: flags=73  mtu 65536
     inet 127.0.0.1  netmask 255.0.0.0
     inet6 ::1  prefixlen 128  scopeid 0x10
     loop  txqueuelen 1000  (Local Loopback)
     RX packets 2509  bytes 2901318 (2.9 MB)
     RX errors 0  dropped 0  overruns 0  frame 0
     TX packets 2509  bytes 2901318 (2.9 MB)
     TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

and the external IP, should be found on the second line of the first block “inet 192.168.111.143  netmask 255.255.255.0  broadcast 192.168.111.255”.  Using a different computer, open a browser and in the URL field enter http://192.168.111.143 (change the numbers with the IP of your server). There are several possible results:

Good Page

The webpage shows up correctly and you are happy.

Broken Page

The webpage shows up, but it looks ugly, and there are no colors, and all the images are broken (you are not so happy). The page could look a little like this:

Broken WordPress Page

In this case, this is probably a WordPress miss-configuration. Go to your server, open a browser and navigate to http://127.0.0.1/wp-admin/, and using your username and password login the WordPress administration page. Once logged in, click on settings. What is important right now are only the fields “WordPress Address (URL)” and “Site Address (URL)”. They are probably set to http://127.0.0.1 . Change them to http://192.168.111.143 (replace 192.168.111.143 with your server external IP) and on the bottom of the page (you might have to scroll down) click “Save Changes” (You will be redirected to the login page, but there is no need to login again). Using your other computer refresh the page http://192.168.111.143 that was broken. To refresh you can use the F5 key on the top of your keyboard. You should get a nice WordPress page like the following image:

WordPress Page – All Good

What was happening? Simply by configuring the site to 127.0.0.1 we were telling the client to get the images from 127.0.0.1. But 127.0.0.1 is the same computer we are on. So when you were going to a different computer, it was trying to access the images on the computer that you were using instead of looking for them on the server.

No Page

The webpage does not show up at all and you get a connection error.

Connection Error

I assume that you can connect to your page locally using a browser on your server. Also, I assume that you have installed Apache, MySQL, PHP and WordPress. If those are true, it means that you are probably connected to the network and your Apache is up and running. But probably you have the firewall enabled on your webserver and it blocks the connections from remote computers. For now, we will completely disable the firewall on your server. Is this safe you will ask? Well, this is not the best solution, but at this point your server is only connected to your local network, so the outside world does not really have access to it. We would need a firewall installed if the server would have a Public IP address (192.168.x.x are private IPs and they are not routed on the internet). To disable the firewall, login your server, start terminal, become root using “sudo su” and run the command:

sudo ufw disable

Then refresh the page on your other computer. It will now get a full WordPress page or a broken one. If you get a broken page read again the “Broken Page” section and apply the fix.

Allowing Access from the Internet

In this part we will make sure that you can access your webserver from any place in the world. At this point, you can access it remotely but only from devices that are connected to the same network (which is your home network). To demonstrate what I’m talking about we are going to use your cell phone. First, take your cell phone and connect it to your wi-fi (I suspect that your wi-fi and your wired network are using the same router, so they are the same network). Open the browser and enter your server URL (in my case http://192.168.111.143). Do not forget the http:// part or your browser might just do a google search for 192.168.111.134 instead of trying to connect to the server. You should get something similar to the image below:

Phone Connected to the Webserver

Turn off your wi-fi on your phone, and make sure you can access the internet using your provider connection. At this point you are connected to the internet using Sprint, T-Mobile, Verizon or ATT network. Open your browser and enter again your server address (http://192.168.111.143). Surprise! What worked 2 seconds ago is not working any more. You will get something like this:

Phone Unable to Connect to the Webserver

This situation arises because your private network is like your own yard. The outside world (that is the internet) can only get to the door (that is your router or cable modem). If someone from the outside world needs to talk to someone in your yard, it has to pass the message to the gate-keeper (your router) and the gate-keeper has to pass the message further to someone in your yard (in this case your web server) So we have to teach the gate-keeper (your router) to pass all web requests that it receives to your web-server. Here is a Private network diagram when the phone is connected to the wi-fi. In this case all devices in the square can talk to each other, so the phone can talk to the webserver

Phone on WI-FI

When you stop the wi-fi on your phone you, in fact, put the phone in the cloud giving it a completely different IP address and it will only be able to talk to your router. The following image illustrates this situation.

Phone on Data

In the above image we see that the router has two IP addresses. One is 192.168.111.1 (also called the LAN IP) and 145.12.14.6 (also called the WAN IP). The WAN IP is the address that we can use to get inside the private network when we are on the internet (like in the case when the phone uses your provider data instead of the wi-fi).

In order to find the WAN address of your router you can simply ask Google. On your windows computer, open a browser and on google simply ask “what is my IP?”. You will get a page and at the top you will have your public IP which is in fact your router WAN IP (in my case my public IP is 67.175.141.116):

Find your WAN IP on Google

Your address has many doors (or ports as they are called in networking language), and all those doors (or ports) are usually closed. What we need to do, is to open a door that will bring to your webserver. You will need to login to your router from your network. The router, if well configured, should not allow connections from the internet, or if it does it should be configured securely. In order to login to your router you can use either your server or your windows computer. Simply open a browser and point it to your router internal (or LAN) IP. In my case this is 192.168.111.1. Usually the router IP will have the first 3 numbers exactly the same as your web server IP (in my case 192.168.1) and the last number 1 or 254, but that is not absolutely always true. In order to verify on your web server, open a terminal and type the command:

ip route show

You should get an output similar to:

default via 192.168.111.1 dev enp0s3 proto dhcp metric 100 
169.254.0.0/16 dev enp0s3 scope link metric 1000 
192.168.111.0/24 dev enp0s3 proto kernel scope link src 192.168.111.143 metric 100

Your router internal IP is the one after the words “default via”, in my case 192.168.111.1.

Once you have pointed your browser to your router you will be presented with a login page for your router. This part is the hardest for me, because everyone will have a different router brand and they all have different interfaces. It will be impossible for me to cover them all, so I will ask you to comment this post with your router brand and model, and I will post instructions for how to forward port 80. That is in fact what we need to do on the router. Forward port 80 to your web server. In my case port 80 on the router is forwarded to 192.168.111.143. Once this is achieved you will be able to access your webserver from any computer in the world. The router will do the job to forward all requests it receives on port 80 to your server.

But there are 2 more problems: First, your public IP or WAN IP might change. If you have internet through cable. Those changes are very rare, but they still happen. On ADSL they are more frequent. Also, when you access your website you would like to access it without using an IP address but a domain name which is more meaningful. In my case I can access my website using the domain paulgeanta.com instead of 67.175.141.116. Depending to which level you want to take this, you might have to take out your wallet during this part of the how-to. I will give you a free solution that will be implemented using a subdomain and a paying solution that will be implemented using a domain.

A subdomain would be something like paulgeanta.google.com (paulgeanta is a subdomain of google.com in this case) and a domain is paulgeanta.com.

Setting up Dynamic DNS

Posted in Apache, Hosting, How to, Linux, MySQL, PHP, Wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *