DEV Community

Bruce
Bruce

Posted on

How to setup continuous deployment of a website on a VPS using GitHub Actions

Doesn't matter if it is a private or public repository

Prerequisites

Here are the prerequisites required for this tutorial:

  • A GitHub account
  • Any Virtual Private Server, though i prefer DigitalOcean because of how easy it is to get started. If you can sign up on DigitalOcean with my Referral Link you get $100 in credit that can be spent in 60 days.

Some of the things we are going to cover in this tutorial.

  • Generating an ssh key on your remote VPS
  • Adding your generated public key to authorized keys
  • Creating GitHub secret keys
  • Configuring GitHub actions to auto-deploy your private/public repository

Step 1 - Open your terminal add ssh into your VPS

$ ssh user@hostname
$ cd ~/.ssh

Step 2 - Generate an ssh key

$  ssh-keygen -t rsa -b 4096 -C "test@example.com"
  • The email is the one you use on your GitHub account

Step 3: Press Enter repeatedly to set default name(Don't set a passphrase)

  • If you do "ls" in your terminal you will see these two files ( id_rsa and id_rsa.pub)

Step 4 - Add a public key to authorized keys

$  cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
  • Note: We’re using >> so that the id_rsa.pub contents are appended to the end of the contents in the authorized_keys file, rather than override the contents in the authorized_keys.

Step 5 - Create GitHub secrets

$  cat ~/.ssh/id_rsa
  • In your terminal run the above command select the output content and copy to your clipboard.

Alt Text

Head over to your GitHub repository you wish to configure,click on settings tab then in options menu click on and add the following secrets:

  • HOST: set the key to your hostname or ip address.

  • USERNAME: set the key to the username you use to SSH into your VPS.

  • SSHKEY: set the key to you copied contents from the command above.

  • PORT: set the key to 22

Alt Text

If you are still here, congratulations! we are almost done!

With the steps above completed, we’re left with only a single step more, namely, our .github/workflows/deploy.yml file.

Step 6 - Configure GitHub actions to auto-deploy your private/public repository

Assuming that you have the repo cloned locally on your machine, go ahead and create .github/workflows folder and inside that create a deploy.yml file

  • Add the following contents to deploy.yml file
name: Deploy

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1

    - name: Copy repository contents via scp
      uses: appleboy/scp-action@master
      env:
        HOST: ${{ secrets.HOST }}
        USERNAME: ${{ secrets.USERNAME }}
        PORT: ${{ secrets.PORT }}
        KEY: ${{ secrets.SSHKEY }}
      with:
        source: "."
        target: "/var/www/mywebsite"

    - name: Executing remote command
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        USERNAME: ${{ secrets.USERNAME }}
        PORT: ${{ secrets.PORT }}
        KEY: ${{ secrets.SSHKEY }}
        script: ls

Notice that my remote command is just " ls ".if you are trying to auto deploy a React App or a Vue App, you could set your script command to Build command.

The Moment of Truth!

Commit the deploy.yml changes, and push to your repository.

It should build and push to the VPS without any errors.

$  git add .

$  git commit -m "deploy"

$  git push origin master

If you head over to your GitHub repository and click on actions menu you shall see this

Alt Text

Yay ! That's it, your repository is officially configured, now everytime you make changes and push to GitHub that action will run and auto deploy your website.
Alt Text

Thank you for reading!

Your comments are welcome

Discussion (25)

Collapse
jfosela81 profile image
Jorge

Thanks for the article this is what I was looking for! Just for update it, now Github gives you the chance to create Environment secrets. Well, you should create Repository Secrets to follow properly this tutorial. I made that mistake and at the beginning I couldn't make it work because I created ENV secrets instead of Repo ones.

Thanks!

Collapse
lebed2045 profile image
Alex Lebed 🐧

doesn't work for some reason,

tar all files into /tmp/196564759/vw1MAdYY5a.tar
scp file to server.
2021/01/04 13:45:34 error copy file to dest: ***, error message: ssh: handshake failed: ssh: unable to authenticate, attempted methods [none publickey], no supported methods remain
Enter fullscreen mode Exit fullscreen mode
  • any ideas what's wrong?
Collapse
knowbee profile image
Bruce Author

Repeat step 4 and 5

Collapse
rein96 profile image
Reinhart Andreas

Thanks for the tutorial

I got error in Copy repository contents via scp step:

the log:

tar all files into /tmp/565278366/9sTHaiaED0.tar
scp file to server.
2020/09/23 18:26:16 error copy file to dest: **, error message: dial tcp: lookup ** on 168.63.129.16:53: no such host
drone-scp error: error copy file to dest: **, error message: dial tcp: lookup ** on 168.63.129.16:53: no such host

Any ideas? Thanks before :)

Collapse
azrinsani profile image
Azrin Sani • Edited on

Hi, I just created an account to answer this question. I was going through this problem as well. For me it turned out that I have not enabled SSH keys on my VPS

in a nutshell, make sure you have "AuthorizedKeysFile %h/.ssh/authorized_keys" in your '/etc/ssh/sshd_config' file entrt

HOW IT FULLY WORKS:

  • Every device/service(such as github), will generate a private and public key pair using SSH. In this example we are using the actual vps to generate the private-public key pair and manually copy the private key into Github.
  • The private key stays on the device/service, but the public key is copied into ~/.ssh/authorized_keys on your VPS
  • So when Github logs into you vps, it uses the private key to sign the handshake message. The VPS uses the public key to verify the signature and since it is 'Authorized' will allow login.
  • under /etc/ssh/sshd_config must uncomment 'AuthorizedKeysFile %h/.ssh/authorized_keys'
  • Finally don't forget to restart SSH => $ sudo service ssh restart
Collapse
rein96 profile image
Reinhart Andreas

Thanks for the help Bruce and Azrin!

Collapse
knowbee profile image
Bruce Author

Try using 168.63.129.16 as the host without port 53

Collapse
khanmaytok profile image
KhalO

Thank you, useful action

Collapse
chrissiemhrk profile image
Chrissie

Nice Article

Collapse
nimit2801 profile image
Nimit Savant

Everything's working but I can't setup script in this thing
I want something like this
cd word-dir && npm i
but gives npm ain't recognized

Collapse
nimit2801 profile image
Nimit Savant

So basically it's not detecting npm because nvm doesn't install node in /usr/local/bin/
ref: stackoverflow.com/questions/628630...

Sol: add this two lines in your script

export NVM_DIR=~/.nvm
source ~/.nvm/nvm.sh
Enter fullscreen mode Exit fullscreen mode
Collapse
grezor profile image
Geoffrey • Edited on

Hello, I have a problem with the keyssh on my vps.

I have my key, but I can't do this on my vps?
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
Do you have a solution?

I saw that it had something to be enabled in the ssh config? Thanks

Collapse
kenean50 profile image
Kenean • Edited on

You can print the value of your public key on you your terminal and append it to the "authorized_keys" file by just copying it.

To do this run this command "cat ~/.ssh/id_rsa.pub" on your terminal and if you saved your ssh keys on the default location you should be able to see your public key printed out.

Then just copy your public key on the terminal and open your "authorized_keys" file with the following command "nano ~/.ssh/authorized_keys" this will create the file if doesn't already exist. now past the value, you copied and save the file. if there is already a value there just add yours at the end of the file

Also make sure your ssh-agent is runing and you have add your key. (follow instructuion above )

Collapse
mozayntwali profile image
Ntwari Moise

Great and very insightful👍

Collapse
marviorocha profile image
Marvio Rocha

Thanks for the Tutorial :)

Collapse
ollyimanishimwe profile image
Olly

Informative

Collapse
knowbee profile image
Bruce Author

Thank you

Collapse
manishfoodtechs profile image
manish srivastava

+100

Collapse
shivang12031774 profile image
Shivang Mittal

Thank you

Collapse
ohbob profile image
Roberts Ozoliņš

You just made my day! Works like a charm and thank you very much for that kind sir!

Collapse
ohbob profile image
Roberts Ozoliņš

oh yeah i got one comment thought, i had to replace target: "/var/www/randomsite" to current user target: "~/www/randomsite" to get it working. And that's that.

Collapse
lucad987 profile image
lucad987

remember to set permission to the destination folder in your VPS (i.e., /var/www/mywebsite) doing chwon

Collapse
alexandrediniz profile image
Alexandre Diniz

you saved my day!!

Collapse
berna39 profile image
KALEMA SHANGO Joseph

Thanks a lot for this tutorial.