Tenemos a un desarrollador que sube el código al repositorio en Github donde queda almacenado.
Luego AWS CodePipeline orquesta el proceso de pipeline CI/CD. AWS CodeBuild Inicia la compilación y las pruebas al código. Seguidamente AWS CodeDeploy despliega automáticamente el ultimo código subido por el desarrollador. Amazon S3 se encarga de recibir y hospedar los archivos de la aplicación.
Para este despliegue lo primero es configurar la aplicación React.js en Github. Te dejo el link del repositorio.
https://github.com/richardaguirre1/saas-landing-page.git
Lo clonas o lo copias a local, lo abres en VS Code o tu editor de código preferido. Lo ejecutas ->
npm run dev
y luego lo subes a tu repositorio.
Dejamos el editor de código abierto.
Pasamos a AWS -> S3 -> Creamos un repositorio -> de propósito General -> le damos un nombre: reactjs-app-cicd -> dejamos el resto de valores por defecto.
Crear bucket.
Listo por esa parte.
Siguiente paso -> Crear el AWS Codepipeline
Seguimos en la consola de AWS -> Codepipeline -> Create Pipeline -> Build custom pipeline ->
Next -> Proporcionamos un nombre al pipeline: reactjs-app-cicd -> el resto de opciones las dejamos asi (esta es la forma las rápida y directa con fines didacticos).
Next -> Source Provider -> seleccionamos Github
Debemos conectarnos a Github:
Le damos un nombre a la conexión con GitHub y clic en Conect to GitHub
Buscamos el repositorio repositorio que creamos en uno de los pasos anteriores y lo seleccionamos. En caso de pedir autenticación, se ingresan las credenciales y listo.
Guardamos
Nos redigirá a AWS.
Conectamos
Una vez establecida la conexión buscamos en Codepipeline nuestro repositorio y elegimos la rama o branch. En este caso solo debería tener una, la master.
El resto de opciones por defecto.
Next ->
Creamos un proyecto de AWS CodeBuild
En Build provider seleccionamos Other build Provider y seguidamente seleccionamos CodeBuild en la lista desplegable.
En el paso siguiente hacemos clic en Create Project:
Se abrirá una ventana de AWS CodeBuild.
Aquí haremos que CodeBuild compile código fuente, ejecute pruebas entre otras cosas para que nuestra aplicación Reactjs quede lista a despliegue.
Le damos un nombre al proyecto Codepipeline, yo de daré este: richarddevops-reactjs-app
Vamos a la parte de Environment:
Podemos ajustar los parámetros a nuestras necesidades, por ejemplo, si usar amazon Linux o Ubuntu. Allí cada quien verifica.
Bajamos a Buildspec:
Seleccionamos- > Use a buildspec file.
Este archivo contendrá los comandos específicos en formato .yml.
Por defecto, Codebuild busca el archivo buildspec.yml en la raíz de el proyecto y toma lo que contiene el archivo buildspec.yml para ejecutar los comandos requeridos.
Vamos al editor de código.
Creamos un archivo buildspec.yml en la raíz del proyecto.
Le agregamos el siguiente código:
version: 0.2
phases:
install:
runtime-versions:
nodejs: 18
commands:
- echo Installing dependencies...
- npm ci --legacy-peer-deps
build:
commands:
- echo Building the React app...
- npm run build
artifacts:
files:
- '**/*'
base-directory: dist
discard-paths: no
Guardamos.
Este código lo que hace es básicamente decirle a Codebuild que instale dependencias, compile la aplicación de React, copie los archivos y genere los artefactos que son los archivos resultantes de la compilación.
Mas detalladamente, configura el entorno con Node.js 18, Instala dependencias exactas del package-lock.json.
Opcionalmente podemos usar chatGPT para que nos genere el codigo en el siguiente promp:
“Genera un buildspec.yml para AWS CodeBuild que use Node.js 18, instale dependencias con npm ci –legacy-peer-deps, compile una app React con npm run build, guarde los artefactos de la carpeta dist preservando su estructura, incluya una fase opcional para pruebas con npm test”
También podríamos pedirlo en Node.js 20.
Allí los que manejan React saben mucho mas que yo sobre el tema.
Seguimos.
Subimos el archivo creado a nuestro repositorio con git add . , git commit .. y git push…
Volvemos a la ventana de codebuild.
Dejamos el resto de parámetros como default.
Bajamos hasta la parte final y hacemos clic en Continue to CodePipeline
Lugo cerramos la ventana.
Vamos a la ventana de codepipeline
Tendremos el siguiente mensaje:
Next ->
Por ahora lo dejamos sin Test ->
Next -> Deploy provider -> Seleccionamos Amazon S3. Aquí también se puede seleccionar Elastic Beanstalk o CloudFormation o EC2.
Como tenemos una aplicación React lo vamos a implementar en S3 y vamos a compilarlo directamente usando CodeBuild y este llevará los archivos directamente a S3.
Seguidamente Seleccionamos el bucket S3 que creamos al principio y marcamos al opción Extract file before deploy.
Next ->
Revisar la configuración -> Next-> Create Pipeline
Esperamos unos minutos. Considera tomar un café mientras tanto.
Si todo está correcto veremos satisfactoriamente que todas las etapas se cumplieron
Easy Money…
Próximo paso examinar los archivos en el bucket S3 y hacerlos públicos:
Volvemos a Amazon S3 -> Seleccionamos el bucket S3 que creamos al principio. Deberíamos ver las carpetas y archivos:
vamos a la pestaña propiedades del bucker -> bajamos hasta Static Web hosting -> Edit
Habilitamos Static Web Hosting
Esto convierte al bucket S3 en un servidor web estático con acceso publico con algunos permisos que editaremos mas adelante.
Indicamos que el Index Document es el archivo index.html
Guardamos con Save Changes.
Vamos a la pestaña de Permissions.
Editamos el Block Public Access
Desmarcamos el blockeo
Guardamos y confirmamos.
Ahora debemos agregar una política para permitir el acceso publico a lectura del bucket s3.
Con la ayuda de chatGPT podemos pedirle que nos genere la política de solo lectura al bucket s3.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:GetObjectVersion"
],
"Resource": "arn:aws:s3:::reactjs-app-cicd/*"
}
]
}
Lo pegamos en la edición de politicas sustituyendo los valores correspondientes.
Guardamos
Para verificar que todo esta funcionando, nos vamos a nuestro bucket S3 -> Pestaña Objets -> seleccionamos el archivos index.html
En las propiedades del objeto index.html copiamos su URL
Accedesmos desde un navegador web.
y voilà -> Easy Money.
Próximo gran paso. Probar el pipeline
Veamos nuestra aplicación.
Supongamos que queremos cambiar esta parte:
Vamos al editor de código.
Buscamos el archivo src/sections/Hero.jsx
Editamos la Línea que dice Video Editing por Video Premiere
Guardamos
Hacemos git add . , git commit y git push
Rápidamente nos vamos a codepipeline
y abrimos nuestro pipeline.
Veremos como nuestro pipeline se ha activado
Y finalizando podemos ver los cambios en el link que tenemos en el navegador.
Hemos logrado con éxito nuestro CI/CD con GitHub, AWS CodePipeline y AWS CodeDeploy.
Y para terminar. Para que ###@# me sirve esto?
Supongamos que quieres probar una aplicación y desplegar los cambios rápidamente simulando un despliegue a producción. Con este pipeline lo logras casi instantáneo.
O mostrar el producto a un cliente y quiere ver algunos cambios rápidos. Le pasas el link y Dinero Fácil.
