How to Setup CI/CD of Jigsaw Site to Digital Ocean Droplet Using Bitbucket Pipelines
I created a new personal resume site and decided I wanted to build a static site since it wouldn’t be frequently updated. I evaluated Nuxt, Gatsby, and a few others but settled on Jigsaw, a static site generator based on Laravel. I had never used it before and figured this would be a good learning experience while building something I needed. I was pleasantly surprised by how easy it is to use and setup, so kudos to the Tighten team for putting together such an elegant solution.
I wanted to get a CI/CD pipeline configured to handle the site’s deployment but couldn’t find any working tutorials, so I’m sharing my solution in case it helps others. I’m using Bitbucket for this since it’s a personal private repo, so I’m using Bitbucket Pipelines.
Instructions
After you enable pipelines for your project, you’ll need to configure a Pipelines Repository Variable in your project. Go to the settings tab in your repo, and then select Repository variables:
Add 3 variables:
- USER_NAME – The SSH user name you want Bitbucket to use to connect to your server.
- PRODUCTION_HOST – Your domain that Bitbucket should connect to
- FOLDER – Folder Path where the site should be deployed to
Generate an SSH key (or use your own) and add it to your server under the SSH Keys tab in Pipelines:
I generated a new key and then added it to ~/.ssh/authorized_keys for the account.
Add this YAML snippet to your bitbucket-pipelines.yml in your root. This will use PHP 7.4, install rsync, node + npm, composer, and build the production version of the site to deploy to the specified folder.
The -aVP switch for rsync is to give me verbose progress feedback so I can see what’s happening. If you don’t need the detail, switch it to -a.
image: php:7.4-fpm
pipelines:
branches:
master:
- step:
name: Jigsaw Build
script:
- apt-get update && apt-get install -y unzip
- apt-get install rsync openssh-client nodejs npm -y
- curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
- composer install
- npm install
- npm run production
- rsync -avP build_production/ $USER_NAME@$PRODUCTION_HOST:$FOLDER --exclude=bitbucket-pipelines.yml --chown=www-data:www-data
I received a few errors when rsync ran. In case you run into them as well, here’s the list and fixes. The first was:
rsync: failed to set times on "$FOLDER": Operation not permitted (1)
I added --no-t to resolve that and then got a new error:
rsync: failed to set permissions on "$FOLDER": Operation not permitted (1)
which was fixed with adding the switch --no-perms. My final rsync command became:
rsync -avP --no-t --no-perms build_production/ $USER_NAME@$PRODUCTION_HOST:$FOLDER --exclude=bitbucket-pipelines.yml --chown=www-data:www-dataHow to Setup a CI/CD Pipeline for Storybook.js using Gitlab
I just spent a few hours setting up a Gitlab pipeline to deploy a Storybook.js site. Of course the end result ended up being much simpler than I made it out to be. Like everything else on my blog, I’m sharing in case anyone else can use the information to save time.
Just put this in your gitlab-ci.yml and it’ll take care of caching the node modules and building your static version of Storybook to deploy.
image: node:latest
cache:
paths:
- node_modules/
stages:
- build
- deploy
build:
stage: build
script:
- npm install
- npm run build-storybook -- -o storybook-static
artifacts:
paths:
- storybook-static
only:
- qa
- develop
- master
deploy:
stage: deploy_to_aws
# add your deploy code here
Why I’m switching from Namecheap to Cloudflare
Years ago, when the internet was young, I purchased my first domain from InterNIC for about $70 a year. When the alternatives finally popped up, I switched my domain to Godaddy. As prices dropped, I ended up buying more domains through them for ideas and projects I developed. Eventually, I got tired of Godaddy’s shenanigans with pricing (increasing prices and having privacy as an add-on) and upselling everything, and after reviewing many technical forums, ended up switched everything to Namecheap where I even signed up for their shared hosting.
Things started well, but after a short while, the hosting ended up not being any better than Godaddy as all my sites became ridiculously slow as they oversold capacity. I finally made the jump to DigitalOcean, and the same site without any changes or optimizations jumped in performance about 60% based on the metrics reports I was running. No joke, people were pinging me asking what I changed to make my site run so much faster because they wanted to do the same.
I was annoyed that Namecheap refused to refund a partial credit on the hosting even though I wasn’t using it anymore despite their bait and switch caused the performance issues by overselling capacity. In the end, I didn’t fight, because it was cheap, I was beyond the credit card chargeback period, and I still had domains with them and didn’t like any of the other registrars out there enough (nor were the prices better) to make the switch.
On the domain side, their control panel was pretty confusing at first. Godaddy’s was more straight forward for managing DNS and records, so I had to constantly figure out what the Namecheap configuration equivalents were because it wasn’t straight forward. They updated their control panel, and things got easier, but it still wasn’t intuitive. I think a lot of my confusion came from them trying to default to their parking pages or their hosting.
I’d run into issues, and their support would always be good enough to help fix them. I then ran into an issue with setting up a txt record. The fix required them to manually enter the entry on their side due to a bug in their control panel that they still haven’t fixed to date. The bug was serious enough that if I made any changes to any of the domain settings (like adding another A/CNAME/MX record), it would undo their change and I’d have to file another ticket for them to complete the change.
All changes would take hours to propagate. Many of the services that validate DNS changes would not see them for hours or even a day. It hadn’t been a great experience, and now I’ve wanted to find a new registrar to replace Namecheap.
In 2018, CloudFlare announced their registrar service. I’ve patiently watched to see how reliable it is and finally ended up testing it last month with a domain for an existing project that’s in development. To say I was blown away was an understatement. The experience hasn’t been perfect, but the things that really matter are well executed.
I found Namecheap to be a bit deceptive in the transfer process. All other registrars I’ve used let you approve transfers instantly via a link in the notification email. Namecheap sent an email saying they received a request to transfer the domain and this is the text about approving/canceling:
I wanted to expedite the transfer only because I wanted to get the control panel cleared out to find out what’s left and what’s worth keeping and what domains I should let go. I reached out to their chat and learned that they implemented a dark pattern. I never clicked the link because I didn’t want to accidentally cancel an approved transfer as I had assumed it was a direct link to cancel.
It turns out that their support person confirmed the text is deceptive and the link opens a page lets you approve or cancel it:
Not cool Namecheap, but I digress. So let’s look at the pro’s and con’s of CloudFlare which elaborate why I’m switching to them.
Pros
- Price point is cheaper than everyone else since they sell wholesale.
- Transfers are painless.
- Control Panel is intuitive compared to both Namecheap and Godaddy’s. It allows for managing records quicker.
- DNS changes reflect instantly on all the third party domain verification services.
- Cloudflare offers free SSL on the domain level.
- Support responded in a few hours to an issue I had.
Cons
- Can’t register new domains directly at Cloudflare which requires purchasing a domain somewhere else and then waiting 60 days to transfer.
- Doesn’t support all the TLD domains yet.
- Can’t create custom nameservers without paying $200 a month, which was free with godaddy and namecheap.
Not bad for a cons list, so I migrated most of my domains over to Cloudflare, and it’s a win all the way around. They sell domains at cost, offer a ridiculously easy to use control panel where everything works. Even better are how quickly changes take effect, and third party services can validate the changes.
One-line snippet to update linux and apps on Ubuntu using apt-get
I find myself using this command on Digitalocean droplets fairly often and am sharing in case anyone else finds it useful. Use this one line to install all updates, security fixes, and system upgrades.
sudo apt-get update && sudo apt-get upgrade && sudo apt-get dist-upgrade
How to stop CouchDB on Mac OS
I have been working on a proof of concept using CouchDB. After getting the proof of concept working, I spun up a digital ocean droplet and proceeded to setup CouchDB on the server. I went to enable the SSH tunnel so I could access the CouchDB Futon instance and promptly ran into an error because my local instance of CouchDB was using the same port, 5984. I had a lot of trouble finding out an easy way to stop CouchDB because the documentation in the Wiki wasn’t accurate:
sudo launchctl unload \
/usr/local/Library/LaunchDaemons/org.apache.couchdb.plist
As a workaround, in Terminal, run
launchctl list | grep couchdb
This will output something like:
99093 0 org.apache.couchdb.288008
Grab the highlighted portion and run
launchctl stop "org.apache.couchdb.288008"
Substitute the process name accordingly and you should be able to run the ‘launchctl list’ command again and see the process is no longer present.
(98)Address already in use: AH00072: make_sock: could not bind to address [::]:80 – error
I recently got handed a new Ubuntu droplet at work to setup and work on. I was going through the typical configuration to lock down the server and go to installing Apache when I suddenly ran into the error
(98)Address already in use: AH00072: make_sock: could not bind to address [::]:80 – error
I was a little surprised considering I had only run 4 commands total on a brand new installation. If you’re getting this error like me, you’ll need to find out what’s being bound to port 80 and then stop it. Use this command to get a list of anything that’s running on port 80.
sudo lsof -i:80
For me, it turned out nginx was running and bound to port 80. If you have the same problem, run this command to stop it:
sudo service nginx stop
Now you should be able to start apache.
How to Copy and Paste into the Digital Ocean VNC Console
I recently signed up for Digital Ocean to test droplets for my development and linux management testing. I was securing the server and setup fail2ban, disabled the root login, and created a user account but forgot to change the user name from root to the user name I selected in my SSH client profile. I ended up locking myself out of the server and had to resort to logging into the admin panel on Digital Ocean’s website and use their browser embedded VNC client to restore my access. I quickly discovered that one of the downsides of using this panel is that you can’t copy and paste commands. Luckily there’s a workaround and you can use the browser console to do sendkeys through Javascript.
Bring up the console in the browser developer tools. Here’s a cheat sheet for keyboard shortcuts:
| Browser | Description | Windows | Mac |
|---|---|---|---|
| Chrome | Open Developer Tools and bring focus to the console | Ctrl + Shift + J | Cmd + Opt + J |
| Firefox | Open Console | Ctrl + Shift + K | Cmd + Opt + K |
| Internet Explorer | After hitting F12, you have to click the console tab. There’s no direct shortcut to the console tab. | F12 | N/A |
!function(){function t(){window.rfb.sendKey(e.shift().charCodeAt()),e.length>0&&setTimeout(t,10)}var e=prompt("Enter text to be sent to console").split("");t()}();
Update 9-21-16
Ruden and Sebastiaan’s pointed out there was a bug in the code above. This updated snippet has support for characters when using shift characters like !@#$%^&*()_+
!function(){function t(){function n(t,e){s=s.concat(RFB.messages.keyEvent(t,e))}var o=e.shift(),s=[],i=o.charCodeAt(),c=-1!=='!@#$%^&*()_+{}:"<>?~|'.indexOf(o),r=XK_Shift_L;c&&n(r,1),n(i,1),n(i,0),c&&n(r,0),rfb._sock.send(s),e.length>0&&setTimeout(t,10)}var e=prompt("Enter text to be sent to console").split("");t()}();You’ll receive a dialog prompt to enter the copy to paste in. Please note that you need to click on the VNC console and hit enter to execute the command.
If you need to enter more than one command, just hit the up arrow on your keyboard in the console to get the script again for easy reuse.