Nginx部署多站点（多端口号）

最新推荐文章于 2025-11-02 08:15:00 发布

原创最新推荐文章于 2025-11-02 08:15:00 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue

JAVA 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何使用Nginx配置多个前端项目，包括设置监听端口、代理API请求及处理路由重写，确保前端资源正确加载并实现SPA应用的全路径访问。

1、新建前端文件夹；

2、 将前端打包好的文件分别放在项目文件夹中；

3、使用notepad++打开nginx配置文件；

4、添加server部分；

#项目1
    server {
	
        listen       8886;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		location / {
            root   html/nxjcyj-html/;
            index  index.html index.htm;
			try_files $uri $uri/ @router; #截取404的uri，传给@router
        }
		
		location @router {
			rewrite ^.*$ /index.html last; #接到截取的uri，并按一定规则重写uri和vue路由跳转
		}
			
		location /api {
			proxy_pass http://localhost:8000;
		}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

	#项目2
	server {
	
        listen       8885;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		location / {
            root   html/szjcyj-html/;
            index  index.html index.htm;
			try_files $uri $uri/ @router; #截取404的uri，传给@router
        }
		
		location @router {
			rewrite ^.*$ /index.html last; #接到截取的uri，并按一定规则重写uri和vue路由跳转
		}
			
		location /api {
			proxy_pass http://localhost:8000;
		}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }