javascript - How to deploy a project with separate front-end and back-end between vue.js and node.js to Ubuntu server

Question

The project is a project with separate front-end and back-end. The code of the client's front-end, the front-end and back-end of the management system (the API interfaces of the client and management backend are written at the same time) are in three folders, corresponding to three github warehouses. .
In the development environment: I opened the back-end code server on port 3000, opened two front-end code servers on 8080 and 8081 respectively, and implemented requests for interfaces across domains to port 3000 for development.
How to deploy such a project in the server? I use pm2
My expectation is:
The backend code is placed in the folder of /www/backend/, and nginx is configured so that the interface can be accessed through the url: 'api.xxx.com/... 'access.
How should I deploy my two front-end projects at this time? The front-end project is built through vue-cli, and a dist folder containing index.html and static files can be obtained through npm build. Are two folders /www/frontend/ and /www/manager/ created in the server for storage? How should nginx be configured to access index.html in these two front-end projects and access the back-end interface at the same time? Do I need to write a total of three nginx configuration files?

Answer 1

Two front-end projects can be configured with two servers and listen to different ports. One nginx configuration is enough.

Supplement

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/;
  }
}

The front-end nginx configuration can refer to this.

Recommendations:
1. The back-end server only needs to run to the local 127.0.0.1
2. The front-end nginx configures reverse proxy to access the api interface
3. Another front-end project refers to the above configuration