nginx——不同前端项目共用一个端口

专注写bug

已于 2022-08-24 17:26:00 修改

阅读量3.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： centos 文章标签：前端 nginx

于 2022-08-24 17:19:49 首次发布

本文链接：https://blog.csdn.net/qq_38322527/article/details/126508519

centos 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何通过修改Nginx配置文件，实现一个端口下托管多个前端项目的跳转。通过使用location指令和alias或root进行路径设定，分别服务于不同的前端应用。例如，8088端口下，访问根路径将跳转到gs-screen项目，而访问/st-screen路径则跳转到st-screen项目。配置时需注意root与alias的区别，确保正确解析URL以达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前的配置项

之前再nginx中，针对前端页面的跳转等，通常会采取类似如下的方式实现：

server {
        listen       8040;
        server_name  localhost;
        root   /usr/local/nginx/html/st-screen;
}

监听8040端口，对其设定root 前端页面路径。达到请求访问8040端口则跳转对应的前端页面。

但是如果需要保证一个端口，设定多个不同的前端页面的跳转，则这种方式达不到效果。

配置文件改进

此时可以修改对应的配置文件，针对指定的端口，不再设定默认的前端地址。

采取location配置url的形式，达到不同的url设定，访问不同的前端页面。

大致设置如下所示，以8088端口支持两个前端项目为例：

server {
        listen       8088;
        server_name  localhost;
        # 移除默认的前端 root 地址设定
        #root   /usr/local/nginx/html/gs-screen;

        #charset koi8-r;
        # service  routing config        

	location /st-screen {
	     # 注意这里只能使用 alias
            alias /usr/local/nginx/html/st-screen;
	   # root /usr/local/nginx/html/st-screen;
            index  index.html index.htm;
        }
        
    	# images type configs

    	location /img{
    	   add_header content-type "image/png";
    	}

        #access_log  logs/host.access.log  main;

        location / {
            # 这里使用的是 root
            root   /usr/local/nginx/html/gs-screen;   
            index  index.html index.htm;
        }
        #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;
        }

    }

达到效果

http://xxx.xxx.xxx.xx:XX 访问的是 gs-screen前端项目。
http://xxx.xxx.xxx.xx:XX/st-screen 访问的是st-screen前端项目。