Cliente VueJS para utilizar con una API REST de banca online
Puedes ver el procedimiento de despliegue de la aplicación en este tutorial en Youtube:
La aplicación con la API de banca online está disponible en https://github.com/pedroprieto/api-bank-app. Ambas aplicaciones deben estar funcionando para poder interactuar.
La aplicación está realizada en NodeJS.
# Clonar repositorio
git clone https://github.com/pedroprieto/cliente-bank-app.git
# Acceder a la carpeta
cd cliente-bank-app
# Instalar dependencias
$ npm install
# Testear en local. Acceso en localhost:3000. La API debe estar en marcha en https://localhost:5001
$ npm run dev
# Compilar aplicación para producción (el resultado estará en la carpeta dist)
$ npm run build
# (Opcional) Lanzar aplicación en modo producción
$ npm run start
Dado que se trata de recursos estáticos (no precisan de lógica de servidor), el despliegue puede realizarse en un servicio como S3. Para mejorar su distribución se puede utilizar también un servicio de CDN como CloudFront.
- Ejecutar
npm install
para instalar las dependencias de la aplicación - Modificar fichero
package.json
y cambiarDIRECCION_DESPLIEGUE_API
con la URL de conexión a la API desplegada en AWS:"scripts": { "dev": "baseURL='https://localhost:5001' nuxt", "build": "baseURL='DIRECCION_DESPLIEGUE_API' nuxt build", "start": "nuxt start", "generate": "nuxt generate" },
- Ejecutar
npm run build
- Crear un bucket en S3
- Configurar bucket como público
- Configurar bucket como contenedor de sitio web estático
- Subir contenido de carpeta
dist
al bucket - Modificar todos los archivos y carpetas del bucket para que sean públicos
- Acceder al punto de enlace del bucket para cargar el cliente web
- Crear proyecto de Nuxt
- Establecer
baseURL
para Axios (URL de la API) - Crear página en directorio
pages
- Modificar fichero
nuxt.config.js
para que cargue la variable de entorno de acceso a la API para que la utilice AXIOS por defectoaxios: { baseURL: process.env.baseURL },
- Modificar fichero
package.json
para que cree las variables de entorno necesarias para la conexión a la API en modo local y en modo producción"scripts": { "dev": "baseURL='https://localhost:5001' nuxt", "build": "baseURL='DIRECCION_DESPLIEGUE_API' nuxt build", "start": "nuxt start", "generate": "nuxt generate" },