ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

如何在同一端口使用nginx部署多个前端项目

2022-06-22 13:01:17  阅读:173  来源: 互联网

标签:index dist 前端 端口 uri nginx html location


使用nginx在同一端口下部署多个前端项目总结

将打包后的前端项目分别放在同一工作目录下的不同文件夹中,目录结构如下图:

配置 nginx.conf 文件

nginx.conf 里 server 配置如下:

 

    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:/workspace;
            index  index.html index.htm;
        }

        location /project1 {
            alias D:/workspace/project1/dist;
            try_files $uri $uri/ /project1/dist/index.html;
            index  index.html index.htm;
        }

        location /project2 {
            alias D:/workspace/project2/dist;
            try_files $uri $uri/ /project2/dist/index.html;
            index  index.html index.htm;
        }

        location /project3 {
            alias D:/workspace/project3;
            try_files $uri $uri/ /project3/index.html;
            index  index.html index.htm;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }

        location /api {
           proxy_pass   http://127.0.0.1:53301/api;
        }
        
        location /prod-api {
           proxy_pass   http://127.0.0.1:53303/prod-api;
        }

        #error_page  404              /404.html;
    }

重启 nginx 服务 

访问项目

浏览器地址栏输入:localhost:8080/project1、localhost:8080/project2、localhost:8080/project3,即可访问对应的项目。

标签:index,dist,前端,端口,uri,nginx,html,location
来源: https://www.cnblogs.com/xinyuyue/p/16400116.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有