This is the third article in our series on deploying a PHP application on DigitalOcean. You can check the other two articles in the series at the links below:
Part 1 - Creating, Configuring and Accessing the Server
Part 2 - Installing and Configuring MySQL
In the last article, we performed all the necessary configurations for our project to work in production. However, we realized that we still need to inform the IP of our server to access the project, as we can see in the image below:
Without a doubt, having a custom domain to access the project is much better. And that is the goal of this article: to configure a custom domain for our application through a DNS server.
To perform this configuration, we need to have acquired a domain, which can be purchased from various domain registration sites. In our case, we will configure the domain myapp.dev.br, acquired from the site registro.br.
Creating a Virtual Host in Nginx
An initial configuration we can perform is in Nginx. We will create a virtual server (Virtual Host) so we can access the project through a name, a URL. We will access the Nginx configuration folder using the command below:
cd /etc/nginx/sites-available/
Inside this directory, there is a file called default, where we have already made some configurations in previous posts. We will create a copy of this file, but with the name of the domain we wish to define for the project. We will do this with the following command:
sudo cp default myapp.dev.br.conf
Notice that we specified the domain name with the suffix “.conf”. We will now edit this file with the command sudo nano myapp.dev.br. Inside this file, we will look for the server_name directive and define it as follows:
server_name myapp.dev.br www.myapp.dev.br;
Notice that we specified our domain name twice, with the prefix “www” as well, so we can access it both ways.
It is also important to ensure that the path specified in the root directive is the correct path for our project:
We can save and exit this file.
Next, we will allow this new Virtual Host to be recognized by Nginx. To do this, we will create a link to this configuration file in the sites-enabled directory of Nginx. We will use the following command:
sudo ln -s /etc/nginx/sites-available/myapp.dev.br.conf /etc/nginx/sites-enabled/
As we are defining more than one Virtual Host on our server, we may encounter some memory-related errors. To avoid this problem, we will perform one more configuration. Let's access the main Nginx configuration file with the command sudo nano /etc/nginx/nginx.conf. Inside this file, we will search for the server_names_hash_bucket_size directive. It will likely have a # (hashtag) before its name. We will remove this sign so that this configuration can be recognized:
A final configuration we can perform is to change the local hosts of our server. This is not mandatory at this moment, as we have only one project hosted on our server. However, if we had more than one, this configuration would become very necessary. Therefore, we will define it now. We will first access the hosts file using the command sudo nano /etc/hosts. Inside this file, we will add a new configuration line with the IP of our server and then the name of our domain:
167.172.128.137 myapp.dev.br www.myapp.dev.br
Note that once again we added our domain using the main name and then the same name with the prefix “www”. After saving this file, we can restart the Nginx service with the command sudo service nginx restart. If no error is returned, it means everything went well ?.
Creating Our Domain on DigitalOcean
The configuration on our server has been completed. However, just that is not enough for the custom domain to be recognized in the browser. To complete this configuration, we also need to add our domain in the DigitalOcean settings, and that is exactly what we will do now.
We will go back to the DigitalOcean administrative panel and access the dashboard of our project. In the Droplets area, we will see the name of our Ubuntu server. We will click on the three dots and then on the option “Add a domain”:
On the next page, we will see a new panel to add domains to our project. In the “Enter domain” field, we will enter our custom domain (myapp.dev.br). We will select our Ubuntu project in the second field and then click on “Add Domain”:
With this, our main domain will be added. However, remember that we talked about the importance of adding the prefix “www” to the project? We will do that in DigitalOcean’s panel as well. To do this, we will click on the name of our newly added domain:
On the next page, we will see the various records of our domain. In the “Create new record” area, we will select the “CNAME” option at the top of the panel. In the “Hostname” option, we will enter just “www”. In the “Is an alias of” option, we will enter the name of our main domain with a period at the end: myapp.dev.br. After that, just click on Create Record:
With this, our domain will be created on DigitalOcean.
Adding DNS at registro.br
Now that our domain has been created on DigitalOcean, the last step is to relate it to the DNS server of the site where we purchased our domain. In our case, we will edit the DNS server at registro.br.
The first step is to identify the DNS servers of DigitalOcean. We can see this information in the record panel of our domain, as shown in the image below:
Did you notice the three highlighted servers? These are the records we will add to registro.br.
Now let's access the administration of this site and choose our domain:
We will click on the option “Change DNS Servers” and then add the available servers from DigitalOcean. After that, just click on “Save Data”:
With this, our configuration will be completed. At this point, registro.br will start the propagation of changes of our DNS server. This process can take a few minutes, even up to an hour.
However, after a little while, we will be able to access the address myapp.dev.br in our browser, and we will see the following result:
Awesome! Our site was found, but now defined with a custom domain ?.
Conclusion
In this article, we defined a custom domain for our project and we can say that our site is almost finished, as we just need one more configuration. A custom domain already gives more credibility to a site. In the same way, an SSL certificate, which guarantees us greater security and the right to the famous “green padlock” in the URL, undoubtedly adds much more credibility. And it is exactly this configuration that we will perform in the next article: adding an SSL certificate to the server on DigitalOcean.
See you in the next article :)