Originally published at rharshad.com
Travis CI is a hosted, distributed continuous integration service used to build and test software projects hosted at GitHub.
We can test and deploy react projects hosted at Github using Travis CI.
Pre-Requisites
- Setup a Travis CI account
- Register your repositories with Travis CI
Once you have your react project hosted at Github registered with Travis CI, we can proceed to the next steps of running the tests and deploying it to your server using Travis CI.
Install Travis CLI
We need to allow travis to SSH into your server so that it can deploy the build artifacts.
However, we can't store the private key as such in the github repo as anyone can use it to log into the server.
Every repository that's registered with Travis CI has it's own keypair where the private key is known only to Travis CI and the public key is available to anyone.
We can use this public key to encrypt your SSH key and commit it to github. So, only travis will be able to decrypt it and use the decrypted SSH private key to login to your server.
This feature is provided through travis cli. Hence, we will be installing the same by running below commands.
# travis cli is ruby based so we need to install ruby and other dev libraries
sudo yum install ruby -y
sudo yum install gcc g++ make automake autoconf curl-devel openssl-devel \
zlib-devel httpd-devel apr-devel apr-util-devel sqlite-devel -y
sudo yum install ruby-rdoc ruby-devel -y
# install travis cli
gem install travis
If you're setting up Travis CLI in your windows system using git bash beware of these issues -
Generate And Encrypt Private Key
Now we are going to generate a SSH key and encrypt it using travis cli by running below commands.
# travis login by providing your gihub username and password
travis login --com
# clone your react project and change directory to it
cd react-app
# create .travis.yml file
touch .travis.yml
# generate new key called "travis_rsa"
ssh-keygen -t rsa -N "" -C "React App" -f travis_rsa
# encrypt the file using your repo's public key and add it to your .travis.yml file
# must be run within your project directory
travis encrypt-file travis_rsa --add --com
# remove the key
rm travis_rsa
# stage .travis.yml and travis_rsa.enc files
git add .travis.yml
git add travis_rsa.enc
If incase, when you are running the encrypt-file
command in your project directory and your repo isn't auto-detected, you can pass the repo name as follows
# use -r flag e.g. -r owner/project
travis encrypt-file travis_rsa --add --com -r HarshadRanganathan/react-app
Your .travis.yml file will look as follows
before_install:
- openssl aes-256-cbc -K $encrypted_xxxxxx_key -iv $encrypted_xxxxxx_iv
-in travis_rsa.enc -out travis_rsa -d
You can find encrypted_xxxxxx_key
and encrypted_xxxxxx_iv
stored as Environment Variables
under your project settings in Travis CI.
Copy the public key in the file travis_rsa.pub
which we will be using next.
Create a new user for Travis in your server
Now that we have stored your encrypted private key in the repo, we need to create a new user in your server for Travis to deploy the build artifacts.
We will be adding the public key generated previously to this user so that travis can SSH into the server using the decrypted private key.
For example, we can use below commands to create a new user in Cent OS.
# create a new travis user
sudo adduser travis
# delete the password for the user
sudo passwd -d travis
# change to travis user
su - travis
# create a new directory called .ssh and restrict its permissions
mkdir .ssh
chmod 700 .ssh
# open a file in .ssh called authorized_keys
# copy the public key which we had previously generated
# enter :x then ENTER to save and exit the file
vi .ssh/authorized_keys
# restrict the permissions of the authorized_keys file
chmod 600 .ssh/authorized_keys
exit
Setup .travis.yml
We are going to tell travis CI what to do with the .travis.yml
file. We update the file with below contents.
sudo: true
language: node_js
node_js:
- node
git:
quiet: true
cache: npm
before_install:
- openssl aes-256-cbc -K $encrypted_xxxxxx_key -iv $encrypted_xxxxxx_iv
-in travis_rsa.enc -out travis_rsa -d
- chmod 600 travis_rsa
- mv travis_rsa ~/.ssh/id_rsa
- cat server.pub >> $HOME/.ssh/known_hosts
after_success:
- bash ./deploy.sh
Here's the explanation of the file contents -
-
sudo: true
we ask travis to run the build in a virtualized machine withroot
access -
language: node_js
since our project requires Node.js we tell travis ci to run the build on an infrastructure having Node.js installed -
node_js: - node
specifies to use the latest stable Node.js release -
cache: npm
specifies to cache thenode_modules
directory -
before_install
any commands that we want to be run before the install process -
mv travis_rsa ~/.ssh/id_rsa
move the decrypted key to the default keys location -
after_success: - bash ./deploy.sh
once the tests pass and the build completes successfully, we ask travis to run our deploy script.
When we specified language: node_js
travis will run npm install
during install lifecycle and npm test
during the script lifecycle.
Read Node.js language guide and Job Lifecycle for more details.
Adding to SSH Known Hosts
Travis CI can add entries to ~/.ssh/known_hosts prior to cloning your git repository, which is necessary if there are git submodules from domains other than github.com, gist.github.com, or ssh.github.com.
Get your server's public key by running this command
ssh-keyscan (domain/ip_address)
Add the public key to file named server.pub
and push to your repo.
In .travis.yml file, we had specified this command cat server.pub >> $HOME/.ssh/known_hosts
which will add your server's public key to the known hosts file in the virtualized machine created by travis ci.
Deploy Script
Now add below deploy script to your project repo which does the following
- execute the script only if the build is for master branch or PR
-
eval "$(ssh-agent -s)"
start an ssh-agent session -
ssh-add
adds the default keys ~/.ssh/id_rsa into the SSH authentication agent for implementing single sign-on with SSH -
npm run build
generates production build of JS, index.html files -
rsync
remote sync the build artifacts. We delete any files if already present and make the parent directories if absent.
Here $TRAVIS_BUILD_DIR/public
denotes the location where your build artifacts (JS, index.html files) are generated.
#!/bin/bash
set -xe
if [ $TRAVIS_BRANCH == 'master' ] ; then
eval "$(ssh-agent -s)"
ssh-add
npm run build
rsync -rq --delete --rsync-path="mkdir -p react-app && rsync" \
$TRAVIS_BUILD_DIR/public travis@<ip>:react-app
else
echo "Not deploying, since this branch isn't master."
fi
Safelist Travis IP Addresses
If incase, you have setup SSH restriction in your firewall rules, you will have to safelist travis ip addresses so that travis would be able to SSH and deploy the artifacts in your server.
Refer Travis IP Addresses list.
Since we had specified sudo: true
in our .travis.yml file, we have to safelist Sudo-enabled Linux
IP addresses.
Also it is recommended to subscribe yourself to the notification as these IP adderesses will change periodically.
Now we have everything in place. Whenever you update master
branch, Travis CI will generate the production build artifacts and deploy them to your server provided the tests pass.
Top comments (0)