Desplegando un proyectos en multiples frameworks SPA en AWS Amplify y múltiples ambientes - Parte 3: Vuejs
Published: 2023-07-04 21:15:29

Este artículo le guiará a través de los pasos necesarios para desplegar un proyecto de VueJS con TypeScript en AWS Amplify. Mostraremos cómo configurar múltiples ambientes utilizando comandos de compilación de AWS Amplify que cambian en función de la rama que se está desplegando. También cubriremos la integración con GitHub y cómo apuntar a un dominio personalizado.

Antes de comenzar, necesitará tener una cuenta de AWS, una cuenta de GitHub y un dominio personalizado que desee usar. Asegúrese también de tener instalado Node.js y npm en su máquina local.

## Paso 1: Crear y configurar su proyecto VueJS con TypeScript

Primero, debemos crear nuestro proyecto VueJS. Ejecute el siguiente comando para crear un nuevo proyecto con TypeScript:

```bash
vue create my-project --preset typescript
```

Vaya al directorio del proyecto recién creado:

```bash
cd my-project
```

## Paso 2: Configurar la integración de AWS Amplify y GitHub

Para configurar la integración de AWS Amplify y GitHub, necesitamos crear un nuevo "App" en AWS Amplify. Inicie sesión en su cuenta de AWS y navegue hasta AWS Amplify. Luego, haga clic en "New app" y elija "Host web app". 

Seleccione GitHub como repositorio de código fuente. Se le pedirá que autorice a AWS Amplify a acceder a sus repositorios de GitHub. Seleccione el repositorio y la rama que desea desplegar.

## Paso 3: Configuración de comandos de compilación de AWS Amplify

AWS Amplify permite definir los comandos de compilación personalizados para su proyecto. Esto es útil cuando necesita cambiar los comandos de compilación en función del ambiente que está desplegando.

Para configurar los comandos de compilación, navegue hasta la sección de "Build settings" de su aplicación AWS Amplify. Aquí, verá un archivo de configuración de compilación YAML.

La configuración de compilación para un proyecto VueJS con TypeScript puede verse así:

```yaml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

Para configurar comandos de compilación específicos de la rama, puede agregar una sección `context` al archivo de configuración de compilación:

```yaml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build:$AWS_BRANCH
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

En el comando `npm run build:$AWS_BRANCH`, `$AWS_BRANCH` es una variable de entorno proporcionada por AWS Amplify que contiene el nombre de la rama que se está desplegando. Puede utilizar esta variable para definir comandos de compilación específicos para cada rama.

## Paso 4: Configuración del Dominio Personalizado

Para configurar un dominio personalizado para su aplicación, navegue hasta la sección "Domain management" de su aplicación en

 AWS Amplify.

Haga clic en "Add domain" e ingrese su dominio personalizado. AWS Amplify verificará la propiedad del dominio y le guiará a través del proceso de configuración de los registros DNS necesarios.

Una vez que los registros DNS se hayan propagado, su aplicación estará disponible en su dominio personalizado.

## Conclusión

En este artículo, hemos cubierto cómo desplegar un proyecto VueJS con TypeScript en AWS Amplify con múltiples ambientes. Este enfoque utiliza comandos de compilación específicos de la rama para ajustar la configuración del proyecto en función del ambiente que se está desplegando. También hemos cubierto cómo configurar un dominio personalizado para su aplicación.