Travis-Ci Node.js Quick Start
Background
My fragile ego was recently challenged when former colleagues were roasting folks who host personal pages on WordPress.
Me being someone who…
✓ Fell into that WP category (prior to this post)
✓Was a computer engineer (although focused on infrastructure and not development)
…I felt the need to abandon the previous site and start learning something new.
I decided to start learning JavaScript, React & React-Native as I’ve had some requests come my way if I can help build apps.
I built my current markbixler.com page and decided to host it via AWS S3 as an SPA (Single Page Application) and use CloudFront to handle the SSL cert to make my page secure.
I prefer automating as much of my work as possible, so when the time came to actually publish my site, I quickly tired of doing a yarn build & aws s3 cp of my site to S3. Further work included invalidating files in CloudFront due to its caching mechanisms. I went the invalidation route (vs. file versioning) since my files won’t change that frequently (I should always fall into the “free” tier for invalidation requests) and I’m also too lazy to figure out cleaning file versioning process for my site and index file.
I decided to try out TravisCI to solve for the above annoyances. I wasn’t super happy with the documentation out there.
I learn by basically reverse-engineering someone else’s work and then filling in the gaps and building from there. -Me
Overview
The goal of this setup is to automate the following processes:
- Building my node application:
yarn build- Copying The Build Files to my S3 Bucket for Hosting:
aws s3 sync build/ s3://markbixler.com --acl public-read- Invalidating CloudFront to “Flush Cache” and load my updates:
aws cloudfront create-invalidation \
--distribution-id EDFDVBD6EXAMPLE \
--paths"/*"Pre-Requisites
✓ Node.js > 12.x
✓ Ruby Installed (for Travis CLI)
✓ S3 Bucket(s) & CloudFront Already Configured
✓ AWS Keys w/ Appropriate Access to CF and S3
✓ GitHub Account, Repository & PAT (Personal Access Token)
Setup
- Register w/ TravisCI using your GitHub credentials.
<https://www.travis-ci.com/> - Install Travis CLI:
/* FOR OSX */
gem install travis --no-document - Login to Travis CLI for your project using your GitHub PAT.
travis login --pro --github-token 17ee814dxfdsxxxxxxxxxx - Create
.travis.ymlfile in your Repository Root Directory using the following example:
- Now using the “travis cli” you can run the following commands to setup your Environment Variables to protect your sensitive information:
travis env set PROD_BUCKET_NAME markbixler.com
travis env set AWS_CLOUDFRONT_DIST_ID E27FGGXXXXXXXX/* Encrypted Variables */
travis encrypt AWS_SECRET_ACCESS_KEY_ID=lBC8BdEY5mPpxxxx --add
travis encrypt AWS_ACCESS_KEY_ID=AKIATBHxxxxxx --add/* The 2 encrypt commands will append 3 lines to the bottom of your .travis.yml file from the example shown above. These will be your encrypted env values */
6. Commit your changes and push your code. If you’re committing directly to the master branch (not recommended) or you do a PR to master, TravisCI will see that event and start the pipeline. You can see the running process from the TravisCI Gui.
Now you’re done! You should see your new updates live on the web and continue developing!
Conclusion
This is obviously a very simple setup which is all I needed for just my personal website. TravisCI among all other tools are very powerful and you soon you can start writing tests and performing all sorts of other actions besides the build, push and invalidation.
For further reading, you can dissect the .travis.yml and see how we loaded an NPM Package to run the invalidation as well as using the S3 Provider.
Happy developing and let me know of any issues or errors in my post. Thanks!
