Einführung in die serverseitige Konfiguration der Laravel+vue-Front-End- und Back-End-Trennung

                                                                                                                Vorwort

Die Trennung von Vorder- und Rückseite des Endes war schon immer ein Thema, an dem Laravel nicht vorbeikommen kann. In der frühen Phase können wir schnell ein Back-End-Managementsystem erstellen, das nicht zu viel Front-End-Code erfordert, indem wir das hervorragende Framework von Laravel (z. B. Laravel-Admin, Dcat-Admin) verwenden. Aber in der späteren Phase, wenn der Umfang des Projekts zunimmt, benötigen wir auch Dienste wie Middle Office (das einfach als benutzerorientiertes Management-Backend verstanden werden kann), Front-End-Website und andere Dienste Der oben genannte Rahmen mag unzureichend erscheinen. Und in der tatsächlichen Entwicklung werden wir auf solche Probleme stoßen:

Das Unternehmen verfügt über Front-End- und Back-End-Ingenieure. Die Front-End-Ingenieure verwenden Vue für die Entwicklung, und als PHP-Mitarbeiter verwenden wir Laravel für die Entwicklung. Dann entsteht das Problem. Wir können nicht zulassen, dass Front-End-Ingenieure auch Laravel-Mix verwenden und unter dem Laravel-Framework entwickeln.

• 
  Das ursprüngliche Modell weist einen hohen Kopplungsgrad auf, was die Wartung und Erweiterung erschwert. Daher ist die Reduzierung der Kopplung zwischen Modulen für die spätere Wartung und Erweiterung sehr hilfreich.

• 
  

Das Konzept ist klar

Dann werden wir zu diesem Zeitpunkt alle an die Trennung von Vorder- und Hinterteil denken.

Was ist also die Front-End- und Back-End-Trennung? Wir werden heute nicht auf die spezifische Definition eingehen. Wenn Sie interessiert sind, können Sie sich diese Artikel ansehen: Was genau ist Front-End- und Back-End-Trennung? , Überlegungen zur Praxis der Front-End- und Back-End-Trennung

Nachdem wir die grundlegenden Konzepte und Ideen verstanden haben, sollten wir anfangen, Dinge zu tun. Doch bevor es losgeht, muss man sich überlegen, ob das aktuelle Projekt für eine Front-End- und Backend-Trennung geeignet ist? Welche Art von Projekten eignen sich für die Front-End- und Backend-Trennung? Denn wenn das Projekt nicht geeignet ist, erhöht die Trennung von Front-End und Back-End zweifellos den Arbeitsaufwand, wenn es sich beispielsweise nur um die Entwicklung eines reinen Back-End-Managementsystems plus Schnittstellenzugriff und die Anzahl der Projekte handelt Besuche nicht groß sind, ist ein Modell wie laravel-admin voll funktionsfähig. Hier liegt ein Missverständnis vor, das heißt, der Front-End-Code und der Back-End-Code werden getrennt entwickelt, was bedeutet, dass Front-End und Back-End getrennt sind (dies scheint etwas im Widerspruch zu dem zu stehen, was gesagt wird). über). Die sogenannte Trennung von Front-End und Back-End dient nicht nur der Entkopplung, sondern auch der Erleichterung der späteren Wartung und Erweiterung. Im Wesentlichen handelt es sich um:
Das Front-End-Projekt und das Back-End-Projekt sind zwei Projekte müssen unabhängig bereitgestellt werden. Zwei unterschiedliche Projekte, zwei unterschiedliche Codebasen, unterschiedliche Entwickler. Front-End- und Back-End-Ingenieure müssen sich auf interaktive Schnittstellen einigen, um eine parallele Entwicklung zu erreichen. Nach der Entwicklung ist eine unabhängige Bereitstellung erforderlich. Das Front-End ruft die Back-End-Restful-API über HTTP-Anfragen auf. Das Front-End muss sich nur auf den Stil der Seite und das Parsen und Rendern dynamischer Daten konzentrieren, während sich das Back-End auf spezifische Geschäftslogik konzentriert. (Quelle: Warum sollten Front-End und Back-End getrennt werden?) Welche Vor- und Nachteile hat die Front-End- und Backend-Trennung?
Angenommen, unsere lokale Front-End- und Back-End-Entwicklung ist abgeschlossen, müssen wir sie zum Testen in die Online-Umgebung stellen. Wie gehen wir also zur Bereitstellung und Konfiguration zum Server? Empfohlene Tutorials: „
Laravel-Tutorial“

Starten
Das von uns abgeschlossene Projekt sieht beispielsweise so aus:

Das Frontend verwendet vue und das Backend verwendet laravel+jwt +dingo hat die API-Schnittstelle erstellt und laravel-admin als Back-End-Managementsystem verwendet.

Gemäß der herkömmlichen Methode zur Konfiguration des Backends wird nur das Hintergrundverwaltungssystem konfiguriert. Nachdem wir lnmp mit einem Klick installiert haben, konfigurieren Sie nginx so, dass Root direkt auf das öffentliche Verzeichnis des Projekts verweist Verwenden Sie einfach den Pagoda Panel-Code>, es ist in wenigen Minuten fertig. Für unsere ethischen Programmierer nennt man das „Click to Stop“. Das Backend kann direkt mit dem Domainnamen +/admin genutzt werden. Aber jetzt, da wir Vue haben, müssen wir den Hauptdomänennamen shop.test für die Front-End-Nutzung verwenden. Wir werden sagen: „Lehrer You“, „Lehrer Niu“, „Lehrer Liu, du folgst keiner Kampfethik“, und „Lehrer You“ sagt „Entschuldigung“. , ich werde es verwenden.

Es gibt also zwei Möglichkeiten, den Effekt zu erzielen:

vue，后端使用laravel+jwt+dingo构建了api接口，以及使用了laravel-admin作为后端管理系统。
按照传统配置后端的方法，只配置后台管理系统，我们一键安装lnmp后，nginx配置一下，root直接指向项目的public目录，或者干脆用宝塔面板Versuchen Sie es

1. Stellen Sie es separat bereit und verwenden Sie unterschiedliche Domänennamen.

Der Front-End-Domänenname lautet: vue.shop.test. Die Back-End-Domäne Der Name ist shop.test/. Der Domänenname der Admin-Schnittstelle lautet shop.test/api. Ich muss nur das Stammverzeichnis auf den Zielordner unter Nginx des Front-End-Projekts verweisen, zum Beispiel:

server{
    listen 80;
    server_name vue.shop.test;#域名
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/vue.shop.test/dist;#根目录    ...}

Reverse Proxy zur Schnittstellenadresse:

#意思就是只要含有"api"的请求，都转发到接口地址去请求
location /api    {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://shop.test/api;
    }

Back-End-Projektkonfiguration domänenübergreifend:

location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';}

Speichern Sie das Frontend und greifen Sie darauf zu: vue.shop.test, auf das normal zugegriffen werden kann.

2、分别部署，采用相同域名、不同端口

这个就相对简单很多，不需要第二个域名，效率也高的多。
例如，我的后端项目位于/www/wwwroot/test_adimin，前端项目是/www/wwwroot/test_vue，我们只需要在nginx配置里再配置监听另外一个端口就可以：

server{
    listen 80;
    server_name shop.test;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/test_adimin/public;
    ...}server{
    listen 8080;
    server_name shop.test:8080;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/test_vue/dist;
    location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.htm;
        # try_files $uri $uri/ /index.html;
    }
    #这里要写，不然会报：
    #We’re sorry but XXX doesn’t work properly without JavaScript enabled
    #网上说的把history改为hash就可以，那个不行，不适用于现在的情况。
    location /api    {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://shop.test/api;
    }
    ...}

配置成功保存，访问shop.test:8080 速度杠杠的。

总结

优点

1.前后端开发人员各司其职，各自部署，相互不干涉，提高开发效率。
2.能够实现解耦，使得业务更加清晰，减少业务复杂程度。

缺点

1.增加开发、部署难度；
2.提高了对接和沟通成本；
3.不是所有的项目都适合前后端分离，需要框架设计者、开发者自己去判断

Das obige ist der detaillierte Inhalt vonEinführung in die serverseitige Konfiguration der Laravel+vue-Front-End- und Back-End-Trennung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!