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.
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.
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.
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
Your .travis.yml file will look as follows
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.
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.
We are going to tell travis CI what to do with the
.travis.yml file. We update the file with below contents.
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.
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
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.
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.