Originally published at rharshad.com
We can test and deploy react projects hosted at Github using 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.
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 -
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_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.
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
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: truewe ask travis to run the build in a virtualized machine with
language: node_jssince our project requires Node.js we tell travis ci to run the build on an infrastructure having Node.js installed
node_js: - nodespecifies to use the latest stable Node.js release
cache: npmspecifies to cache the
before_installany commands that we want to be run before the install process
mv travis_rsa ~/.ssh/id_rsamove the decrypted key to the default keys location
after_success: - bash ./deploy.shonce 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.
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
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.
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-addadds the default keys ~/.ssh/id_rsa into the SSH authentication agent for implementing single sign-on with SSH
npm run buildgenerates production build of JS, index.html files
rsyncremote sync the build artifacts. We delete any files if already present and make the parent directories if absent.
$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
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.