Automatic Deployment via good ol’ FTP

Since their release, GitHub actions are on my long-term todo list for increasing automation of my workflows. Thanks to DEVs GitHub Actions Hackathon, I’m finally tackling this topic.

I’m not really sure if it’s a thing to be ashamed of today, but I’m still pushing build files of most of my personal open source projects manually via good ol’ FTP to my server. Maybe I just don’t wanted to give up too much control over the files that I push to production. Or after doing web development for more than 15 years now, I was just too lazy to change something 😅

However, I found an awesome GitHub action to publish files automatically via FTP to my server on build.

My Workflow

It’s the FTP-Deploy-Action by Sam Kirkland which utilizes Git-ftp. I’m mostly creating Vue.js applications with the Vue CLI — so my normal workflow always looked like this:

1. ➕ Make code changes (e.g. fixing an important security issue)
2. 🔨 Test code changes
3. ✅ Commit these changes to the repository
4. 🔁 Create new build files optimized for production using vue-cli-service build
5. ❌ Delete old build files from production server
6. ⏫ Upload new build files to production server

Especially the last two points always bothered me, because most of the time I was pushing some smaller changes that only affected a few files and I still deleted and reuploaded the whole application. And this is, where Git-ftp really pays off: It can upload only those files, that changed since the last upload! This is extremely useful, especially for projects with a lot of files. A few of my PHP projects e.g. use Git Submodules and uploading the whole project on each build would take an incredible amount of time. So my new workflow now looks like this:

1. ➕ Make code changes (e.g. fixing an important security issue)
2. 🔨 Test code changes
3. ✅ Commit these changes to the repository
4. 🔁 Create new build files optimized for production using vue-cli-service build
5. Lean back and let the GitHub FTP-Deploy-Action do the rest

Configuration

So, how can you set up this FTP-Deploy-Action? You simply have to create a configuration file called ftp-deploy.yaml under your-repo/.github/workflows/. This is what my configuration looks like:

on:
  push:
    paths:
      - 'dist/*'
name: FTP Deploy
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2.1.0
      with:
        fetch-depth: 2
    - name: FTP-Deploy-Action
      uses: SamKirkland/FTP-Deploy-Action@master
      with:
        ftp-server: ${{ secrets.ftp_server }}
        ftp-username: ${{ secrets.ftp_username }}
        ftp-password: ${{ secrets.ftp_password }}
        local-dir: dist/

I’m going to explain every part in the following for you to understand, how this works 💡

Lines 1–4 on: push: paths:
Only start this action, when changes where pushed to the `dist/` directory (this is the default build folder for Vue CLI)
Line 5 name:
The name of your GitHub action which is shown in the repositories action tab on GitHub.
Lines 6—15 jobs: FTP-Deploy-Action: ...
This is the default configuration for this action, accourding to its documentation.
Line 16 with:
This section allows for further required or optional configuration of the action.
Lines 17—19 ftp-server: | ftp-username: | ftp-password:
Obviously GitHub needs to know your FTP access data like server url, username and password. Even more obviously, you don't want to store these data in this configuration file rather than as encrypted secrets.
Line 20 local-dir:
This makes sure, that not the whole repository, but only (in my case) the dist/ directory gets uploaded, where my build files live.

Bonus: If you want to explicitly exclude some files from being uploaded, you can create a .git-ftp-ignore file in the root of your repository, which works the same way as a .gitignore file.

Additional Resources / Info

SamKirkland/FTP-Deploy-Action

git-ftp/git-ftp

Wrap it up

So we saw that it’s fairly simple to let GitHub deploy you build files automatically via FTP. You just need to create one configuration file and set a few repository secrets.

Let me know, if you also deploy via FTP and this is useful for your own workflows.

Published: 3rd September 2020 on dev.to
Title image: https://codepen.io/devmount/full/qBZPpEM