Despliege de aplicaciones

Una vez que hemos desarrollado una aplicación web, siempre tomando en cuenta un entorno de desarrollo local, buscaremos la manera de compartir nuestro trabajo con la comunidad de desarrolladores o con los usuarios finales de la misma. Para esto, es necesario desplegar (deploy) la aplicación en un servidor web.

Este proceso implica la configuración de un servidor web, la transferencia de los archivos de la aplicación al servidor y la configuración de la aplicación para que sea accesible desde un navegador web. En este sentido, existen diversas formas de desplegar una aplicación web, cada una con sus propias ventajas y desventajas. Sin embargo, hay algunos aspectos en común que siempre debemos tener presentes.

Entornos de despliegue

Antes de desplegar una aplicación, es importante tener en cuenta el entorno de despliegue en el que se va a ejecutar la aplicación. Como sabemos, existen, al menos, dos entornos en los que se puede desplegar una aplicación web.

Entorno de desarrollo

Este entorno es utilizado por los desarrolladores para probar y depurar la aplicación. En este entorno, la aplicación se ejecuta en un servidor web local y se accede a través de un navegador web en el mismo dispositivo.

En el caso de Vite, el entorno de desarrollo se activa al ejecutar el comando npm run dev.

Entorno de producción

Este entorno es utilizado por los usuarios finales para acceder a la aplicación. En este entorno, la aplicación se ejecuta en un servidor web remoto y se accede a través de un navegador web desde cualquier dispositivo.

En el caso de Vite, el entorno de producción se activa al ejecutar el comando npm run build. Sabemos también, que los archivos generados en este entorno se encuentran en la carpeta dist y podemos probar la aplicación en este entorno ejecutando el comando npm run preview. Si la aplicación funciona correctamente en este entorno, podemos proceder a desplegarla en un servidor web remoto.

Métodos de despliegue

Existen diversos métodos para desplegar una aplicación web en un servidor. A continuación, se presentan algunos de los métodos más comunes.

Despliegue manual

Este método consiste en transferir los archivos de la aplicación a un servidor web remoto mediante un cliente FTP o un cliente SSH. Una vez transferidos los archivos, es necesario configurar el servidor web para que la aplicación sea accesible desde un navegador web.

Este método es útil para desplegar aplicaciones pequeñas o para realizar pruebas en un entorno de producción.

Emplear este método implica que el desarrollador debe tener conocimientos sobre la configuración de servidores web en profundidad, lo cual puede ser una desventaja para aquellos que no tienen experiencia en este ámbito. Además, este método puede ser propenso a errores humanos, ya que la configuración del servidor web debe realizarse manualmente.

Existe un perfil de desarrolladores que prefieren este método, ya que les permite tener un mayor control sobre la configuración del servidor web y la aplicación. Este perfil se conoce como devops (development operations), y se caracteriza por tener habilidades tanto de desarrollo como de operaciones.

Despliegue mediante servicios de alojamiento web

De manera similar al despliegue manual, este método consiste en transferir los archivos de la aplicación a un servidor web remoto, pero en lugar de configurar el servidor web manualmente, se utiliza un servicio de alojamiento web, o hosting, que proporciona una interfaz gráfica para configurarlo.

A día de hoy, existen diversos servicios de alojamiento web que permiten desplegar aplicaciones web de forma sencilla, como Netlify, Vercel, GitHub Pages, Firebase Hosting o Glitch. Estos servicios permiten desplegar aplicaciones web estáticas de forma gratuita o a un costo muy bajo, y proporcionan herramientas para configurar el servidor web, gestionar el dominio y monitorizar la aplicación.

Despliegue automatizado

Algunos servicios de alojamiento web, como Netlify, GitHub Pages o GitLab Pages, permiten automatizar el proceso de despliegue de la aplicación mediante herramientas de integración continua y despliegue continuo, mejor conocidas como CI/CD (por sus siglas en inglés, Continuous Integration/Continuous Deployment). Estas herramientas permiten automatizar el proceso de despliegue de la aplicación, desde la transferencia de los archivos al servidor web hasta la configuración del servidor web.

En particular, existen servicios en la nube que ofrecen soluciones de CI/CD, como GitHub Actions o GitLab CI/CD. Estos servicios permiten configurar flujos de trabajo que se ejecutan automáticamente cada vez que se realiza un cambio en el repositorio de la aplicación.

Este método es útil para desplegar aplicaciones grandes o para mantener actualizada una aplicación en un entorno de producción. Además, este método reduce la posibilidad de errores humanos, ya que el proceso de despliegue está automatizado.

En contraposición, este método puede proporcionar una menor flexibilidad en la configuración del servidor web y la aplicación, limitando las opciones de personalización.

Despliegue de aplicaciones Vite

En el caso de Vite, podemos desplegar una aplicación web generada en modo de producción mediante cualquiera de los métodos mencionados anteriormente. Es decir, nuestro objetivo será el de desplegar una aplicación web estática en un servidor web remoto.

Además, Vite proporciona una clara documentación sobre este proceso en diferentes servicios de alojamiento web. Particularmente, analiza el despliegue de una aplicación mediante GitHub Pages utilizando GitHub Actions.

Configuración de la aplicación

Para desplegar una aplicación Vite en GitHub Pages, es necesario realizar ciertas configuraciones en el proyecto.

Configurar el archivo vite.config.js. Este archivo proporciona la configuración de Vite para la aplicación. Esto incluye la configuración del servidor de desarrollo, la configuración del servidor de producción y la configuración de los plugins de Vite. En particular, es necesario configurar la propiedad base con el nombre del repositorio de GitHub. Por ejemplo, si el nombre del repositorio es <usename>/<repository>, la propiedad base debe ser /repository/.
Configurar el archivo package.json. Este archivo proporciona la configuración del proyecto en npm. Si bien no es necesario realizar cambios en él, es una buena práctica actualizar cieras propiedades si buscaremos publicar el proyecto en npm. La propiedad homepage es una de ellas, ya que indica la URL base de la aplicación, en este caso, la URL de GitHub Pages.
Configurar el enrutamiento de la aplicación. Dependiendo del mecanismo de enrutamiento utilizado en la aplicación, será necesario configurar también la ruta base indicada en este componente. Por ejemplo, si se utiliza react-router-dom, es necesario configurar la propiedad basename del componente BrowserRouter. Esto se debe a que GitHub Pages utiliza una estructura de URL específica para las páginas de usuario y de proyecto. Cada página de usuario se encuentra en la URL https://<username>.github.io/, mientras que cada página de proyecto se encuentra en la URL https://<username>.github.io/<repository>/. Es decir, cada repositorio de GitHub tiene una URL base específica.

Por lo tanto, si empleamos rutas relativas en la aplicación, es necesario configurar la ruta base en el enrutador, de lo contrario, la aplicación no funcionará correctamente. Por defecto, la ruta base es la raíz del dominio, es decir, /. Sin embargo, al optar por desplegar la aplicación en GitHub Pages, la ruta base debe ser /repository/.

Una buena práctica es utilizar variables de entorno para configurar la ruta base en la aplicación. De esta manera, podemos cambiar la ruta base en función del entorno de despliegue.

Configuración de GitHub Pages

En primer lugar, es necesario crear un repositorio en GitHub para la aplicación, el cual debe ser público. Una vez creado el repositorio, es necesario configurar GitHub Pages para desplegar la aplicación.

Dentro del apartado de configuración del repositorio de GitHub Settings > Pages, es necesario indicar el método de Build and deployment que se utilizará para desplegar la aplicación. En nuestro caso, optaremos por GitHub Actions como método de despliegue, lo cual indicamos en la sección Source.

GitHub Pages Settings

Configuración de GitHub Actions

Inmediatamente después de configurar GitHub Pages, es necesario crear un flujo de trabajo o workflow en GitHub Actions.

Esto se realiza mediante un archivo de configuración en la carpeta .github/workflows del repositorio. Podemos optar por crear un archivo de configuración nuevo o utilizar una plantilla proporcionada por Vite.

Siendo esta la primera vez que desplegamos la aplicación, recomendaremos utilizar la plantilla proporcionada por Vite. Esta puede ser creada desde la interfaz de GitHub en el apartado Actions o, si se prefiere, se puede crear manualmente en la carpeta .github/workflows junto con el archivo de configuración de Vite. Convencionalmente, el archivo de configuración de GitHub Actions se nombra deploy.yml o main.yml, aunque el nombre puede ser personalizado.

1
# Simple workflow for deploying static content to GitHub Pages
2
name: Deploy static content to Pages
3

4
on:
5
  # Runs on pushes targeting the default branch
6
  push:
7
    branches: ['main']
8

9
  # Allows you to run this workflow manually from the Actions tab
10
  workflow_dispatch:
11

12
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
13
permissions:
14
  contents: read
15
  pages: write
16
  id-token: write
17

18
# Allow one concurrent deployment
19
concurrency:
20
  group: 'pages'
21
  cancel-in-progress: true
22

23
jobs:
24
  # Single deploy job since we're just deploying
25
  deploy:
26
    environment:
27
      name: github-pages
28
      url: ${{ steps.deployment.outputs.page_url }}
29
    runs-on: ubuntu-latest
30
    steps:
31
      - name: Checkout
32
        uses: actions/checkout@v4
33
      - name: Set up Node
34
        uses: actions/setup-node@v4
35
        with:
36
          node-version: 20
37
          cache: 'npm'
38
      - name: Install dependencies
39
        run: npm ci
40
      - name: Build
41
        run: npm run build
42
      - name: Setup Pages
43
        uses: actions/configure-pages@v4
44
      - name: Upload artifact
45
        uses: actions/upload-pages-artifact@v3
46
        with:
47
          # Upload dist folder
48
          path: './dist'
49
      - name: Deploy to GitHub Pages
50
        id: deployment
51
        uses: actions/deploy-pages@v4

Workflow de despliegue

Este archivo de configuración define un flujo de trabajo que se ejecuta automáticamente cada vez que se realiza un cambio en una rama específica del repositorio. Siendo una parte importante de la configuración, nos detendremos a explicar cada parte del archivo.

Nombre del flujo de trabajo. La propiedad name define el nombre del flujo de trabajo. En este caso, el nombre es Deploy static content to Pages el cual establece la documentación de Vite. Por supuesto, este nombre puede ser personalizado.
Eventos de activación. La propiedad on define los eventos que activan el flujo de trabajo. En este caso, el flujo de trabajo se activa en cada push a la rama main y cuando se ejecuta manualmente desde la interfaz de GitHub. Esto significa que la rama principal del repositorio es la rama de producción y por lo tanto, cada cambio en esta rama desencadena nuevamente el despliegue de la aplicación. Razón por la cual, es importante proteger esta rama y evitar cambios directos en ella, tal y como lo establece GitFlow. Por otro lado, la propiedad workflow_dispatch permite ejecutar manualmente el flujo de trabajo desde la interfaz de GitHub. En ocasiones, la naturaleza del cambio no requiere un despliegue inmediato, por lo que se puede optar por ejecutar manualmente el flujo de trabajo.
Permisos del token de GitHub. La propiedad permissions define los permisos del token de GitHub que se utiliza en el flujo de trabajo. En este caso, el token tiene permisos de lectura y escritura en el contenido del repositorio y permisos de escritura en GitHub Pages. Además, se bridan permisos para crear y/o modificar el token de identificación.
Concurrencia del despliegue. La propiedad concurrency define la concurrencia del despliegue. En este caso, se permite un único despliegue concurrente, lo cual evita que se realicen despliegues simultáneos y se cancela el despliegue en progreso si se inicia uno nuevo. Esto nos indica que podemos definir varios flujos de trabajo para diferentes ramas del repositorio, cada uno con su propia configuración de despliegue.
Tareas del workflow. La propiedad jobs puede ser la más importante de todas, ya que define las tareas que se ejecutan en el flujo de trabajo. En este caso, se define una única tarea llamada deploy que se ejecuta en un entorno de Ubuntu. Esta tarea se compone de los siguientes pasos:
- Entorno del trabajo. La propiedad environment define el entorno del trabajo. En este caso, se define el entorno de GitHub Pages con la URL de la página desplegada. Esta URL se obtiene de la salida del paso de despliegue.
- Ejecución del trabajo. La propiedad runs-on define el sistema operativo en el que se ejecuta el trabajo. En este caso, se ejecuta en un entorno de Ubuntu.
- Pasos del trabajo. La propiedad steps define las acciones que se ejecutan en cada paso de la tarea. En este caso, se definen los siguientes pasos:
  - Checkout. Se clona el repositorio en el entorno de ejecución.
  - Set up Node. Se configura el entorno de Node.js en el entorno de ejecución.
  - Install dependencies. Se instalan las dependencias del proyecto.
  - Build. Se compilan los archivos de la aplicación en modo de producción.
  - Setup Pages. Se configura GitHub Pages en el entorno de ejecución.
  - Upload artifact. Se suben los archivos de la aplicación al entorno de ejecución.
  - Deploy to GitHub Pages. Se despliega la aplicación en GitHub Pages.
Cada paso se ejecuta secuencialmente y, en caso de que un paso falle, el flujo de trabajo se detiene y se notifica al usuario. Podemos ver en la terminal de GitHub Actions el resultado de cada paso mediante una serie de logs.

Ejecución del flujo de trabajo

Una vez que se ha configurado el flujo de trabajo, se procede a realizar un commit en el repositorio con los cambios realizados. Lógicamente, estos cambios deben ser confirmados en la rama indica en el archivo que acabamos de configurar. En este caso, la rama principal del repositorio es main.

Una vez realizado el commit, se desencadenará automáticamente el flujo de trabajo en GitHub Actions y veremos la ejecución del mismo en la interfaz de GitHub.

Si el flujo de trabajo se ejecuta correctamente, podremos acceder a la aplicación desplegada en la URL que establecimos durante este proceso, https://<username>.github.io/<repository>/.

Conclusiones

El despliegue de una aplicación web es un proceso fundamental en el desarrollo de aplicaciones, ya que permite compartir el trabajo con la comunidad de desarrolladores. Más importante aún, permite que los usuarios finales accedan a la aplicación, lo cual es el objetivo final de cualquier proyecto de desarrollo.

En este sentido, es importante tener en cuenta el entorno de despliegue en el que se va a ejecutar la aplicación, ya que esto determina la configuración de la aplicación y del servidor web. Además, es importante elegir un método de despliegue que se ajuste a las necesidades del proyecto y del equipo de desarrollo.

Instamos a todos los desarrolladores que han llegado hasta este punto a desplegar sus propias aplicaciones web y a investigar sobre otros servicios hosting. La experiencia de desplegar una aplicación web es enriquecedora y nos permite aprender sobre los aspectos más técnicos del desarrollo web. Después de todo, este proceso es una parte fundamental del ciclo de vida de una aplicación web y, tarde o temprano, todos los desarrolladores deben enfrentarse a él.