一个端口配置两个vue和后端服务,nginx以及前后端服务怎么配?

nginx配置重点看server中的内容:

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

events {
    # 此为 Linux 系统特为处理大批量文件描述符而作改进的 poll 事件模型
    use epoll;
    worker_connections  512; # 工作进程的最大连接数量
    # 允许同时接受多个网络连接
    multi_accept on;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    include       gzip.conf;
    server_names_hash_bucket_size 128;
    server_names_hash_max_size 512;
    client_header_timeout 15s;
    client_body_timeout 15s;
    send_timeout 30s;
    client_body_buffer_size 512k;
    client_header_buffer_size 4k;
    client_max_body_size 512k;
    large_client_header_buffers 2 8k;
    proxy_connect_timeout 5s;
    proxy_send_timeout 120s;
    proxy_read_timeout 120s;
    proxy_buffer_size 16k;
    proxy_buffers 4 64k;
    proxy_busy_buffers_size 128k;
    proxy_temp_file_write_size 128k;
    proxy_next_upstream http_502 http_504 http_404 error timeout invalid_header;

    #gzip on;
    #gzip_min_length 1k;
    #gzip_buffers 4 16k;
    #gzip_http_version 1.1;
    #gzip_comp_level 4;
    #gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
    #gzip_vary on;
    #gzip_disable "MSIE [1-6].";

    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        
        # 第一个服务的vue项目位置
        location / {
                alias /usr/data/nginx/firstFront/;
        try_files $uri $uri/ /index.html;
    }

        # 第二个服务的vue项目位置
    location /second {
        alias /usr/data/nginx/secondFront/;
        try_files $uri $uri/ /second /index.html;
    }

        # 第一个服务的后端项目
    location ^~ /back {
        # 配置websocket -------start---------
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        # 配置websocket -------end---------
        client_max_body_size 1000M;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Via "nginx";
        proxy_intercept_errors on; #重要,只有这样才能到nginx定义的404页面
        proxy_pass              http://localhost:8080/back/; # 后端项目地址
    }

        # 第二个服务的后端项目
    location ^~ /back/second{
        # 配置websocket -------start---------
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        # 配置websocket -------end---------
        client_max_body_size 1000M;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Via "nginx";
        proxy_intercept_errors on; #重要,只有这样才能到nginx定义的404页面
        proxy_pass              http://localhost:8081/back/; # 后端项目地址
    }
        #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;
        }
    }
}

vue前端项目配置

vue第一个项目配置:

# 发布路径
VITE_PUBLIC_PATH = /
#后台接口父地址(必填)
VITE_GLOB_API_URL=/back
#后台接口全路径地址(必填)
VITE_GLOB_DOMAIN_URL=/back

vue第二个项目配置

# 发布路径
VITE_PUBLIC_PATH = /second
#后台接口父地址(必填)
VITE_GLOB_API_URL=/back/second
#后台接口全路径地址(必填)
VITE_GLOB_DOMAIN_URL=/back/second

访问地址

第一个项目:http://domain:80/
第二个项目:http://domain:80/second

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容