Web Development Presentation
Parent: 8e566358 | Patch | Commit | show whitespace
Sascha Schulz
2025-03-10 8a7804348b82ca8d2f5a74585b19d330f8b6da84 
add chapter NodeJS and PM2 and apache proxy directives
1 Dateien geändert
2 Dateien hinzugefügt
103 ■■■■■ Geänderte Dateien
assets/drawio/proxy-types.drawio 1 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/images/proxy-types.svg 3 ●●●●● Patch | Ansicht | Raw | Blame | Historie
index.html 99 ●●●●● Patch | Ansicht | Raw | Blame | Historie 
 assets/drawio/proxy-types.drawio


Neue Datei


@@ -0,0 +1 @@


<mxfile host="Electron" modified="2025-03-10T13:40:13.014Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="C8_FdgH98HHRUlGV9UAI" version="16.1.2" type="device"><diagram id="4gWOwWDbNA2MmD37ZcZP" name="Page-1">7Vpbb5swGP01eVzFzSR5bJJ2m6ZJ0aJp3aMFbrAKmBkngf76mWFudiJoSgKr8lT8YcA53znfTZ2YyyD5TGHkfScu8ieG5iYTczUxDN3SdP4ns6S5BUzN3LCl2BWbKsMGvyJh1IR1h10UNzYyQnyGo6bRIWGIHNawQUrJobntmfjNr0ZwixTDxoG+av2FXebl1pkxrexfEN56xZd1e57fCWCxWfyS2IMuOdRM5sPEXFJCWH4VJEvkZ+AVuOTPPZ64Wx6MopB1eeDb42a3OqQv9kP8J3Co9hO+ap+M/C176O/EDxaHZWmBwMHDDG0i6GTrA/fyxFx4LPD5SueXMI5y3J9xgvinFuKNiDKUnDyqXgLAmYNIgBhN+RbxANAEZoI0VoHhoXJBiatXg780QuH2bfnuChl+IcB5A1BmO1CU7EI3g2ClcRhaYOsBpWkHkKyrgmQpIC1JEMEwVbDiv5o1AYkZJS9oSXxCuSUkId+5eMa+L5mgj7chXzocJcTtiwxDzAV7L24E2HWzzxz1QNNHPThBB+1esI84wbyUD4Digw2ie8xBMLQ1JXseTunHdQew292ha9f0h65GjvVy8Ngxl2CyVZjAEZSsi6Gkho7xoQT0oVFSxT1ClAbnkq2g9EjoAVI3D4GJmo6uDVkZbkbDrKmCmQISCt37rKKugn8NlCaCHAaaPtUXv7PFHSiWq6R+c5U2MgBylZpcApY3AZBuEWtlgeqBFoQLG0U+ZHjfPMcx2MUX1gTzE1ZlgSUF2JnkuZjsqIPEU/WqXX6RHKnlRJUDobyIewqmtW1RtiE+feCy4ZIOfOpc8n5gNvbzi/wEFSVLH5zP0iKZ98XSBLMncSe7rnGUryqKZov0aszOmdEhV45cApbUn9jamRIAhkQ10E0CvbFOv7Guqj1urLts4AWjDLzGiCRwp80NSQaa1SKEf6s1opgjkbWpvavD7qgOwxxUHWZP6ijrmaFistpVf80GECFiKjF9H0dxRsjYg1FmdHyyc69S6JtyHViUc/V5xLFJplwv9lbpG2qn3YeUtbvZFLxFznwh63EEWa7gVbuOwaA6lpOT3Bh2znInssnVdKxONH4grrgYjaZXVyA60qsfm/BerFc31PnGfRQNjpMtcXLwmaKhzjTGiNPgsx9j9n/gNDif5v1mzjOz3TnFc58ZsmsfaAzaB5ryVPrcDGmdquB67gOBfOBmX9e6XxrYXaYPLKqDmwS6SWA6pASA3KOdKwHbHIUELkTpnqd7H53SsxulrxjVwfuiOl9W/2CWb6/+Tc98+As=</diagram></mxfile>




 assets/images/proxy-types.svg


Neue Datei


@@ -0,0 +1,3 @@


<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="672px" height="241px" viewBox="-0.5 -0.5 672 241"><defs/><g><rect x="440" y="10" width="220" height="220" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="10" y="10" width="240" height="220" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="90" y="10" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 25px; margin-left: 91px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Company</div></div></div></foreignObject><text x="120" y="29" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Company</text></switch></g><rect x="500" y="10" width="100" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 25px; margin-left: 501px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Service Provider</div></div></div></foreignObject><text x="550" y="29" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Service Provider</text></switch></g><rect x="30" y="50" width="50" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 70px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">PC</div></div></div></foreignObject><text x="55" y="74" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">PC</text></switch></g><rect x="30" y="100" width="50" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 120px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">PC</div></div></div></foreignObject><text x="55" y="124" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">PC</text></switch></g><rect x="30" y="150" width="50" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 170px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">PC</div></div></div></foreignObject><text x="55" y="174" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">PC</text></switch></g><rect x="170" y="100" width="50" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 120px; margin-left: 171px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Forward Proxy</div></div></div></foreignObject><text x="195" y="124" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Forward...</text></switch></g><path d="M 80 70 L 150 70 L 150 120 L 170 120" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 80 120 L 170 120" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 80 170 L 150 170 L 150 120 L 170 120" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 220 120 L 291.04 120.32" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 310 100 C 286 100 280 120 299.2 124 C 280 132.8 301.6 152 317.2 144 C 328 160 364 160 376 144 C 400 144 400 128 385 120 C 400 104 376 88 355 96 C 340 84 316 84 310 100 Z" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 120px; margin-left: 281px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Internet</div></div></div></foreignObject><text x="340" y="124" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Internet</text></switch></g><path d="M 385 120 L 450 120" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><rect x="450" y="100" width="60" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 120px; margin-left: 451px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Reverse Proxy</div></div></div></foreignObject><text x="480" y="124" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Reverse Pr...</text></switch></g><rect x="560" y="50" width="50" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 70px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">App</div></div></div></foreignObject><text x="585" y="74" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">App</text></switch></g><rect x="560" y="100" width="50" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 120px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">App</div></div></div></foreignObject><text x="585" y="124" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">App</text></switch></g><rect x="560" y="150" width="50" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 170px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">App</div></div></div></foreignObject><text x="585" y="174" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">App</text></switch></g><path d="M 510 120 L 530 120 L 530 70 L 560 70" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 510 120 L 530 120 L 560 120" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 510 120 L 530 120 L 530 170 L 560 170" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>




 index.html


@@ -4817,6 +4817,9 @@


                                


                                # Aktivierte vhosts, Symlinks auf obige verfügbare


                                /etc/apache2/sites-enabled/*.conf


								


                                # Standard HTML Pfad bei Apache


                                /var/www/html


                            </code>


                        </pre>


                    </section>


@@ -4828,11 +4831,11 @@


                                


                                # 000-default.conf als Vorlage nutzen


                                # vm-ubuntu-server durch eigenen Host ersetzen


                                sudo cp 000-default.conf www.vm-ubuntu-server


                                sudo cp 000-default.conf www.vm-ubuntu-server.conf


                                


                                # 'ServerName' einkommentieren und mit eigenem Host anpassen


                                # Weitere Optionen je nach Fall anpassen, z.B. 'DocumentRoot'


                                sudo vim www.vm-ubuntu-server


                                sudo vim www.vm-ubuntu-server.conf


                                


                                # vhost / Site aktivieren


                                sudo a2ensite www.vm-ubuntu-server.conf


@@ -4864,7 +4867,7 @@


                        <pre>


                            <code class="bash" data-trim data-line-numbers>


                                # scp [Quelle] [Ziel], z.B.


                                scp index.html user@domain:~/html


                                scp index.html user@domain:~/


                            </code>


                        </pre>


                    </section>


@@ -4872,6 +4875,96 @@


                        <h3>Aufgabe</h3>


                        <p>Richte die Sub-Domain <code>www.vm-ubuntu-server</code> ein und liefere unter dieser Adresse eine beliebige HTML-Seite aus. Dies kann eine minimale selbstgeschriebene oder eine beliebige komplexere aus den vergangenen Veranstaltungen sein, z.B. aus den CSS-Themen (jedoch keine NodeJS-Projekte).</p>


                    </section>


                    <section>


                        <h3>NodeJS und PM2 einrichten</h3>


                    </section>


                    <section>


                        <p>Installation mittels fnm (<code>fast node manager</code>)</p>


                        <pre>


                            <code class="bash" data-trim data-line-numbers>


                                # Abhängigkeit 'unzip' installieren


                                sudo apt install unzip


								


                                # https://github.com/Schniz/fnm


                                curl -fsSL https://fnm.vercel.app/install | bash


								


                                # Anschließend die .bashrc neuladen


                                . ~/.bashrc


								


                                # Aktuelle NodeJS LTS installieren


                                fnm install --lts


								


                                # Test


                                node -v


                            </code>


                        </pre>


                    </section>


                    <section>


                        <pre>


                            <code class="bash" data-trim data-line-numbers>


                                # PM2


                                npm install -g pm2


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Aufgabe</h3>


                        <p>Richte auf dem Server ein kleines NodeJS-Projekt ein, welches eine beliebige Website zur Verfügung stellt (selber implementieren oder ein bestehendes kopieren). Kopiere das Projekt mit den bekannten Befehlen auf den Server an einen beliebigen Ort. Teste anschließend die Lauffähigkeit im Browser per IP und Port der Anwendung.</p>


                    </section>


                    <section>


                        <h3>Einrichten eines Reverse-Proxy</h3>


                    </section>


                    <section>


                        <img data-src="/assets/images/proxy-types.svg">


                    </section>


                    <section>


                        <p>Aktivieren des benötigten Moduls</p>


                        <pre>


                            <code class="bash" data-trim data-line-numbers>


                                # Apache 2 enable module


                                sudo a2enmod proxy


                            </code>


                        </pre>


                        <p>Neue Direktiven</p>


                        <ul>


                            <li>ProxyPass</li>


                            <li>ProxyPassReverse</li>


                            <li>ProxyRequests</li>


                        </ul>


                    </section>


                    <section>


                        <p>Notwendige Anpassungen am vhost</p>


                        <pre>


                            <code class="bash" data-trim data-line-numbers>


                                # DocumentRoot entfernen / auskommentieren


                                #DocumentRoot /var/www/html


								


                                # Aus Sicherheitsgründen Forward Proxy deaktivieren


                                ProxyRequests Off


								


                                # ProxyPass [Quelle] [Ziel] (auf Port achten) => Weiterleitung


                                ProxyPass / http://127.0.0.1:9000


								


                                # ProxyPassReverse [Quelle] [Ziel] (auf Port achten) => URL-Rewrite bei Redirects


                                ProxyPassReverse / http://127.0.0.1:9000


                            </code>


                        </pre>


                        <p>Apache neu starten, um die Änderungen am vhost zu übernehmen</p>


                        <pre>


                            <code class="bash" data-trim data-line-numbers>


                                sudo systemctl reload apache2


                            </code>


                        </pre>


                    </section>


                    <section>


                        <p>In das Verzeichnis der NodeJS-Anwendung wechseln und per PM2 starten</p>


                        <pre>


                            <code class="bash" data-trim data-line-numbers>


                                pm2 start --name my-super-app index.js


                            </code>


                        </pre>


                        <p>Anschließend sollte die NodeJS-Anwendung unter der bereits bekannten Domain erreichbar sein.</p>


                    </section>


                </section>


            </div>


        </div>