Automatically Deploying a Web App with GitHub Actions

Introduction

This tutorial will guide you through the process of automatically deploying a web app over FTP using GitHub Actions. By following these steps, you'll be able to set up a continuous deployment workflow that automatically pushes your web app files to an FTP server whenever changes are made to your GitHub repository.

Requirements

• GitHub account
• GitHub repository with a web app you want to deploy
• Server which you can access over FTP

I used Webhosting 2000, but every other Webhosting offer should do the trick.

Step 1 - Get your FTP credentials and add them to GitHub

When you order a Webhosting package from netcup, you also get access to the Webhosting Control Panel.

1. In your Webhosting Control Panel, go to "Websites & Domains".
2. From the list, choose the domain you want to host your site on.
3. Under "Files & Databases", select "FTP Access".
4. Click on the "Add an FTP Account" button.
5. Now choose an account name, directory and password for your account. Remember or write down your credentials for later.
6. Select "OK".

Now we need to add your created FTP credentials to the GitHub repository.

1. Log into your GitHub account, select your repository and go to the "Settings" tab.
2. Select "Secrets and variables" from the left sidebar and click on "Actions".
3. Click on the "New repository secret" button.
4. Give the secret a name (e.g. FTP_USERNAME) and enter the FTP username you chose in the Webhosting Control Panel as "Secret".
5. Repeat steps 3 and 4 to add another secret for the FTP password (e.g. FTP_PASSWORD).

Step 2 - Create a deployment workflow

1. In your GitHub repository, navigate to the "Actions" tab.
2. Click on the "Set up a workflow yourself" link.
3. Enter the following code into the text field:

name: FTP Deployment

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Deploy over FTP
        uses: SamKirkland/FTP-Deploy-Action@3.2.0
        with:
          server: -server-
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: /path/to/destination/folder
          local-dir: ./path/to/local/folder

4. Replace "-server-" with your server address (e.g. hostingxxxxxx.aexxx.netcup.net, hostingxxxxxx.myserver.de).
5. Replace "/path/to/destination/folder" with the path to the folder on your server where you want to deploy the web app.
6. Replace "./path/to/local/folder" with the local path of the folder containing your web app files in the GitHub repository.
7. Click on "Commit changes...", choose a commit message and click on "Commit changes".

Step 3 - Test the created GitHub Action

1. Push changes to the main branch of your repository to test the newly created workflow.
2. Go to the "Actions" tab in your repository. The workflow should have started automatically.
3. Once the workflow is completed, go back to your Webhosting Control Panel and click on "Files" in the sidebar.
4. Go to the path you specified in the workflow.
5. You should now see the changes you made to the repository in the right folder.

Conclusion

You now have successfully set up an automatic deployment workflow using GitHub Actions. Now, whenever you make changes to your web apps repository and push them to the main branch, the deployment workflow will run automatically, pushing the updated files to your server over FTP. Deploying your web app will be much less time consuming, because you no longer need to log in and move over the files manually.

Licence

MIT

Copyright (c) 2021 netcup

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicence, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contributor's Certificate of Origin

By making a contribution to this project, I certify that:

1. The contribution was created in whole or in part by me and I have the right to submit it under the licence indicated in the file; or

2. The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate licence and I have the right under that licence to submit that work with modifications, whether created in whole or in part by me, under the same licence (unless I am permitted to submit under a different licence), as indicated in the file; or

3. The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it.

4. I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the licence(s) involved.