Despliegue de un Proyecto PHP en DigitalOcean - Parte 3 - Configurando Dominio Personalizado Usando Servidor DNS

Ronaldo B.27 de julio de 20226 min de lectura

En este artículo

Este es el tercer artículo de nuestra serie sobre el despliegue de una aplicación en PHP en DigitalOcean. Puedes consultar los otros dos artículos de la serie en los enlaces a continuación:

Parte 1 - Creando, Configurando y Accediendo al Servidor

Parte 2 - Instalando y Configurando MySQL

En el último artículo realizamos todas las configuraciones necesarias para que nuestro proyecto funcione en producción. Sin embargo, nos dimos cuenta de que aún necesitamos informar la IP de nuestro servidor para acceder al proyecto, como podemos ver en la imagen a continuación:

Proyecto siendo accedido por la IP

Sin duda tener un dominio personalizado para acceder al proyecto es mucho mejor. Y ese es el objetivo de este artículo: configurar un dominio personalizado para nuestra aplicación a través de un servidor DNS.

Para realizar esta configuración, necesitamos haber adquirido un dominio, que puede ser comprado en varios sitios de registro de dominios. En nuestro caso, configuraremos el dominio myapp.dev.br, adquirido en el sitio registro.br.

Creando un Virtual Host en Nginx

Una configuración inicial que podemos realizar es en Nginx. Crearemos un servidor virtual (Virtual Host) para que podamos acceder al proyecto a través de un nombre, una URL. Accederemos a la carpeta de configuración de Nginx, usando el siguiente comando:

cd /etc/nginx/sites-available/

Dentro de este directorio hay un archivo llamado default, en el cual ya hemos realizado algunas configuraciones en publicaciones anteriores. Crearemos una copia de este archivo, pero con el nombre del dominio que deseamos definir en el proyecto. Haremos esto con el siguiente comando:

sudo cp default myapp.dev.br.conf

Nota que informamos el nombre del dominio con el sufijo “.conf”. Ahora editaremos este archivo con el comando sudo nano myapp.dev.br. Dentro de este archivo, buscaremos la directiva server_name y la definiremos de la siguiente manera:

server_name myapp.dev.br www.myapp.dev.br;

Definiendo servidor en el archivo de configuración de Nginx

Nota que informamos el nombre de nuestro dominio dos veces, a través del prefijo “www” también, para que podamos acceder a él de esas dos maneras.

Es importante también asegurarse de que la ruta informada en la directiva root sea la correcta para nuestro proyecto:

Ruta informada para el proyecto

Podemos guardar y salir de este archivo.

A continuación, permitiremos que este nuevo Virtual Host creado sea identificado por Nginx. Para ello, crearemos un enlace de este archivo de configuración en el directorio sites-enabled de Nginx. Usaremos el siguiente comando:

sudo ln -s /etc/nginx/sites-available/myapp.dev.br.conf /etc/nginx/sites-enabled/

Como estamos realizando la definición de más de un Virtual Host en nuestro servidor, podemos encontrarnos con algún error relacionado con su memoria. Para evitar este problema, realizaremos otra configuración. Accederemos al archivo de configuración principal de Nginx con el comando sudo nano /etc/nginx/nginx.conf. Dentro de este archivo, buscaremos la directiva server_names_hash_bucket_size. Probablemente estará con un # (hashtag) antes de su nombre. Retiraremos este signo, para que esta configuración sea reconocida:

Retirando comentario del archivo de configuración

Una última configuración que podemos realizar es alterar los hosts locales de nuestro servidor. Esto no es obligatorio en este momento, ya que solo tenemos un proyecto alojado en nuestro servidor. Sin embargo, si tuviéramos más de uno, esta configuración se volvería muy necesaria. Por ello, la definiremos en este momento. Primero accederemos al archivo de hosts usando el comando sudo nano /etc/hosts. Dentro de este archivo, agregaremos una nueva línea de configuración, con la IP de nuestro servidor y luego el nombre de nuestro dominio:

167.172.128.137 myapp.dev.br www.myapp.dev.br

Definiendo el dominio en el archivo de hosts

Nota que una vez más agregamos nuestro dominio usando el nombre principal y luego el mismo nombre con el prefijo “www”. Después de guardar este archivo, podemos reiniciar el servicio de Nginx con el comando sudo service nginx restart. Si no se devuelve ningún error, significa que todo salió bien ?.

Creando Nuestro Dominio en DigitalOcean

La configuración en nuestro servidor ha sido completada. Sin embargo, solo eso no es suficiente para que el dominio personalizado sea identificado en el navegador. Para finalizar esta configuración, necesitamos agregar nuestro dominio también en las configuraciones de DigitalOcean, y eso es exactamente lo que haremos ahora.

Volveremos al panel administrativo de DigitalOcean y accederemos al tablero de nuestro proyecto. En el área de Droplets visualizaremos el nombre de nuestro servidor Ubuntu. Haremos clic en los tres puntos y luego en la opción “Add a domain”:

Agregando dominio al proyecto en DigitalOcean

En la siguiente página veremos un nuevo panel para agregar dominios a nuestro proyecto. En el campo “Enter domain” informaremos nuestro dominio personalizado (myapp.dev.br). Seleccionaremos nuestro proyecto ubuntu en el segundo campo y luego haremos clic en “Add Domain”:

Agregando un nuevo dominio a DigitalOcean

Con esto nuestro dominio principal estará agregado. Sin embargo, ¿recuerdas que hablamos sobre la importancia de agregar el prefijo “www” al proyecto? Vamos a hacer eso también en el panel de DigitalOcean. Para ello, haremos clic en el nombre de nuestro dominio recién agregado:

Enlace de nuestro nuevo dominio

En la página siguiente veremos varios registros de nuestro dominio. En el área “Create new record”, seleccionaremos la opción “CNAME” en la parte superior del panel. En la opción “Hostname”, informaremos solo “www”. En la opción “Is an alias of”, informaremos el nombre de nuestro dominio principal con un punto al final: myapp.dev.br. Después de esto, solo hay que hacer clic en Create Record:

Agregando nuevo registro a nuestro dominio

Con esto, nuestro dominio estará creado en DigitalOcean.

Agregando DNS en registro.br

Ahora que nuestro dominio ha sido creado en DigitalOcean, el último paso es relacionarlo con el servidor DNS del sitio donde compramos nuestro dominio. En nuestro caso, editaremos el servidor DNS de registro.br.

El primer paso es identificar los servidores DNS de DigitalOcean. Podemos ver esta información en el panel de registros de nuestro dominio, como se muestra en la imagen a continuación:

Servidores DNS en DigitalOcean

¿Notas los tres servidores resaltados? Son esos registros los que agregaremos a registro.br.

Ahora accederemos a la administración de este sitio y elegiremos nuestro dominio:

Lista de dominios en registro.br

Haremos clic en la opción “Alterar Servidores DNS” y luego agregaremos los servidores disponibles en DigitalOcean. Después de esto, solo hay que hacer clic en “Salvar Dados”:

Agregando servidores DNS de DigitalOcean a registro.br

Con esto, nuestra configuración estará finalizada. En este momento, registro.br iniciará la propagación de los cambios de nuestro servidor DNS. Este proceso puede tardar algunos minutos, incluso hasta una hora.

Sin embargo, después de unos momentos, podremos acceder a la dirección myapp.dev.br en nuestro navegador, y veremos el siguiente resultado:

¡Sensacional! Nuestro sitio fue encontrado, pero ahora definido con un dominio personalizado ?.

Conclusión

En este artículo definimos un dominio personalizado para nuestro proyecto y podemos decir que nuestro sitio está casi finalizado, ya que solo falta una configuración más. Un dominio personalizado ya otorga más credibilidad a un sitio. De la misma manera, un certificado SSL, que nos garantiza mayor seguridad y derecho al famoso “candado verde” en la URL, sin duda otorga mucha más credibilidad. Y es exactamente esta configuración la que realizaremos en el próximo artículo: agregar un certificado SSL al servidor en DigitalOcean.

Nos vemos en el próximo artículo :)

Sigue aprendiendo con Hcode

Regístrate en la plataforma de cursos y sigue las próximas guías del blog.