Despliegue automático de una aplicación React en gh-pages con Travis-CI

Bienvenido, les saluda Luis y esta vez les traigo este artículo.

Aquí hay un ejemplo de una aplicación React que usa Travis CI con un script de compilación personalizado para implementarse en las páginas gh después de que cada solicitud de extracción se fusiona en el proyecto. El sistema de compilación actualiza automáticamente los últimos cambios alojados en cualquier URL en la que tenga alojado su proyecto. En este blog, veremos cómo implementar automáticamente el repositorio en las páginas de gh.

Para continuar con la implementación automática en la rama gh-pages,

Primero debemos configurar Travis para el proyecto.
Registrarse en https://travis-ci.org/ y encienda Travis para este repositorio.

A continuación, agregamos .travis.yml en el directorio raíz del proyecto.

# Set system config
sudo: required
dist: trusty
language: node_js# Specifying node version
node_js:
- 6# Running the test script for the project
script:
- npm test# Running the deploy script by specifying the location of the script, here ‘deploy.sh’ deploy:
provider: script
script: "./deploy.sh"
# We proceed with the cache if there are no changes in the node_modules
cache:
directories:
- node_modulesbranches:
only:
- master

Los archivos de configuración de Travis asegurarán que el proyecto se esté construyendo para cada cambio realizado, usando el comando npm test; en nuestro caso, solo considerará los cambios realizados en la rama maestra.

Si uno quiere ver otras ramas, puede agregar el nombre de la rama respectiva en las configuraciones de travis. Después de verificar el paso de la compilación, debemos presionar automáticamente los cambios realizados para lo cual usaremos un script bash.

#!/bin/bashSOURCE_BRANCH="master"
TARGET_BRANCH="gh-pages"# Pull requests and commits to other branches shouldn't try to deploy.
if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then
echo "Skipping deploy; The request or commit is not on master"
exit 0
fi# Save some useful information
REPO=`git config remote.origin.url`
SSH_REPO=$REPO/https://github.com//git@github.com:
SHA=`git rev-parse --verify HEAD`ENCRYPTED_KEY_VAR="encrypted_$ENCRYPTION_LABEL_key"
ENCRYPTED_IV_VAR="encrypted_$ENCRYPTION_LABEL_iv"
ENCRYPTED_KEY=$!ENCRYPTED_KEY_VAR
ENCRYPTED_IV=$!ENCRYPTED_IV_VAR
openssl aes-256-cbc -K $ENCRYPTED_KEY -iv $ENCRYPTED_IV -in deploy_key.enc -out ../deploy_key -dchmod 600 ../deploy_key
eval `ssh-agent -s`
ssh-add ../deploy_key# Cloning the repository to repo/ directory,
# Creating gh-pages branch if it doesn't exists else moving to that branch
git clone $REPO repo
cd repo
git checkout $TARGET_BRANCH || git checkout --orphan $TARGET_BRANCH
cd ..# Setting up the username and email.
git config user.name "Travis CI"
git config user.email "$COMMIT_AUTHOR_EMAIL"# Cleaning up the old repo's gh-pages branch except CNAME file and 404.html
find repo/* ! -name "CNAME" ! -name "404.html" -maxdepth 1  -exec rm -rf  ; 2> /dev/null
cd repogit add --all
git commit -m "Travis CI Clean Deploy : $SHA"git checkout $SOURCE_BRANCH# Actual building and setup of current push or PR.
npm install
npm run build
mv build ../build/git checkout $TARGET_BRANCH
rm -rf node_modules/
mv ../build/* .
cp index.html 404.html# Staging the new build for commit; and then committing the latest build
git add -A
git commit --amend --no-edit --allow-empty# Deploying only if the build has changed
if [ -z `git diff --name-only HEAD HEAD~1` ]; then  echo "No Changes in the Build; exiting"
exit 0else
# There are changes in the Build; push the changes to gh-pages
echo "There are changes in the Build; pushing the changes to gh-pages"  # Actual push to gh-pages branch via Travis
git push --force $SSH_REPO $TARGET_BRANCH
fi

Este script bash permitirá al usuario de Travis CI enviar cambios a las páginas gh, para ello necesitamos almacenar las credenciales del repositorio en forma cifrada.

POST RELACIONADO: Convenciones de nomenclatura de mejores prácticas en Angular

1. Para obtener las claves rsa públicas / privadas usamos el siguiente comando

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

2. Generará claves en la carpeta .ssh / id_rsa en su repositorio de inicio.

Asegúrese de no ingresar ninguna frase de contraseña mientras genera las credenciales; de lo contrario, Travis se atascará en el momento del descifrado de las claves.
Copie la clave pública e implemente la clave en el repositorio visitando

5. También necesitamos establecer la variable de entorno ENCRYPTED_KEY en Travis. Aquí hay una captura de pantalla donde configurarlo en el panel del repositorio de Travis.

6. A continuación, instale Travis para el cifrado de claves.

sudo apt install ruby ruby-dev
sudo gem install travis

7. Asegúrese de haber iniciado sesión en Travis, para iniciar sesión utilice el siguiente comando.

travis login

8.Asegúrate de haber copiado el ssh en deploy_key y luego encripta tu deploy_key privada y agrégala a la raíz de tu repositorio, usa el comando –

travis encrypt-file deploy_key

9. Después del cifrado exitoso, verá un mensaje

Please add the following to your build script (before_install stage in your .travis.yml, for instance):openssl aes-256-cbc -K $encrypted_3dac6bf6c973_key -iv $encrypted_3dac6bf6c973_iv -in deploy_key.enc -out ../deploy_key -d

Agregue el generado anteriormente deploy_key en Travis e inserte los cambios en su rama maestra. No empuje el deploy_key solo el archivo de cifrado, es decir, deploy_key.enc
Finalmente, envíe los cambios y cree una solicitud de extracción y combínela para probar la implementación. Visite los registros de Travis para obtener más detalles y depuración.