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,看效果:

相关推荐
克喵的水银蛇几秒前
Flutter 通用输入框封装实战:带校验 / 清除 / 密码切换的 InputWidget
前端·javascript·flutter
2501_915909061 分钟前
Fiddler抓包与接口调试实战,HTTPHTTPS配置、代理设置与移动端抓包详解
前端·测试工具·ios·小程序·fiddler·uni-app·webview
我命由我123451 小时前
微信小程序开发 - 为 tap 事件的处理函数传递数据
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
百万蹄蹄向前冲4 小时前
Trae Genimi3跟着官网学实时通信 Socket.io框架
前端·后端·websocket
狂炫冰美式5 小时前
TRAE SOLO 驱动:重构AI模拟面试产品的复盘
前端·后端·面试
小时候的阳光6 小时前
Docker版Percona Xtrabackup全量压缩脚本
运维·docker·容器
1024肥宅7 小时前
JavaScript 拷贝全解析:从浅拷贝到深拷贝的完整指南
前端·javascript·ecmascript 6
欧阳天风7 小时前
js实现鼠标横向滚动
开发语言·前端·javascript
局i8 小时前
Vue 指令详解:v-for、v-if、v-show 与 {{}} 的妙用
前端·javascript·vue.js
码界奇点8 小时前
Java Web学习 第15篇jQuery从入门到精通的万字深度解析
java·前端·学习·jquery