As web developer, we want to have separate development server which is always "ON" that we can use to test the functionality of our web codes or check our design layout on your actual different devices (desktop, tablet, mobile phone, etc.). Some prefer to use web hosting service and pay monthly or annually and others setup local machine at their home. I prefer the latter.
This local machine as being turned on - 24/7, needs to consume low power. I have bought Synology DS412+ for my backup storage of my files, media entertainment centralized server and torrent station. Good thing is that it can also be used as web server which is perfect for local development environment as it is low power and it sleeps whenever there are no network activities accessing this small server.
This tutorial will walk you through steps to setup Synology Diskstation's web server, internal DNS for development (to define own internal DNS rules purposes) and register your development site clean URL. In the following steps, Windows platform is used and 192.168.1.3 is the Synology Diskstation's IP address.
Setup web server
Setting-up web server is straightforward.
- Open your favorite web browser and go to http://diskstation:5000/webman/index.cgi
- Open Control Panel:
- Click Web Services:
- Check/tick the checkbox options "Enable Web Station" and this is optional "Enable MySQL" (if your site is using database) and cllick the "Virtual Host" button:
- Click "Create" button and enter your "Sub-folder Name" and "Hostname". In this example, we will use "drupal" and "drupal.dev" under "Sub-folder Name" and "Hostname" columns respectively. Click "OK" button.
The "drupal" sub-folder will be created automatically. The Synology DiskStation provides the default shared folder called "web". You can store your web files in this folder. Since we have created "drupal" sub-folder, the \\192.168.1.3\web\drupal is now exist. Later, we will use this “drupal.dev” in the next steps.
This "drupal.dev" is not yet accessible to our computer's web browser, we will need to register this "drupal.dev" to Synology's DNS server. Why do we need a DNS server? Example we have two development sites:
These are two development sites but on one web server (Synology DiskStation running Web Station), but they virtually exist as two separate sites. We say that these are our setting in Virtual Server:
We can see that they are actually two subfolders in our single web server but they can be accessed in two different hostname/URL. User might think that they are on two different server but in reality they are hosted on same web server.
Of course, we can always access these development sites via http://192.168.1.3/site_folder_name. Now, they will be recognized to be on the same server (192.168.1.3). The host might not want their users to know this that is why there is the feature for virtual hosts. What do we need if we want to use this virtual host? Follow the steps mentioned above and DNS server is needed to register the records.
In this case, we only use it in internal. We will need to have the records for our local computer/devices to find our Synology DiskStation. We have to tell the computers (not the users) that drupal.dev is located at 192.168.1.3 and panopoly.dev is located at 192.168.1.3 as well.
When the user access "drupal.dev" or "panopoly.dev", the computer/web browser will ask the DNS server what IP is needed to reach this site and the it will know that it is at 192.168.1.3 and web browser will send the HTTP request for "drupal.dev" or "panopoly.dev" web page. Then web server will pass the requested data according to the http header. That is why one web server can handle multiple virtual hosts.
Install DNS Server
Synology has something called Package Center, it’s like an App store or Google play where you can select software that can be installed in your Synology.
- Open Package center:
- Install DNS Server:
Register your development site URL
- Open "DNS Server":
- Click "Zone" > "Create" > "Master Zone":
- Enter the Hostname URL value from "Web Services" > "Vitual Host". In our example, enter "drupal.dev". The "master" DNS server is the IP address of your Synology DiskStation (in my case, I am using 192.168.1.3). Click "OK" button:
- Each zone must have a NS record that points to name server, each address that can be used have one "A record" that maps the IP. We will need to create the "A record". Select the created Zone:
- Click "Zone" > "Edit" > "Resource Record":
- Click "Create" > "A Type":
- Leave the "Name" blank (already shows as "drupal.dev") and enter the IP address of your Synology DiskStation (in my case, I am using 192.168.1.3):
- Click "OK" button then "Finish" button.
Currently, if we will use our newly created DNS server, only our custom domain for development (which in our case "drupal.dev") will be resolved by Synology DiskStation but the public domains such as google.com, yahoo.com, etc. are not.
We have two options:
Option 1. Synology DiskStation as the only DNS server on your internal network (caveat: Synology DiskStation should always be "ON" to be able your clients properly browse the internet).
Option 2. Synology DiskStation as optional DNS server on your internal network (caveat: need to configure each of your client PC’s DNS server settings).
Local DNS setup Option 1 steps:
- Open "DNS Server":
- Click "Resolution" and check/tick the "Enable resolution services" and "Enable forwarders" checkboxes then enter the IP addresses of the public DNS server such as OpenDNS, Google Public DNS, etc. of your choice (in this example, we will use Google public DNS IP addresses: 18.104.22.168 and 22.214.171.124) under "Forwarder 1" and "Forwarder 2" fields. Click "Apply" button:
- Go to your router's admin DNS Server settings and populate the DNS Server field with IP address of your Synology DiskStation (in my case, I am using 192.168.1.3). Below is the my wifi router's DNS Server field:
Local DNS setup Option 2 steps:
- Open "DNS Server":
- Click "Resolution" and check/tick the “Enable resolution services” and "Enable forwarders" checkboxes then enter the IP address of your router (in my case, the IP address of my wifi router is 192.168.1.1) under "Forwarder 1" field. Click "Apply" button:
- Configure each of your client's DNS server settings. Windows 7 setup will be shown in this example. In Start menu search box, type "ncpa.cpl" and press "Enter":
- Window will open. Right click on your Network Connection and select "Properties":
- A small window will open. Select "Internet Protocol Version 4 (TCP/IPv4)" and click the "Properties" button:
- Another small window will open. Click "Advanced…" button:
- Another small window will open. Click the "DNS" tab:
- Click "Add.." button:
- Enter the IP address of your Synology DiskStation (in my case, I am using 192.168.1.3) and click "Add" button:
- Next enter the IP address of your router, click the "Add…" button again and enter the IP address (in my case, the IP address of my wifi router is 192.168.1.1) then click "Add" button:
- Close all the windows by clicking each window’s "OK" button.
Create an HTML file with filename of "index.html". Copy and paste the following codes inside this file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Drupal</title> </head> <body> <p>Drupal rocks!</p> </body> </html>
... and save this file at \\192.168.1.3\web\drupal.
- The client PC needs to renew its network to recognize the new DNS server at Synology DiskStation. Windows 7 client will be shown in this example. In Start menu search box, type "cmd" and press "Enter":
- Type "ipconfig /renew" and press "Enter":
- Open your favorite web browser and enter at address bar "htttp://drupal.dev" and we should see:
Note: If you can't get the local domains to work, try to restart your web server. Login as admin via a terminal session on your Synology NAS and execute the following:
If you are using Apache:
sudo restart pkg-apache22
sudo synoservicecfg --restart nginx