Gatsby es un generador de sitios rápido y moderno para React. Es un marco de código abierto que combina la funcionalidad de React, GraphQL y Webpack para crear aplicaciones y sitios web estáticos.
Gatsby es más que un simple generador de sitios estáticos, permite a los desarrolladores web crear sitios web utilizando React y trabajar con cualquier fuente de datos (CMS, Markdown, etc.) de su elección. En este tutorial, le mostraremos cómo instalar Gatsby en Ubuntu 20.04.
Requisitos
- Ubuntu 20.04 VPS
- Acceso SSH con privilegios de root
Paso 1. Iniciar sesión en el servidor
Primero, inicie sesión en su servidor Ubuntu 20.04 a través de SSH como usuario raíz:
ssh root@IP_Address -p Port_number
Deberá reemplazar 'IP_Address' y 'Port_number' con la dirección IP y el número de puerto SSH respectivos de su servidor.
Antes de comenzar, debe asegurarse de que todos los paquetes del sistema operativo Ubuntu instalados en el servidor estén actualizados. Puede hacerlo ejecutando los siguientes comandos:
# apt update -y # apt upgrade -y
Paso 2. Crear un usuario del sistema
A continuación, crearemos un nuevo usuario del sistema y le otorgaremos privilegios de sudo. En este tutorial, crearemos un nuevo usuario del sistema llamado "maestro", puede elegir cualquier nombre de usuario que desee.
# adduser master
Una vez creado, ejecutemos este comando para agregar el nuevo usuario al grupo Sudo. En Ubuntu, los usuarios que son miembros del grupo sudo pueden ejecutar comandos sudo.
# usermod -aG sudo master
Ahora, podemos iniciar sesión como el nuevo usuario 'maestro' y usaremos este usuario para completar la instalación.
# su - master
Paso 3. Instalar NodeJS y NPM
Hay algunos métodos para instalar NodeJS y NPM. En este artículo, los instalaremos utilizando el origen del nodo. Para conocer otros métodos, puede consultar nuestra publicación de blog sobre cómo instalar NodeJS y NPM.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Una vez completado, necesitamos descargar la información del paquete de la fuente recién agregada arriba.
$ sudo apt update
Luego, ejecute el siguiente comando para finalmente instalar NodeJS y NPM.
$ sudo apt install nodejs
NodeJS y NPM se han instalado correctamente, puede verificar la versión instalada usando este comando:
$ node -v; npm -v
Paso 4. Instalar Gatsby-CLI
Gatsby CLI es el principal punto de entrada para iniciar y ejecutar la aplicación Gatsby. Está empaquetado como un ejecutable que se puede usar globalmente. Podemos instalar Gatsby CLI a través de npm.
$ sudo npm install -g gatsby-cli
Para verificar la versión instalada de Gatsby CLI, ejecute este comando:
$ gatsby --version
Ahora, creemos un nuevo sitio web de Gatsby, puedes reemplazar “gatsby_site ” con el nombre que quieras.
$ gatsby new gatsby_site
Espere unos momentos y se creará un nuevo directorio "gatsby_site".
Invoque el siguiente comando para desarrollar Gatsby y ejecútelo.
$ cd gatsby_site $ gatsby develop -H 0.0.0.0
Debería poder acceder a su sitio de Gatsby en http://YOUR_SERVER_IP_ADDRESS:8000 , presione CTRL + C si desea detenerlo.
Ahora, construyamos nuestro sitio web de Gatsby:
$ gatsby build
La gatsby build El comando es parte de Gatsby CLI. Ejecute gatsby build comando para crear una versión lista para producción de su sitio cuando esté listo para publicar su sitio. También puede implementar su sitio web de Gatsby en GitHub para configurar una canalización de CI/CD (Integración continua e Implementación continua).
Paso 5. Instalar PM2
Process Manager (PM2) le permitirá mantener las aplicaciones activas para siempre, recargarlas sin tiempo de inactividad y facilitar las tareas comunes de administración del sistema. Invoque el siguiente comando para instalar PM2 en su Ubuntu 20.04 globalmente.
$ sudo npm install pm2 -g
Después de instalar PM2, podemos ejecutar estos comandos para iniciar nuestro sitio web de Gatsby en el puerto 8000.
$ cd ~/gatsby-site
$ pm2 start gatsby --name mygatsby -- serve -p 8000
Paso 6. Instalar y configurar NGINX
Su instalación de Gatsby ahora se ha completado y debería poder acceder a ella en la IP pública de su servidor con el número de puerto 8000. Sin embargo, si desea acceder a su sitio web de Gatsby utilizando un nombre de dominio o un nombre de subdominio en lugar de escribir la dirección IP del servidor y el número de puerto en la URL, deberá configurar un proxy inverso en su servidor.
En este paso, le mostraremos cómo implementar la configuración del proxy inverso mediante Nginx. Nginx es un servidor web potente y de alto rendimiento que se centra en la personalización y el rendimiento.
Primero, instale Nginx con el siguiente comando:
$ sudo apt install nginx
En Ubuntu 20.04, Nginx está configurado para comenzar a ejecutarse tras la instalación, puede verificarlo ejecutando este comando:
$ sudo systemctl status nginx
Una vez instalado, cree un nuevo archivo de configuración del bloque del servidor Nginx. Reemplace yourdomain.com con su nombre de dominio o subdominio actual:
$ sudo nano /etc/nginx/sites-enabled/yourdomain.com.conf
Agregue el siguiente contenido al archivo:
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
location ~ /.well-known {
allow all;
}
}
Guarde el archivo presionando CTRL + O luego presiona CTRL + X para salir del editor nano y luego reinicie Nginx.
$ sudo systemctl restart nginx
Paso 7. Instalar certificado SSL
Este es un paso opcional pero muy recomendable para completar. Instalaremos un certificado SSL gratuito de Let's Encrypt.
$ sudo apt install python3-certbot-nginx -y
Una vez completado, podemos ejecutar este comando para instalar el certificado SSL.
$ sudo certbot
Se le pedirá su dirección de correo electrónico, aceptar los TOS de Let's Encrypt y si desea compartir su dirección de correo electrónico con Electronic Frontier Foundation o no. Luego, debe elegir para qué nombres desea activar HTTPS. Elija su sitio web de Gatsby escribiendo el número y presionando ENTER. Let's encrypt instalará el certificado y le preguntará si desea configurar la redirección de HTTP a HTTPS o no, puede elegir redirigir y luego certbot creará la redirección y recargará Nginx si todo está bien.
Ahora, debería poder acceder a su sitio web de Gatsby en modo HTTPS en https://yourdomain.com , puede continuar con la creación de su aplicación utilizando Gatsby.
Por supuesto, no tienes que tirarte de los pelos para instalar Gatsby en Ubuntu 20.04 si tienes un plan de hosting Linux VPS administrado alojado con nosotros. Si lo hace, simplemente puede pedirle a nuestro equipo de soporte que instale Gatsby en Ubuntu 20.04 por usted. Están disponibles las 24 horas del día, los 7 días de la semana y podrán ayudarlo con la instalación de Gatsby, así como con cualquier requisito adicional que pueda tener.
PD. Si disfrutó leyendo esta publicación de blog sobre cómo instalar Gatsby en Ubuntu 20.04, siéntase libre de compartirla en las redes sociales utilizando los accesos directos a continuación o simplemente deje un comentario en la sección de comentarios. Gracias.