For more than two weeks now, I’ve been trying to figure out the magic bullet to getting my builds on CircleCI to be pushed and deployed onto DigitalOcean via SSH (specifically,
Through try and error, I got one of my repos to build. As to what I did and tweaked to get it working, I couldn’t remember.
I tried another CI stuff just now, and before I forget how I got it working, I’m writing the process down here, for myself and anyone who might find it useful
First, let’s conjoin on the same page for clarity. Here’s what this article helps achieve, specifically!
- You have a PWA Angular app you wish to deploy (technically, it could be anything, just using an Angular PWA in this instance)
- You’ve added your
config.ymlCI file (will show you one below)
- After build of PWA on CI, you want the
./dist/<project_name>/*files copied via
scp(SSH Copy, which means we’ll be needing SSH) to your DigitalOcean Droplet (It could be any VPS provider)
- This tutorial assumes you already, can communicate with your remote server from your local machine (the PC/laptop you’re sitting behind) via SSH.
- At this point, if you have no idea what SSH is, you may close the browser tab, and have a nice day!
If the above is your scenario, which was mine, let’s rock and roll.
Follow these instructions carefully. I’m going to be very thorough with the steps.
Generate SSH on Remote Server
Log into your remote server, namely, the one in the cloud, in other words, the one where the files will be copied to from the Circle CI.
You ssh into the server with a command in terminal/command prompt such as
ssh username@server_ip or
When logged in, enter these commands
NOTE: after entering
ssh-keygen, with regards to where to save the key that’s to be generated as a result of the
$ cd ~ $ cd ~/.ssh/ $ ssh-keygen
Now, hold your beer!
Add Public Key to authorized_keys
This step is crucial. Copy the
~/.ssh/for_circle.pubfile contents to
cat ~/.ssh/for_circle.pub >> ~/.ssh/authorized_keys
Note: We’re using
>> so that the
for_circle.pub contents are appended to the end of the contents in the
authorized_keysfile, rather than override the contents in the
authorized_keyswith only the
Remember, everything we’ve done so far is on the Remote Server.
Private Key to CircleCI
Now, on the server, in the previous steps, 2 files were generated from the
ssh-keygen command. We’ve only used the
for_circle.pub file. The other one is the
Run this command to print the contents of the
for_circle file in your terminal, then copy the contents in your computer’s clipboard
In this case, command will be
Then as shown in the GIF above, copy the entire key.
Good. Now, navigate to your CircleCI Project settings page. Mine looks something like this:
Now, add the private key contents you copied (the one into clipboard), paste into “Add Private Key” dialog box.
With the steps above completed, we’re left with only a single step more, namely, our
This is the contents of the
config.yml for our PWA
The above file,
config.yml, kindly put it in a folder called
.circleciin your project root directory.
Moment of Truth!
config.ymlchanges, and push to your repository which is tied to your CircleCi.
It should build and push to the droplet without any errors.
If all is well, you should be able to re-run your build as SSH (done from the CI dashboard), ssh into the CI Image, then from there, ssh into the remote server without any issues.