Add Tutorial for Automatic Deployment using GitHub Actions

This commit is contained in:
Philipp Schütz 2023-05-13 14:18:01 +02:00
parent 098f5e45c5
commit b900126327
2 changed files with 214 additions and 0 deletions

View file

@ -0,0 +1,107 @@
---
title: Automatische Bereitstellung einer Webanwendung mit GitHub Actions
description: Lerne den Bereitstellungworkflow einer Webanwendung mit GitHub Actions zu automatisieren.
level: [beginner, intermediate, advanced]
updated_at: 2023-05-13
slug: automating-deployment-with-github-actions
author_name: Philipp Schütz
author_url: https://github.com/philipp-schuetz
author_image: https://avatars.githubusercontent.com/u/82471105?v=4
author_bio:
tags: [deployment, ftp, github]
netcup_product_url: https://www.netcup.de/bestellen/produkt.php?produkt=2217
language: de
available_languages: [de, en]
---
# Einführung
Dieses Tutorial führt dich durch den Prozess der automatischen Bereitstellung einer Webanwendung über FTP mithilfe von GitHub Actions. Durch das Befolgen dieser Schritte können Sie einen kontinuierlichen Bereitstellungsworkflow einrichten, der Ihre Webanwendungsdateien automatisch auf einen FTP-Server überträgt, sobald Änderungen in Ihrem GitHub-Repository vorgenommen werden.
# Anforderungen
* GitHub Account
* GitHub Repository mit einer Webapp zum Bereitstellen
* Server auf den per ftp zugegriffen werden kann
Ich habe Webhosting 2000 benutzt, aber jedes andere Webhosting Angebot sollte auch funktionieren.
# Schritt 1 - Erstelle deine FTP Zugangsdaten und füge diese auf GitHub hinzu
Wenn du ein Webhosting xxxx Paket von Netcup bestellst, bekommst du zusätzlich das Plesk Webhosting Control Panel.
1. In your Webhosting panel go to "Websites & Domains".
2. Aus der List suche die Domain, unter der deine Seite gehostet werden soll.
3. Unter "Dateien & Datenbanken", wähle "FTP-Zugang".
4. Klicke auf den Button "FTP-Konto hinzufügen".
5. Wähle einen Namen, Basisverzeichnis und Password für dein FTP-Konto, merke oder schreibe dir deine Zugangsdaten für später auf.
6. Select "OK".
Jetzt fügen wir die erstellten Zugangsdaten dem GitHub Repository hinzu.
1. Melde dich in deinem GitHub Konto an, wähle das richtige Repository aus und gehe zum Tab "Settings".
2. Wähle "Secrets and variables" aus der linken Seitenleiste und klicke auf "Actions".
3. Klicke auf den "New repository secret" Button.
4. Gib dem "secret" einen Namen (z.B.: FTP_USERNAME) und gib den FTP Benutzernamen, den du in Plesk gewählt hast, als "Secret" ein.
5. Wiederhole Schrite 3 und 4, um ein weiteres "secret" für das FTP Password (z.B.: FTP_PASSWORD) hinzuzufügen.
# Schritt 2 - Den Bereitstellungsworkflow erstellen
1. In deinem GitHub Repository, gehe zum "Actions" Tab.
2. Klicke auf den Link "Set up a workflow yourself"
3. Gib den folgenden code Schnipsel in das Textfeld ein:
```yaml
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
```
7. Ersetze "-server-" mit deiner Serveradresse (e.g.: hostingxxxxxx.aexxx.netcup.net, meinserver.de)
5. Ersetze /path/to/destination/folder mit dem Pfad zum Ordner auf deinem Server, in dem du deine Seite bereitstellen möchtest.
6. Ersetze ./path/to/local/folder mit dem lokalen Pfad des Ordners im Repository, der die Dateien der Webapp enthält.
8. Klicke auf "Commit changes...", wähle eine "commit message" und klicke auf "Commit changes".
# Schritt 3 - Die erstellte GitHub Action Testen
1. "Push" Änderungen auf den "main" Branch deines Repository, um den erstellten Workflow zu testen.
2. Gehe zum Tab "Actions" des Repositorys. Der Workflow sollte automatisch gestartet haben.
3. Wenn der Workflow abgeschlossen ist, gehe zurück zur Plesk Oberfläche und klicke auf "Dateien" in der Seitenleiste.
4. Gehe zum Pfad, den du im Workflow angegeben hast.
5. Du solltest nun die Änderungen, die du an dem Repository gemacht hast, im richtigen Ordner sehen.
# Fazit
Mit Hilfe dieses Tutorials hast du erfolgreich einen automatischen Bereitstellungsworkflow unter Verwendung von GitHub Actions erstellt. Von nun an werden alle Änderungen am "main" Branch des Repository automatisch auf die Dateien, die auf deinem Server liegen, über eine ftp Verbindung angewendet. Die Bereitstellung deiner Webapp ist ab jetzt sehr viel Zeitsparender, da du dich nicht mehr jedes mal manuell Anmelden und deine Dateien hochladen musst.
# Licence
[MIT](https://github.com/netcup-community/community-tutorials/blob/main/LICENSE)
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.

View file

@ -0,0 +1,107 @@
---
title: Automatically deploying a Webapp with GitHub Actions
description: Learn how to automate your deployment workflow with the use of GitHub Actions.
level: [beginner, intermediate, advanced]
updated_at: 2023-05-13
slug: automating-deployment-with-github-actions
author_name: Philipp Schütz
author_url: https://github.com/philipp-schuetz
author_image: https://avatars.githubusercontent.com/u/82471105?v=4
author_bio:
tags: [deployment, ftp, github]
netcup_product_url: https://www.netcup.eu/bestellen/produkt.php?produkt=2224
language: en
available_languages: [de, en]
---
# 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 webapp 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 on GitHub
When you order a Webhosting xxxx package from Netcup you also get the Plesk Webhosting Control Panel.
1. In your Webhosting 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 button "Add an FTP Account".
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. Enter a name for the secret (e.g.: FTP_USERNAME) and enter the FTP username you chose in Plesk earlier as the value.
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:
```yaml
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
```
7. Replace "-server-" with your server adress (e.g.: hostingxxxxxx.aexxx.netcup.net, myserver.com)
5. Replace /path/to/destination/folder with the path to the folder on your server you chose 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.
8. 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 Plesk 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 app's repository and push them to the main branch, the deployment workflow will run automatically, pushing the updated files to your server over ftp. Now deploying your webapp will be much less time consuming, because you won't need to log in and move over the files manually any longer.
# Licence
[MIT](https://github.com/netcup-community/community-tutorials/blob/main/LICENSE)
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.