Despliegue de en VPS de Hosgator
Guía paso a paso para desplegar un proyecto Vue.js (Frontend) y Django (Backend) en un VPS de HostGator
En este tutorial aprenderás a desplegar una aplicación con Vue.js como frontend y Django como backend en un VPS de HostGator. Para ello, utilizaremos una serie de herramientas como Nginx, Gunicorn, y PM2, además de la configuración de servidor adecuada.
Requisitos previos
- Tener un VPS de HostGator con acceso SSH.
- Acceso a una terminal para trabajar en tu servidor remoto.
- Conocimiento básico de Git, ya que necesitaremos clonar repositorios y manejar el código.
Pasos para desplegar el Frontend de Vue.js
Conectar a tu VPS a través de SSH
En tu terminal local, conecta a tu VPS usando SSH:
1
ssh usuario@ip_del_servidor
Instalar Node.js y npm
Primero, asegúrate de que tienes Node.js
y npm
instalados en tu servidor. En CentOs no viene node.js por defecto, por lo que necesitaremos instalarlo usando el repositorio de NodeSource:
1
2
curl -sL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs
Verifica las versiones:
1
2
node -v
npm -v
Subir el proyecto de Vue.js
Si tienes tu proyecto Vue.js en un repositorio Git, clónalo:
1
2
git clone https://github.com/usuario/repo_vue.git
cd repo_vue
Si no estás utilizando Git, puedes cargar el código de otra forma, por ejemplo, usando SFTP
.
Instalar dependencias
Dentro de la carpeta del proyecto de Vue.js, instala las dependencias:
1
npm install
Construir el proyecto para producción
Una vez que las dependencias están instaladas, construye el proyecto de Vue.js para producción:
1
npm run build
Esto creará una carpeta dist
con los archivos optimizados para producción.
Configurar Nginx para servir el frontend
Vamos a configurar Nginx para servir los archivos de Vue.js. Instala Nginx si no lo tienes:
1
sudo yum install nginx
Crea un archivo de configuración para tu sitio en /etc/nginx/sites-available
:
1
sudo nano /etc/nginx/sites-available/vue_app
Añade lo siguiente:
1
2
3
4
5
6
7
8
9
server {
listen 80;
server_name tu_dominio_o_ip;
location / {
root /ruta/a/tu/proyecto/vue/dist;
try_files $uri $uri/ =404;
}
}
Enlaza el archivo de configuración a sites-enabled
:
1
sudo ln -s /etc/nginx/sites-available/vue_app /etc/nginx/sites-enabled/
Reiniciar Nginx
Reinicia Nginx para aplicar la configuración:
1
sudo systemctl restart nginx
Pasos para desplegar el Backend de Django
Instalar dependencias básicas (Python, pip, etc.)
CentOS no viene con Python 3 por defecto, así que lo instalamos:
1
sudo yum install -y python3 python3-pip python3-devel
Instalar y configurar un entorno virtual (opcional, pero recomendado)
Crea un entorno virtual para tu proyecto Django:
1
2
python3 -m venv venv
source venv/bin/activate
Clonar tu proyecto Django
Al igual que con el frontend, clona tu proyecto Django desde Git:
1
2
git clone https://github.com/usuario/repo_django.git
cd repo_django
Instalar dependencias de Django
Dentro del entorno virtual, instala las dependencias de Django con pip
:
1
pip install -r requirements.txt
Configurar el archivo settings.py
Asegúrate de que tu archivo settings.py
esté configurado correctamente para producción:
- Base de datos: Configura PostgreSQL, MySQL o el motor que estés utilizando.
- Seguridad: Cambia
DEBUG
aFalse
y añade tu dominio o IP aALLOWED_HOSTS
. - Archivos estáticos y medios: Configura las rutas para los archivos estáticos y los medios.
Realizar las migraciones y crear el superusuario
Realiza las migraciones de la base de datos:
1
python manage.py migrate
Luego, crea un superusuario para acceder al panel de administración:
1
python manage.py createsuperuser
Instalar y configurar Gunicorn (Servidor WSGI)
Gunicorn es un servidor WSGI que utilizaremos para servir el backend de Django. Instálalo con pip:
1
pip install gunicorn
Ahora, ejecuta Gunicorn:
1
gunicorn --workers 3 nombre_del_proyecto.wsgi:application
Nota: Puedes ajustar el número de
workers
según los recursos de tu VPS.
Configurar Nginx para servir Django
Crea un archivo de configuración para Nginx en /etc/nginx/sites-available
para el backend Django:
1
sudo nano /etc/nginx/sites-available/django_backend
Añade lo siguiente:
1
2
3
4
5
6
7
8
9
10
11
server {
listen 80;
server_name tu_dominio_o_ip;
location / {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Crea el enlace simbólico:
1
sudo ln -s /etc/nginx/sites-available/django_backend /etc/nginx/sites-enabled/
Configurar PM2 para ejecutar Gunicorn en segundo plano
Instala PM2:
1
sudo npm install -g pm2
Usa PM2 para ejecutar Gunicorn de forma persistente:
1
pm2 start gunicorn --name "django" --workers 3 nombre_del_proyecto.wsgi:application
Guarda el proceso para que se reinicie al reiniciar el servidor:
1
2
pm2 save
pm2 startup
Reiniciar Nginx
Para aplicar la configuración del backend, reinicia Nginx:
1
sudo systemctl restart nginx
Verificación final
Accede a tu dominio o IP pública desde un navegador y verifica que tanto el frontend (Vue.js) como el backend (Django) estén funcionando correctamente.
Depuración:
- Si algo no funciona, revisa los archivos de log de Nginx y Gunicorn para ver si hay errores:
- Nginx:
/var/log/nginx/error.log
- Gunicorn:
/var/log/syslog
o el log de PM2.
- Nginx:
- Si algo no funciona, revisa los archivos de log de Nginx y Gunicorn para ver si hay errores:
Ahora tienes tu aplicación Vue.js y Django corriendo en un servidor VPS de HostGator. Vue.js se sirve como frontend estático con Nginx, mientras que Django maneja el backend con Gunicorn. Ambos están configurados para trabajar de manera eficiente en producción.
Mi lema es