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:
vue create my-project --preset typescript
Vaya al directorio del proyecto recién creado:
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í:
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:
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.
Top comments (0)