Get The Latest Articles In Your Inbox.

Join the other 2000+ savvy node.js developers who get article updates. You will receive only high-quality articles about Node.js, Cloud Computing and Javascript front-end frameworks. Unsubscribe anytime.

/AWS

Como empezar a usar integraci贸n continua en tu app 馃殌

Use CircleCI y automatice sus deploys gratis 馃殺

En una publicaci贸n futura, analizaremos c贸mo implementar un bucket de AWS S3 como alojamiento para su aplicaci贸n web y una distribuci贸n de AWS CloudFront como su red de distribuci贸n de contenido para entregar su aplicaci贸n web de manera escalable.

Pero primero, necesitamos una forma eficiente de administrar varios entornos.

Despu茅s de todo, si tiene un mill贸n de usuarios, no desea arruinar su sitio utilizando un comando CLI incorrecto.

Necesitamos tener nuestra infraestructura automatizada, y esas configuraciones deben ser DENTRO de una herramienta de control de versiones como GIT o SVN.

(es broma, 驴qui茅n usa SVN en estos d铆as?)

Soy un gran admirador de CircleCI, lo he estado usando desde la versi贸n 1 en 2015 cuando estaba buscando una alternativa barata a TravisCI pero tambi茅n una alternativa m谩s f谩cil a Jenkins.

Profundicemos en una soluci贸n de Integraci贸n Continua para su aplicaci贸n web usando CircleCI

Tabla de contenidos

驴Por qu茅 integraci贸n continua y entrega? 馃

Diagrama de integraci贸n continua

Cuando su equipo es peque帽o, o cuando hay demasiadas cosas que tener en cuenta, es f谩cil olvidar detalles, como invalidar el cach茅 de CloudFront despu茅s de un deploy. De lo contrario, puede terminar sin ver su actualizaci贸n en el entorno en vivo.

O cuando ese tipo que hace los deploys est谩 enfermo y no puede presionar el bot贸n, 驴qu茅 haces? 驴Posponer su lanzamiento a producci贸n?

Para evitar todas estos 鈥減roblemas鈥, aqu铆 hay una configuraci贸n CircleCI que se implementar谩 su c贸digo frontend a S3 e invalidar谩 su CloudFront cache despu茅s de una fusi贸n a la rama deseada.

Archivo de configuraci贸n CircleCI 馃檶

version: 2
jobs:
"testing":
docker:
- image: circleci/node:10-stretch
working_directory: ~/repo
steps:
- checkout
- restore_cache:
keys:
- app-{{ checksum "package.json" }}
# fallback to using the latest cache if no exact match is found
- app-
- run: npm install
- save_cache: # Save node_modules into cache with a checksum of the package.json
paths:
- node_modules
key: app-{{ checksum "package.json" }}
- run: npm run test # Run your tests
"deploy":
docker:
- image: circleci/node:10-stretch
working_directory: ~/repo
steps:
- checkout
- run:
name: Installing AWS CLI
working_directory: /
command: |
sudo apt-get -y -qq update
sudo apt-get install -y awscli
sudo apt-get install -y python-pip python-dev build-essential
sudo pip install awsebcli --upgrade
- run:
name: Preparing Artifact
command: |
npm install
npm run build # Here goes your build command.
cd dist # My angular app generate a Dist folder
zip ../build.zip -r * .[^.]* # Just zip your files
echo "Sucessfull building"
- run:
name: Deploying Client to S3 and Cloudfront
command: |
aws configure set preview.cloudfront true # Turn on cloudfront in AWS CLI
if [ "${CIRCLE_BRANCH}" == "production" ] # Check current branch to decide to which S3 bucket deploy
then
aws s3 sync ~/repo/dist s3://yoursite.com --delete
aws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID_YOUR_SITE_PRODUCTION --paths /\*
elif [ "${CIRCLE_BRANCH}" == "staging" ]
then
aws s3 sync ~/repo/dist s3://staging.yoursite.com --delete
aws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID_YOUR_SITE_STAGING --paths /\*
else
aws s3 sync ~/repo/dist s3://dev.yoursite.com --delete
aws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID_YOUR_SITE_DEV --paths /\*
fi
workflows:
version: 2
build_and_deploy:
jobs:
- testing
- deploy:
requires:
- testing # Deploy require testing to be successful
filters:
branches:
only: # Only deploy for production, staging, and master branchs
- production
- staging
- master
view raw config.yml hosted with 鉂 by GitHub

Explicaci贸n 馃嵖

Aqu铆 implementamos nuestro c贸digo en el bucket de AWS S3 en funci贸n de la rama de destino que se fusion贸.

Puede volverse loco aqu铆 y usar versionado sem谩ntico, configurar reglas de expresiones regulares para decidir cu谩ndo una versi贸n de etiqueta est谩 lista para publicarse en producci贸n o en beta.

El enfoque aqu铆 es m谩s cl谩sico.

Tiene su rama master donde se fusiona todo el c贸digo, luego la rama staging es donde fusiona master cuando es lo suficientemente estable como para estar listo para la revisi贸n manual de QA.

Luego, la rama production se fusiona con master despu茅s de que se ejecutaron todas las pruebas de aceptaci贸n y todos est谩n contentos.

隆Ejecute sus pruebas! 馃懏

Por favor ejecute sus pruebas y aseg煤rese de que pasen antes de intentar cualquier implementaci贸n. Y recuerde emitir un error si su prueba falla, para que la implementaci贸n se detenga.

Mira mi amigo, no soy tu project manager, puedes saltarte este paso, pero piensa en tus clientes.

"testing":
  docker:
    - image: circleci/node:10-stretch
  working_directory: ~/repo
  steps:
    - checkout
    - restore_cache:
        keys:
        - app-{{ checksum "package.json" }}
        # retrocece para usar el ultimo cache si no se encuentra coincidencia.
        - app-
    - run: npm install
    # Guarda node_modules en el cache con una comprobacion del package.json.
    - save_cache:
        paths:
          - node_modules
        key: app-{{ checksum "package.json" }}
    # POR FAVOR ejecuta tus pruebas.
    - run: npm run test 

Prepara tu artefacto 馃敭

La forma en que genera su artefacto depende totalmente de usted.

En mi caso, estoy implementando una aplicaci贸n Angular2.

El npm run build genera una compilaci贸n de producci贸n en la carpeta dist, as铆 que solamente comprimiendo eso ya estaba listo.

  - run:
    name: Preparing Artifact
    command: |
      npm install
      npm run build 
      cd dist       
      zip ../build.zip -r * .[^.]*
      echo "Artifact generated!"

La implementaci贸n en el S3 bucket 馃摝

Aqu铆 estamos utilizando un enfoque simple, comprobando en qu茅 rama estamos construyendo actualmente y decidiendo en qu茅 S3 bucket deber铆amos implementar nuestro c贸digo.

  if [ "${CIRCLE_BRANCH}" == "production" ]  # Comprueba la rama actual para decidir en que s3 bucket implementarlo.
  then
    # Remplaza tus archivos agresivamente
    aws s3 sync ~/repo/dist s3://yoursite.com --delete  

    # Invalida el Cloudfront Cache
    aws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID_YOUR_SITE_PRODUCTION --paths /\* 
  elif [ "${CIRCLE_BRANCH}" == "staging" ]
  ...

El t茅rmino 鈥渋mplementar鈥 se usa aqu铆 como una palabra elegante para copiar, pegar y reemplazar archivos

Invalidaci贸n de cach茅 de CloudFront 馃暤锔忊嶁檪锔

El detalle crucial

  aws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID_YOUR_SITE_PRODUCTION --paths /\*

Cuando actualiza sus archivos de AWS S3 bucket, a AWS CloudFront no le importar谩, porque su trabajo es actuar como una capa de cache.

Tienes que decirle que quieres 鈥渓impiar鈥 el 鈥渃ache鈥.

聽Por favor, modifique esto a su gusto, tal vez desee excluir la actualizaci贸n del cache de im谩genes.

Conclusi贸n 馃帀

En este tutorial, aprendimos todos los pasos b谩sicos y necesarios para crear una soluci贸n de integraci贸n continua y entrega continua para S3 y CloudFront mediante el uso de la incre铆ble herramienta CircleCI.

Archivar la integraci贸n continua es algo en lo que vale la pena invertir tiempo. Le pagar谩 con mucho tiempo ahorrado y prevenci贸n de errores humanos.

Recursos

Get The Latest Articles In Your Inbox.

Join the other 2000+ savvy node.js developers who get article updates.

You will receive only high-quality articles about Node.js, Cloud Computing and Javascript front-end frameworks.

Unsubscribe anytime.

santypk4

Sam Quinn - @santypk4

I wish they read the docs

Read More
Latest Posts
Latest Open Source Projects
About us
Software on The Road LLC
134 N 4th St, Brooklyn, NY 11249, United States
contact@softwareontheroad.com
Software on The Road
coding the future