En este artículo aprenderemos a realizar el despliegue de una aplicación Next.js usando TypeScript en DigitalOcean definiendo un dominio personalizado y un certificado SSL a través de la aseguradora Let’s Encrypt.
El proyecto será adaptado a partir de la apertura de Star Wars en HTML5 y CSS3, que enseñamos a crear en este artículo: Recreando la apertura de Star Wars con CSS3 y Sass. Este artículo se dividirá en los siguientes temas:
- Adaptando el Proyecto para Next.js
- Creando Droplet en DigitalOcean
- Realizando Despliegue en el Servidor
- Definiendo Proxy con Nginx
- Agregando Dominio Personalizado
- Configurando Certificado SSL
Adaptando el Proyecto para Next.js
Para crear nuestro proyecto usando Next.js, utilizaremos el recurso de npx.
npx create-nuxt-app star-wars-next
Después de tener el proyecto creado, lo iniciaremos. Para ello, accederemos al proyecto y luego ejecutaremos el script npm para poner en marcha nuestro servidor de desarrollo:
cd star-wars-next
npm run dev
Con estos comandos ejecutados, veremos la pantalla de abajo, informando que el servidor ha sido iniciado:
Agregando TypeScript al proyecto
Nuestro proyecto tendrá TypeScript en su estructura. La primera cosa que necesitamos hacer es crear un archivo tsconfig.json, usado por TypeScript para definir sus configuraciones.
Después de eso, es necesario agregar TypeScript a nuestro proyecto a través de npm, además de también agregar los tipos necesarios para React, usado por Next.js, y también para Node.js:
npm install -D typescript @types/react @types/node
Después de eso, podemos nuevamente iniciar el servidor de desarrollo:
npm run dev
Con este comando el archivo tsconfig.json se completará automáticamente con sus configuraciones predeterminadas:
Con esto, TypeScript estará completamente integrado y configurado en nuestro proyecto.
Agregando Sass
Una parte esencial de nuestro proyecto es el uso de Sass, responsable de ayudarnos a desarrollar código CSS con más facilidad y con recursos avanzados. Este recurso se añadirá como una dependencia de desarrollo:
npm install -D sass
Después de instalar Sass, necesitamos añadir algunas configuraciones para que esta dependencia funcione correctamente.
Para ello, necesitaremos editar el archivo next.config.js y agregar las siguientes configuraciones:
const path = require('path');
module.exports = {
sassOptions: {
includePath: [path.join(__dirname, 'styles')]
}
}
Adaptando el Proyecto para Next.js
Para adaptar nuestro proyecto ya creado con HTML5, CSS3 y Sass, necesitaremos editar el archivo index.tsx del directorio pages y también el archivo Home.module.scss:
Además del archivo .tsx, también necesitamos editar el archivo .scss:
Con esto, veremos que nuestro proyecto ya funciona usando Next.js.
Creando Droplet en DigitalOcean
Es necesario tener una cuenta creada en DigitalOcean para poder crear un nuevo proyecto, o Droplet (gota), en este proveedor de servidores en la nube.
Después de crear un nuevo proyecto, haremos clic en “Create > Droplets”:
En la página de creación, seleccionaremos primero la imagen de nuestro sistema operativo. Elegiremos Ubuntu 20.04:
A continuación, seleccionaremos el plan de nuestro proyecto. Elegiremos el plan más básico:
También elegiremos la región donde estará ubicado nuestro servidor:
A continuación, necesitamos seleccionar la forma de autenticación al acceder a nuestro servidor. Seleccionaremos claves SSH. Para ello, necesitaremos crear una nueva clave SSH.
Creando Clave SSH
Para crear una clave SSH utilizaremos el programa PuttyGen. Podemos descargarlo usando el siguiente enlace: https://www.putty.org/.
Después de haber descargado el programa, lo abriremos y haremos clic en el botón “Generate”:
A continuación, es necesario mover el mouse por un área en blanco de forma aleatoria. Este patrón será utilizado para crear una clave SSH única:
Después de unos segundos, se mostrará la siguiente ventana:
Note que hay dos campos destinados a agregar una contraseña para nuestra clave SSH. Esto es interesante para aumentar aún más la seguridad en el uso de las claves. Por eso, si deseas agregar esta contraseña, sería algo muy bueno.
Con la clave creada, necesitamos guardarla en un archivo. Se crearán dos archivos: 1) la clave pública, que se añadirá a DigitalOcean y 2) la clave privada, que se utilizará para confirmar que la clave específica se refiere a nuestra máquina personal.
Haremos clic en las opciones “Save public key” y “Save private key”:
Podemos identificar nuestras claves con el nombre que deseemos:
No cierres la ventana de PuttyGen aún, ya que la utilizaremos más adelante.
Volveremos al sitio de DigitalOcean y haremos clic en la opción de agregar una nueva clave SSH:
Será necesario volver una vez más a la pantalla de PuttyGen y ahora copiaremos la clave que está en el campo “Key”. Basta seleccionarla, presionar el botón derecho del mouse y hacer clic en “Copiar”:
Pegaremos su contenido en DigitalOcean, definiremos un nombre para nuestra clave y luego haremos clic en “Add SSH Key”:
A continuación, podemos seleccionar solo un droplet en la sección de finalización y dar un nombre a nuestro servidor. En nuestro caso, lo nombraremos como “STARSERVER”:
Por último, haremos clic en “Create Droplet” para crear de hecho nuestro servidor:
Con esto, la creación de nuestro servidor en DigitalOcean estará finalizada ?.
Realizando Despliegue en el Servidor
El siguiente paso de nuestro artículo será acceder a nuestro servidor remoto para realizar el despliegue de nuestra aplicación en la nube. Para ello, utilizaremos nuevamente Putty.
La primera cosa que necesitamos saber es la IP de nuestro servidor. Podemos descubrir esto en el panel administrativo de DigitalOcean. La IP del servidor se muestra al lado de su nombre:
Al acceder al programa de Putty, podemos agregar la IP de nuestro servidor, el puerto que se utilizará para conectarnos al servidor, en nuestro caso será el puerto 22, el tipo de conexión, que por defecto es SSH, y el nombre del servidor, para que podamos acceder más fácilmente en futuras sesiones. Podemos definirlo como “STARSERVER”:
La siguiente configuración en la que necesitamos trabajar está relacionada con la autenticación. En el menú de la izquierda de Putty, haremos clic en “Connection > SSH > Auth”:
Haremos clic en el botón “Browse...” para seleccionar el archivo que tiene nuestra clave SSH privada:
Al hacer clic en esta opción se abrirá una ventana del Explorador de Archivos de Windows. Selecciona tu clave privada y haz clic en “Abrir”. Tendrá la extensión “.ppk”:
Es importante mantener estos archivos en un lugar seguro en tu computadora. Si necesitas acceder al servidor desde otro lugar, será necesario hacer una copia de los archivos de las claves SSH, o generar una nueva clave en ese otro lugar.
Podemos volver a la pestaña “Session”, hacer clic en “Save” para que esta sesión quede guardada en nuestro programa y luego hacer clic en “Open”, para acceder efectivamente a nuestro servidor:
La primera vez que accedamos al servidor, nos encontraremos con el siguiente mensaje. Simplemente haremos clic en “Sí”:
La primera credencial solicitada será el login. Podemos informar “root”, que es el login predeterminado de DigitalOcean:
A continuación, se solicitará la contraseña de nuestra clave SSH. Si la hemos definido, basta con informarla en ese momento:
Con esto estaremos logueados en nuestro servidor remoto. Estamos listos para clonar nuestro proyecto.
Para ello utilizaremos Git, que es ampliamente utilizado para el control de versiones de varios proyectos. Los servidores Ubuntu de DigitalOcean por defecto ya tienen Git instalado.
Accederemos al directorio var:
cd /var
Realizaremos el clon de nuestro proyecto en este directorio:
git clone https://github.com/hcodebr/star-wars-next.git
Como estamos ejecutando un proyecto en Node, podríamos elegir cualquier otro directorio, pero preferimos el directorio var.
Instalando Node
Ahora necesitamos instalar Node.js en nuestro servidor. Para ello, primero actualizaremos nuestro conjunto de herramientas apt:
sudo apt update
A continuación, descargaremos el setup de Node directamente del dominio nodesource. Utilizaremos el siguiente comando para ello:
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
Note que seleccionamos el setup_14.x. Esto hará que la versión 14 de Node se descargue. Pero podríamos elegir otra versión si lo deseáramos.
Después de que se complete la descarga, verificaremos si el archivo nodesource_setup.sh se ha descargado correctamente. Podemos utilizar el siguiente comando para ello:
sudo nano nodesource_setup.sh
Si se presenta algún contenido para este archivo, sabemos que se ha descargado correctamente. Podemos entonces ejecutarlo, a través de este otro comando:
sudo bash nodesource_setup.sh
Después de esto, podemos usar apt para instalar Node:
sudo apt install nodejs -y
Después de la instalación, podemos comprobar la versión de Node instalada en nuestro servidor con el comando node --version:
Instalando las dependencias
A continuación podemos instalar las dependencias de nuestro proyecto. Accederemos al directorio de nuestro proyecto:
cd /var/star-wars-next
Para instalar estas dependencias, podemos utilizar el comando npm install.
El siguiente paso es preparar nuestros archivos para la producción. Para ello podemos utilizar el comando npm run build.
Por último, podemos iniciar nuestro proyecto de hecho, usando el comando npm start.
Ahora, si accedemos a la URL http://167.71.110.237 en el puerto 3000, que es el usado por Next.js, ya podremos ver nuestro proyecto funcionando ?:
Esto es excelente. Sin embargo, si cerramos nuestra sesión en Putty, nuestro Terminal que está ejecutando el proyecto será eliminado. Es necesario definir que el proyecto continúe funcionando las 24 horas del día, sin necesitar acceder a nuestro servidor cada vez. Para ayudarnos con esta cuestión, podemos utilizar un gestor de procesos llamado pm2.
Instalando y Configurando pm2
Para instalar pm2 podemos usar el siguiente comando:
npm install pm2 -g
De esta manera, pm2 estará instalado de manera global en nuestro servidor.
Para iniciarlo, es necesario dar un nombre a nuestra aplicación. En nuestro caso daremos el nombre “next” a nuestro proyecto. Usaremos el siguiente comando:
pm2 start npm --name next -- start
Después de la inicialización de nuestro proyecto, veremos la siguiente tabla:
Muestra cuántos proyectos están en línea y algunas estadísticas muy interesantes, como cuánta memoria ya ha sido utilizada por él.
Para guardar esta configuración, podemos utilizar el comando pm2 save.
Así, incluso si cerramos la ventana de acceso al servidor, nuestro proyecto continuará en línea ?.
Proxy con Nginx
Nuestro proyecto ya está funcionando, pero necesitamos informar explícitamente que queremos acceder al puerto 3000 del servidor. Sin embargo, esto no es conveniente para la mayoría de los usuarios. Deseamos solo informar la IP del servidor y ya ser redirigidos a nuestro proyecto.
El puerto predeterminado para acceder a servidores web es el 80. Así que será necesario crear un proxy, que será un servidor intermediario encargado de dirigir a nuestros usuarios al puerto real de nuestro proyecto, es decir, al puerto 3000.
Es necesario que utilicemos un servidor HTTP para ello. Estará escuchando por defecto en el puerto 80. Usaremos en nuestro caso Nginx. Lo instalaremos usando el siguiente comando:
sudo apt install nginx -y
Después de su instalación, accederemos al directorio que contiene los sitios registrados en este servidor:
cd /etc/nginx/sites-available
Accederemos a la configuración del servidor por defecto:
sudo nano default
En este archivo encontraremos la directiva location. Definiremos su estructura de la siguiente manera:
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Con este código estamos definiendo que Nginx recibirá solicitudes en el puerto 80, pero las dirigirá a localhost:3000, es decir, a nuestro proyecto.
Después de hacer estas configuraciones, podemos reiniciar nuestro servidor Nginx:
sudo service nginx restart
Con esto, nuestro proyecto ya estará funcionando a través del puerto 80, sin necesitar informar el :3000.
Agregando Dominio Personalizado
Nuestro servidor está cada vez mejor. Sin embargo, hay algunos recursos que podemos mejorar aún más. Por ejemplo, aún no tenemos un dominio personalizado (DNS) para nuestro proyecto. Es la próxima cuestión que configuraremos.
Para configurar un servidor DNS, necesitamos primero un dominio registrado a nuestro nombre. El sitio registro.br es muy utilizado para el registro de dominios “.br“ con un precio anual de R$ 40.
Usaremos el dominio myapp.dev.br en nuestro proyecto. Para realizar su configuración, podemos regresar a nuestro servidor y hacer una copia del archivo estándar de Nginx. Por convención, nombraremos este nuevo archivo con el nombre de nuestro servidor seguido del sufijo “.conf”:
sudo cp default myapp.dev.br.conf
Accederemos a este nuevo archivo y buscaremos la directiva server_name. Definiremos el nombre de nuestro servidor como su contenido:
server_name myapp.dev.br www.myapp.dev.br;
Note que definimos el nombre de nuestro servidor tanto sin como con el prefijo “www”.
Con esta configuración, nuestro dominio ya está disponible en nuestro servidor, pero aún no está habilitado. Para que esto ocurra, necesitamos hacer una copia de este archivo al directorio sites-enabled. Para evitar un archivo duplicado, podemos crear un enlace del archivo que está en el directorio sites-available al directorio sites-enabled. Un enlace en Linux es como un acceso directo que conocemos en Windows. Para crearlo, utilizaremos el siguiente comando:
sudo ln -s myapp.dev.br.conf /etc/nginx/sites-enabled/
Esta es la configuración necesaria en nuestro servidor. Lo que necesitamos ahora es agregar el dominio registrado en DigitalOcean. Para ello, volveremos al panel de nuestro servidor, haremos clic en los tres puntos que muestran más opciones y luego seleccionaremos “Add a domain”:
En la página siguiente, informaremos nuestro dominio y seleccionaremos el proyecto al que será dirigido. Después de eso, podemos hacer clic en “Add Domain”:
En la página siguiente, agregaremos nuevos registros para nuestro dominio. Agregaremos un registro del tipo “A”, definiendo el hostname como “@” y seleccionando nuestro proyecto “STAR-SERVER” como el redireccionamiento. Luego podemos hacer clic en “Create Record”:
Repetiremos el mismo proceso, pero informando “www” como el hostname:
Estas nuevas configuraciones presentarán una serie de nuevos registros DNS. Pero nos centraremos en tres específicas:
Copiamos estos tres registros DNS y los añadiremos a nuestro dominio en el sitio registro.br. Haremos clic en editar nuestro dominio y en el área DNS añadiremos dichos registros:
De esta forma, al acceder a http://myapp.dev.br, veremos nuestro proyecto ya funcionando con un dominio personalizado ?.
Configurando Certificado SSL
Después de agregar un dominio personalizado a nuestro proyecto, lo que necesitamos hacer ahora es definir un certificado SSL para que nuestro servidor sea considerado seguro.
Utilizaremos el proyecto Let’s Encrypt, que ofrece certificados SSL gratuitos, que deben renovarse cada tres meses. El sitio de este proyecto nos sugiere utilizar el software Certbot.
Lo instalaremos en nuestro servidor con el siguiente comando:
sudo apt install certbot python3-certbot-nginx -y
Note que también instalamos un paquete llamado python3-certbot-nginx. Es el plugin que realiza la configuración de certificados SSL en servidores Nginx.
Para crear nuestro certificado, podemos llamar a certbot junto con algunas flags:
sudo certbot --nginx -d myapp.dev.br -d www.myapp.dev.br
Lo primero que necesitamos informar es el correo electrónico asociado a nuestro servidor. Podemos informar un correo personal o de nuestra empresa:
A continuación necesitamos confirmar que aceptamos los términos de servicio de Certbot. Podemos presionar “A” para aceptar y “C” para cancelar el proceso:
La siguiente pregunta nos cuestiona si permitimos que nuestro correo sea compartido con los socios de Let’s Encrypt. Podemos responder “Y” para sí y “N” para no:
A través de la última pregunta podemos definir si queremos realizar la redirección de URLs con HTTP a HTTPS. Podemos digitar “2“ para que esta redirección ocurra:
Después de esto, nuestro certificado será creado y se devolverá un mensaje de éxito:
Ahora, si accedemos a nuestro proyecto con HTTPS, veremos el ícono de candado en la URL y también un mensaje informando que nuestra conexión es segura:
Nuestro proyecto en Next.js está completamente integrado en nuestro servidor en DigitalOcean ?.
Conclusión
En este artículo aprendimos a realizar el despliegue completo de un proyecto en Next.js en DigitalOcean.
Esperamos que este contenido pueda ayudarte a también realizar el despliegue de tus aplicaciones en la nube, una habilidad tan necesaria para los programadores hoy en día.
No olvides compartir este artículo si te gustó el contenido. Hasta el próximo artículo. :)