How to configure multiple front-end projects in nginx

Recently, a server needs to be configured with multiple front-end projects. Of course, nginx is required to separate the front-end and back-end projects.

A single project is okay, as follows
Modify the nginx.conf configuration file of nginx

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

pid /usr/local/nginx/logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
 
    server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root   /var/www/;
            #index  index.html index.htm;
        }
        location ~ /static/.*\.(gif|jpg|jpeg|png|bmp|swf)$ {
            root /var/www/project;
        }

        location ~ /static/.*\.(js|css)$ {
            root /var/www/project;
        }

        location = /project {
            root   /var/www/project;
            index  index.html index.htm;
        }
   
    }

}

But if there are multiple projects, you also need to configure the nginx.conf

project Developed based on vue cli, you need to configure the connection address of js, css and other static files when packaging
Modify the following configuration file

Modify it according to the project name or path name. In the corresponding project

assetsPublicPath: '/project/'
-----------------------
assetsPublicPath: '/project1/'

Then configure nginx.conf

user root;
worker_processes  1;

pid /usr/local/nginx/logs/nginx.pid;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root   /var/www;
            #index  index.html index.htm;
        }

        location = /project1 {
            root   /var/www/project1;
            try_files $uri $uri/ /project1/index.html;
            index  index.html index.htm;
        }
        
        location = /project2{
            root /var/www/project2;
            try_files $uri $uri/ /project2/index.html;
            index  index.html index.htm;
        }

    }

}

Note here that user root; needs to be added, otherwise the range will report 500,
Then restart nginx

 先停止
  ./nginx -s quit
 再重启
 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

Of course nginx -s reload is OK, but it may report an error. To solve the problem, use the above method

Successful access
192.168..:8000/project/index.html
192.168..:8000/project1/index.html

The above is the detailed content of How to configure multiple front-end projects in nginx. For more information, please follow other related articles on the PHP Chinese website!