Nginx中部署多个前端项目

1,准备前端项目

tlias系统的前端资源

外卖项目的前端资源

2,nginx里面的html文件夹中新建,tlias和sky两个文件夹。

切记这是在nginx/html下创建的

bash 复制代码
mkdir sky
mkdir tlias

把tlias和sky的资源都放到对应的文件夹中

3,编辑配置nginx.conf文件

第一个server监听88端口,

第二个server监听 81端口

复制代码
#user  nobody;
worker_processes  1;

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

#pid        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;

    map $http_upgrade $connection_upgrade{
        default upgrade;
        '' close;
    }


    server {
        listen       88;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/sky;
            index  index.html index.htm;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # ▒▒▒▒▒▒▒,▒▒▒▒▒▒▒˷▒▒͵▒▒▒▒▒
        location /api/ {
            proxy_pass   http://localhost:8080/admin/;
        }

        # ▒▒▒▒▒▒▒,▒▒▒▒▒û▒▒˷▒▒͵▒▒▒▒▒
        location /user/ {
            proxy_pass   http://localhost:8080/user/;
        }

        # WebSocket
        location /ws/ {
            proxy_pass   http://localhost:8080/ws/;
            proxy_http_version 1.1;
            proxy_read_timeout 3600s;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "$connection_upgrade";
        }

    }


     server {
        listen       81;
        server_name  localhost;
        client_max_body_size 10m;

        location / {
            root   html/tlias;
            index  index.html index.htm;
        }

        location ^~ /api/ {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass http://localhost:8081;
        }
    }


}

4,重启nginx

注意!!! 我下面列举的 启动,停止,重启。都是在 Nginx的sbin目录下执行的

一般我们改了 conf文件之后就会重启下nginx

复制代码
./nginx -s reload

补充下nginx的常用命令

启动命令
复制代码
./nginx

查看下进程是否起来了

关闭命令
复制代码
./nginx -s stop

再看看是否还有nginx进程在运行

5,看效果:

相关推荐
一只积极向上的小咸鱼2 小时前
Codex 在 VS Code + ModelArts 场景下的登录与配置总结
linux·运维·windows
海石4 小时前
📱随时随地大小编:TraeSolo 移动端初体验
前端·ai编程·trae
爱滑雪的码农6 小时前
详细说说React大型项目结构以及日常开发核心语法
前端·javascript·react.js
Waay6 小时前
Linux Shell 知识点考评(一):grep 文本搜索(附答案)
linux·运维·服务器
七牛开发者7 小时前
HTML is the new Markdown:来自 Claude Code 团队的实践
前端·人工智能·语言模型·html
碧海银沙音频科技研究院7 小时前
基于VMware虚拟机ubuntu开发博通BK7258方法
linux·运维·ubuntu
@大迁世界7 小时前
43.HTML 事件处理和 React 事件处理有什么区别?
前端·javascript·react.js·html·ecmascript
CloneCello7 小时前
AI时代程序员认知调整指南
前端
ZC跨境爬虫8 小时前
跟着 MDN 学 HTML day_38:(DocumentFragment 文档片段接口详解)
前端·javascript·ui·html·音视频
@大迁世界9 小时前
41.ShadCN 是什么?它如何和 Tailwind CSS 集成,从而更容易构建可访问且可自定义的 React 组件?
前端·javascript·css·react.js·前端框架