javascript – So stellen Sie ein Projekt mit separatem Front-End und Back-End zwischen vue.js und node.js auf dem Ubuntu-Server bereit

Question

Das Projekt ist ein Projekt mit getrenntem Front-End und Back-End. Der Code des Front-Ends des Clients, des Front-Ends und des Back-Ends des Managementsystems (die API-Schnittstellen des Clients und des Management-Backends werden gleichzeitig geschrieben). drei Ordner, entsprechend drei Github-Repositorys.
In der Entwicklungsumgebung: Ich habe den Back-End-Codeserver auf Port 3000 geöffnet, zwei Front-End-Codeserver auf 8080 bzw. 8081 geöffnet und Schnittstellenanforderungen über Domänen hinweg an Port 3000 für die Entwicklung implementiert.
Wie stellt man ein solches Projekt auf dem Server bereit? Ich verwende pm2
Meine Erwartung ist:
Legen Sie den Backend-Code in den Ordner /www/backend/ und konfigurieren Sie Nginx so, dass auf die Schnittstelle über die URL „api.xxx.com/...“ zugegriffen werden kann.
Wie soll ich meine beiden Front-End-Projekte zu diesem Zeitpunkt bereitstellen? Das Front-End-Projekt wird über vue-cli erstellt, und ein dist-Ordner mit index.html und statischen Dateien kann über npm build abgerufen werden. Werden auf dem Server zwei Ordner /www/frontend/ und /www/manager/ zur Speicherung erstellt? Wie sollte Nginx konfiguriert werden, um in diesen beiden Front-End-Projekten auf index.html zuzugreifen und gleichzeitig auf die Back-End-Schnittstelle zuzugreifen? Muss ich insgesamt drei Nginx-Konfigurationsdateien schreiben?

Answer 1

两个前端项目可以在多配置两个server，listen不同的端口，一个nginx配置就可以。

补充

Answer 2

server {
  listen   8080;
  root /www/fontend;
  index index.html;

  server_name xxx.com www.xxx.com;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:3000/api/;
  }
}

前端的nginx配置可以参照这样。

建议：
1、后端server只需要run到本地127.0.0.1
2、前端的nginx配置反向代理访问api接口
3、另一个前端项目参照上面的配置