Geekly articles weekly

Stellen Sie eine isomorphe Webanwendung am Beispiel von Nuxt.js bereit.


In mittleren und großen Projekten ist die Site nicht auf einen Dienst beschränkt - beispielsweise nur auf eine Site. In der Regel gibt es eine Datenbank, eine API und einen Server, der Anforderungen an alle diese Services weiterleitet. Die Einführung und Aktualisierung all dessen ohne Standardisierung ist nicht einfach, und die Skalierung auf viele Server ist noch schwieriger.

Docker, das zum De-facto-Standard in der Welt der Verpackungs-, Liefer- und Veröffentlichungsanwendungen geworden ist, wird uns bei der Lösung dieses Problems helfen.

Mit Docker können wir eine Anwendung oder einen Dienst mit allen Abhängigkeiten und Einstellungen in einen isolierten Container packen, um die Konsistenz des Inhalts auf jeder Plattform zu gewährleisten.

Als isomorphe Anwendung verwenden wir das Nuxt.js-Framework, das aus Vue.js und Node.js besteht und es uns ermöglicht, universelle Webanwendungen mit serverseitigem Rendering (SSR) zu schreiben.

Diese Auswahl ist auf persönliche Vorlieben zurückzuführen. Auf die gleiche Weise können Sie jedoch auch ein anderes Framework verwenden, z. B. Next.js.

Wir sammeln und veröffentlichen das erste Bild.


Zunächst müssen Sie den Port und den Host in der Anwendung konfigurieren. Es gibt verschiedene Möglichkeiten , dies zu tun. Wir werden die Einstellungen in package.json verwenden, indem wir einen neuen Abschnitt hinzufügen:

"config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } }

Für weitere Aktionen benötigen wir Docker, Docker-Compose im System installiert und einen Editor mit einem offenen Projekt.

Erstellen Sie eine Docker-Datei, die wir in das Stammverzeichnis einfügen, und beschreiben Sie die Anweisungen zum Erstellen des Images.

Wir müssen das Image basierend auf dem Image von Node.js Version 10 erstellen. In diesem Fall wird die leichtgewichtige Version von alpine verwendet:

 FROM node:10-alpine

Stellen Sie dann die Umgebungsvariable mit dem Namen des Verzeichnisses ein:

 ENV APP_ROOT /web

Als Arbeitsverzeichnis festlegen und Quelle hinzufügen:

 WORKDIR ${APP_ROOT} ADD . ${APP_ROOT}

Installieren Sie die Abhängigkeiten und erstellen Sie die Anwendung:

 RUN npm ci RUN npm run build

Und wir schreiben den Befehl zum Starten der Anwendung in das Bild:

 CMD ["npm", "run", "start"]

Dockerfile
 FROM node:10-alpine ENV APP_ROOT /web ENV NODE_ENV production WORKDIR ${APP_ROOT} ADD . ${APP_ROOT} RUN npm ci RUN npm run build CMD ["npm", "run", "start"]


Öffnen Sie danach den aktuellen Ordner im Terminal und sammeln Sie das Bild:

 docker build -t registry.gitlab.com/vik_kod/nuxtjs_docker_example .

Führen Sie das Image lokal aus, um sicherzustellen, dass alles ordnungsgemäß funktioniert:

 docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example

Wenn wir zu localhost: 3000 gehen, sollten wir Folgendes sehen:



Großartig! Wir haben die Produktion erfolgreich gestartet und die Anwendung auf der lokalen Maschine erstellt.

Jetzt müssen wir das Image im Docker-Repository veröffentlichen, um das fertig zusammengestellte Image auf dem Zielserver zu verwenden. Sie können entweder ein selbst gehostetes Repository oder ein anderes Repository verwenden, z. B. das offizielle hub.docker.com .

Ich werde das Repository in Gitlab verwenden, die Registerkarte mit den Docker-Repositorys dort heißt Registrierung. Zuvor habe ich bereits ein Repository für das Projekt erstellt. Jetzt führe ich den folgenden Befehl aus:

 docker push registry.gitlab.com/vik_kod/nuxtjs_docker_example

Nachdem das Image erfolgreich gestartet wurde, können Sie mit der Konfiguration des VPS-Servers beginnen.
meins ist wie folgt:

  • 1 GB RAM
  • 4 Kerne
  • 30 GB Laufwerk

Ich habe auch die Gelegenheit genutzt, Docker sofort beim Erstellen des Servers zu installieren. Wenn es also nicht auf Ihrem VPS installiert ist, können Sie die Anweisungen auf der offiziellen Website lesen .

Gehen Sie nach dem Erstellen des Servers zu diesem und melden Sie sich beim Docker-Repository an. In meinem Fall ist es gitlab:

 docker login registry.gitlab.com

Nach der Autorisierung können wir die Anwendung mit dem zuvor angezeigten Befehl starten:

 docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example



Das Bild wurde heruntergeladen und gestartet. Überprüfen wir Folgendes:



Wir sehen ein bekanntes Bild, wir haben den Container mit der Anwendung gestartet, aber bereits auf dem Remote-Server.

Die letzte Berührung blieb bestehen. Wenn das Terminal geschlossen wird, wird das Bild gestoppt, sodass das Attribut -d hinzugefügt wird, um den Container im Hintergrund zu starten.
Anhalten und neu starten:

 docker run -d -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example

Jetzt können wir das Terminal schließen und sicherstellen, dass unsere Anwendung erfolgreich funktioniert.

Wir haben das erreicht, was benötigt wurde - wir haben die Anwendung in Docker gestartet und jetzt ist sie für die Bereitstellung geeignet, sowohl als unabhängiges Image als auch als Teil einer größeren Infrastruktur.

Reverse Proxy hinzufügen


Gegenwärtig können wir einfache Projekte veröffentlichen. Was ist jedoch, wenn wir die Anwendung und die API in derselben Domäne platzieren und darüber hinaus die Statik nicht über Node.js bereitstellen müssen?

Somit entsteht der Bedarf an dem sogenannten Reverse-Proxy-Server, an den alle Anforderungen je nach Anforderung an verwandte Dienste empfangen und umgeleitet werden.

Als solchen Server werden wir nginx verwenden.

Das Verwalten von Containern, wenn mehrere einzeln vorhanden sind, ist nicht sehr praktisch. Daher werden wir Docker-Compose verwenden, um Container zu organisieren und zu verwalten.

Erstellen Sie ein neues leeres Projekt, in dessen Stammverzeichnis die Datei docker-compose.yml und der Ordner nginx hinzugefügt werden.

In docker-compose.yml schreiben wir Folgendes:

 version: "3.3" #      services: #  , nginx nginx: image: nginx:latest #   80  http  443  https ports: - "80:80" - "443:443" #      container_name: proxy_nginx volumes: #   nginx ,      - ./nginx:/etc/nginx/conf.d #            - ./logs:/var/log/nginx/ #   Nuxt.js  nuxt: #     image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app #        ports: - "3000:3000"

Fügen Sie im Ordner nginx die von der offiziellen Website Nuxt.js empfohlene Konfiguration mit geringfügigen Änderungen hinzu.

nginx.conf
 map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { root /var/www; listen 80; #    nginx server_name localhost; #   ip  gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; #   ,       # docker-compose        ,    nuxt_app proxy_pass http://nuxt_app:3000; } }


Wir führen den folgenden Befehl aus:

 docker-compose up



Alles begann korrekt. Wenn wir jetzt zu der Adresse gehen, die nginx, localhost, abhört, wird unsere Anwendung angezeigt. Es gibt keine visuellen Unterschiede. Jetzt werden jedoch alle Anforderungen zuerst an nginx gesendet, wo sie abhängig von den angegebenen Regeln umgeleitet werden.

Jetzt haben wir keine zusätzlichen Dienste oder Statiken. Fügen wir einen statischen Ordner hinzu, in dem wir ein Bild ablegen.

Hängen Sie es in den Nginx-Container ein, indem Sie Docker-Compose eine Zeile hinzufügen:

 ... container_name: proxy_nginx volumes: #     - ./static:/var/www/static ...

Docker-compose.yml aktualisiert
 version: "3.3" #      services: #  , nginx nginx: image: nginx:latest #   80  http  443  https ports: - "80:80" - "443:443" #      container_name: proxy_nginx volumes: #   nginx ,      - ./nginx:/etc/nginx/conf.d #            - ./logs:/var/log/nginx/ #     - ./static:/var/www/static #   Nuxt.js  nuxt: #     image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app #         ports: - "3000:3000"


Fügen Sie dann den neuen Speicherort zu nginx.conf hinzu:

 location /static/ { try_files $uri /var/www/static; }

Aktualisierte nginx.conf
 map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { root /var/www; listen 80; #    nginx server_name localhost; #   ip  gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; #   ,       # docker-compose        ,    nuxt_app proxy_pass http://nuxt_app:3000; } location /static/ { try_files $uri /var/www/static; } }


Starten Sie Docker-Compose neu:

 docker-compose up --build

Gehen Sie zu localhost / static / demo.jpg




Jetzt wird die Statik über Nginx bereitgestellt, wodurch die Last aus Node.js in der Hauptanwendung entfernt wird.

Nachdem Sie sichergestellt haben, dass alles funktioniert, können Sie unsere Assembly auf dem Server veröffentlichen. Dazu erstelle ich ein Repository im aktuellen Verzeichnis. Nachdem Sie zuvor die Protokolle und den statischen Ordner zu .gitignore hinzugefügt haben.

Danach gehen wir zum Server, stoppen das zuvor gestartete Docker-Image und klonen das Repository.



Bevor Sie die Assembly starten, müssen Sie den Ordner mit der Statik auf den Server verschieben, zum Terminal auf dem lokalen Computer gehen und den Befehl mit dem Befehlszeilenprogramm scp auf den Server verschieben:

 scp -r /Users/vik_kod/PhpstormProjects/nuxtjs_docker_proxy_example/static root@5.101.48.172:/root/example_app/

Wenn das statische Volumen groß ist, ist es besser, den Ordner zuerst zu komprimieren, als Archiv zu senden und dann auf dem Server zu entpacken. Andernfalls kann der Download lange dauern.

Wir kehren zum Terminal auf dem Server zurück und gehen zum geklonten Ordner. Führen Sie den folgenden Befehl aus:

 docker-compose up -d

Schließen Sie das Terminal und gehen Sie zur Site:




Großartig! Mit Reverse Proxy haben wir die Statik von der Anwendung getrennt.

Weitere Schritte


Alles, was wir oben getan haben, ist eine ziemlich einfache Option. Bei großen Projekten müssen Sie mehr Dinge berücksichtigen. Nachfolgend finden Sie eine kurze Liste der nächsten Schritte.

  • Nur Datencontainer für statische Administrationsbereiche, SPA-Anwendungen und Datenbanken
  • Zusätzliche Dienste für die Bildverarbeitung und -optimierung, zum Beispiel
  • Integration von CI / CD, Zusammenstellung des Images beim Verschieben in den ausgewählten Zweig sowie automatische Aktualisierung und Neustart von Diensten
  • Erstellen Sie einen Kubernetes- oder Swarm-Cluster, wenn mehr als 1 Server vorhanden sind, um den Lastausgleich und die einfache horizontale Skalierung zu gewährleisten

Insgesamt


  • Wir haben die Anwendung erfolgreich auf dem Server veröffentlicht und für die weitere Skalierung vorbereitet.
  • Wir haben Docker kennengelernt und eine Idee bekommen, wie Sie Ihre Anwendung in einen Container verpacken können.
  • Wir haben gelernt, welche Schritte zur Verbesserung der Infrastruktur unternommen werden können.

Quellcode


App
Konfigurationen

Vielen Dank für Ihre Aufmerksamkeit und ich hoffe, dieses Material hat Ihnen geholfen!

Source: https://habr.com/ru/post/de438862/

More articles:


All Articles