Wie man Angular unter Ubuntu 22.04 installiert
Angular.js ist ein kostenloses und quelloffenes JavaScript-Framework, mit dem du dynamische Anwendungen erstellen kannst. Es ermöglicht dir, HTML als Vorlagensprache zu verwenden und die Syntax von HTML zu erweitern, um die Komponenten deiner Anwendung klar und prägnant auszudrücken. Es bietet eine Reihe von Tools zum Entwickeln, Aktualisieren und Testen von Code. Es hat viele Funktionen, wie z. B. Formularmanagement, Routing usw.
Diese Anleitung zeigt dir, wie du Angular.js mit Nginx als Reverse Proxy auf Ubuntu 22.04 installierst.
Voraussetzungen
- Ein Server, auf dem Ubuntu 22.04 läuft.
- Ein Root-Passwort ist auf dem Server eingerichtet.
Erste Schritte
Bevor du anfängst, solltest du alle Systempakete auf die neueste Version aktualisieren und aufrüsten. Du kannst alle Pakete aktualisieren, indem du den folgenden Befehl ausführst:
apt update -y apt upgrade -y
Sobald alle Pakete aktualisiert sind, kannst du mit folgendem Befehl weitere erforderliche Abhängigkeiten installieren:
apt install curl gnupg2 gnupg git wget -y
Wenn du damit fertig bist, kannst du mit dem nächsten Schritt fortfahren.
Node.js installieren
Du musst auch die neueste stabile Version von Node.js auf deinem Server installieren. Füge zunächst das Node.js-Repository mit folgendem Befehl hinzu:
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
Du solltest die folgende Ausgabe erhalten:
## Run `sudo apt-get install -y nodejs` to install Node.js 16.x and npm
## You may also need development tools to build native addons:
sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
Als Nächstes installierst du das Node.js-Paket mit dem folgenden Befehl:
apt install nodejs
Sobald Node.js installiert ist, kannst du die Node-Version mit dem folgenden Befehl überprüfen:
node --version
Du erhältst die folgende Ausgabe:
v16.17.0
Angular CLI installieren
Als Nächstes musst du das Angular CLI auf deinem Server installieren. Angular CLI ist ein Kommandozeilentool, mit dem du eine Angular-App über eine Kommandozeilenschnittstelle erstellen und verwalten kannst.
Aktualisiere zunächst das NPM-Paket mit dem folgenden Befehl auf die neueste Version:
npm install npm@latest -g
Als Nächstes installierst du das Angular CLI mit dem folgenden Befehl:
npm install -g @angular/cli
Sobald die Angular CLI installiert ist, kannst du die Angular-Version mit dem folgenden Befehl überprüfen:
ng version
Du solltest die folgende Ausgabe erhalten:
Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 14.2.3
Node: 16.17.0
Package Manager: npm 8.19.2
OS: linux x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1402.3 (cli-only)
@angular-devkit/core 14.2.3 (cli-only)
@angular-devkit/schematics 14.2.3 (cli-only)
@schematics/angular 14.2.3 (cli-only)
Eine Angular-Beispielanwendung erstellen
In diesem Abschnitt werden wir eine Angular-Beispielanwendung erstellen.
Führe den folgenden Befehl aus, um eine neue Anwendung namens myapp zu erstellen:
ng new myapp
Du erhältst die folgende Ausgabe:
? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS CREATE myapp/src/styles.css (80 bytes) CREATE myapp/src/test.ts (749 bytes) CREATE myapp/src/assets/.gitkeep (0 bytes) CREATE myapp/src/environments/environment.prod.ts (51 bytes) CREATE myapp/src/environments/environment.ts (658 bytes) CREATE myapp/src/app/app-routing.module.ts (245 bytes) CREATE myapp/src/app/app.module.ts (393 bytes) CREATE myapp/src/app/app.component.css (0 bytes) CREATE myapp/src/app/app.component.html (23115 bytes) CREATE myapp/src/app/app.component.spec.ts (1070 bytes) CREATE myapp/src/app/app.component.ts (209 bytes) ? Packages installed successfully.
Wechsle als Nächstes in das myapp-Verzeichnis und führe die Anwendung mit folgendem Befehl aus:
cd myapp ng serve --host 0.0.0.0 --port 8000
Wenn alles in Ordnung ist, erhältst du die folgende Ausgabe:
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes
? Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.10 MB |
polyfills.js | polyfills | 318.00 kB |
styles.css, styles.js | styles | 210.08 kB |
main.js | main | 49.83 kB |
runtime.js | runtime | 6.51 kB |
| Initial Total | 2.67 MB
Build at: 2022-09-18T07:17:07.899Z - Hash: d94baf4d66e9fad0 - Time: 26751ms
** Angular Live Development Server is listening on 0.0.0.0:8000, open your browser on http://localhost:8000/ **
? Compiled successfully.
Drücke die Tastenkombination STRG + C, um die Anwendung zu beenden. Wir werden eine Systemd-Dienstdatei für die Angular-Anwendung erstellen.
Eine Systemd-Dienstdatei für Angular erstellen
Du kannst eine systemd-Dienstdatei erstellen, um die Angular-Anwendung zu verwalten.
nano /lib/systemd/system/myapp.service
Füge die folgenden Zeilen hinzu:
[Unit] Description=MyWeb Application After=network-online.target [Service] Restart=on-failure WorkingDirectory=/root/myapp ExecStart=/usr/bin/ng serve --port 8000 CPUAccounting=true CPUQuota=50% MemoryAccounting=true MemoryLimit=1024M [Install] WantedBy=multi-user.target
Speichere und schließe die Datei und lade den systemd-Daemon neu, um die Änderungen zu übernehmen:
systemctl daemon-reload
Starte und aktiviere den Angular-Dienst mit dem folgenden Befehl:
systemctl start myapp systemctl enable myapp
Jetzt kannst du den Status des Angular-Dienstes mit dem folgenden Befehl überprüfen:
systemctl status myapp
Du erhältst die folgende Ausgabe:
? myapp.service - MyWeb Application
Loaded: loaded (/lib/systemd/system/myapp.service; disabled; vendor preset: enabled)
Active: active (running) since Sun 2022-09-18 07:28:42 UTC; 28s ago
Main PID: 56301 (ng serve --port)
Tasks: 11 (limit: 4579)
Memory: 380.1M (limit: 1.0G)
CPU: 14.152s
CGroup: /system.slice/myapp.service
??56301 "ng serve --port 8000" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Sep 18 07:28:42 ubuntu2204 systemd[1]: Started MyWeb Application.
Sep 18 07:28:49 ubuntu2204 ng[56301]: - Generating browser application bundles (phase: setup)...
Du kannst deine Angular-Anwendung jetzt ganz einfach über systemd verwalten. Wenn du fertig bist, kannst du mit dem nächsten Schritt fortfahren.
Nginx als Reverse Proxy für Angular konfigurieren
Zu diesem Zeitpunkt ist die Angular-Anwendung gestartet und lauscht auf Port 8000. Es ist jedoch ratsam, Nginx als Reverse Proxy zu konfigurieren, damit du über Port 80 auf die Angular-Anwendung zugreifen kannst.
Installiere zunächst das Nginx-Webserverpaket mit dem folgenden Befehl:
apt install nginx -y
Sobald Nginx installiert ist, erstellst du eine Nginx-Konfigurationsdatei:
nano /etc/nginx/conf.d/app.conf
Füge die folgenden Zeilen ein:
server {
listen 80;
server_name app.example.com;
location / {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Speichere und schließe die Datei, wenn du fertig bist. Überprüfe dann Nginx mit dem folgenden Befehl auf Syntaxfehler:
nginx -t
Du erhältst die folgende Ausgabe:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
Starte anschließend den Nginx-Dienst neu, um die Änderungen zu übernehmen:
restart nginx
Du kannst den Status von Nginx auch mit dem folgenden Befehl überprüfen:
systemctl status nginx
Du solltest die folgende Ausgabe erhalten:
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sun 2022-09-18 07:24:51 UTC; 6s ago
Docs: man:nginx(8)
Process: 55161 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 55162 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 55163 (nginx)
Tasks: 3 (limit: 4579)
Memory: 3.3M
CPU: 28ms
CGroup: /system.slice/nginx.service
??55163 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
??55164 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
??55165 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Sep 18 07:24:51 ubuntu2204 systemd[1]: Starting A high performance web server and a reverse proxy server...
Sep 18 07:24:51 ubuntu2204 systemd[1]: Started A high performance web server and a reverse proxy server.
Zugriff auf Angular Web UI
Jetzt ist Nginx als Reverse Proxy für die Angular-Anwendung konfiguriert. Du kannst nun über die URL http://app.example.com auf sie zugreifen . Du solltest deine Angular-Anwendung auf dem folgenden Bildschirm sehen:
Fazit
Herzlichen Glückwunsch! Du hast Angular erfolgreich mit Nginx als Reverse Proxy auf Ubuntu 22.04 installiert. Jetzt kannst du mit dem Angular.js-Framework eine dynamische App entwickeln und im Web bereitstellen. Wenn du noch Fragen hast, kannst du dich gerne an mich wenden.