当前位置: 首页 > article >正文

Nginx中部署多个前端项目

1,准备前端项目

tlias系统的前端资源

外卖项目的前端资源

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

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

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


http://www.kler.cn/a/520609.html

相关文章:

  • 【愚公系列】《循序渐进Vue.js 3.x前端开发实践》027-组件的高级配置和嵌套
  • FLTK - FLTK1.4.1 - demo - adjuster.exe
  • 99.17 金融难点通俗解释:归母净利润
  • 嵌入式实时操作系统
  • 二十三种设计模式-享元模式
  • 豆包 MarsCode + 开源 = ?AI 助力开源社区新人成长
  • Springboot集成Swagger和Springdoc详解
  • 【PyTorch】4.张量拼接操作
  • linux 内核学习方向以及职位
  • 论文笔记(六十三)Understanding Diffusion Models: A Unified Perspective(四)
  • shiro学习五:使用springboot整合shiro。在前面学习四的基础上,增加shiro的缓存机制,源码讲解:认证缓存、授权缓存。
  • Go语言入门指南(二): 数据类型
  • JAVA:利用 Content Negotiation 实现多样式响应格式的技术指南
  • 深入解析ncnn::Net类——高效部署神经网络的核心组件
  • 文献阅读 250125-Accurate predictions on small data with a tabular foundation model
  • SQL Server 使用SELECT INTO实现表备份
  • JWT 实战:在 Spring Boot 中的使用
  • 网络模型简介:OSI七层模型与TCP/IP模型
  • Learning Vue 读书笔记 Chapter 2
  • 【React+ts】 react项目中引入bootstrap、ts中的接口
  • JavaScript使用toFixed保留一位小数的踩坑记录:TypeError: xxx.toFixed is not a function
  • vue3中customRef的用法以及使用场景
  • LeetCode题练习与总结:两个字符串的删除操作--583
  • 9.4 GPT Action 开发实践:从设计到实现的实战指南
  • PoolingHttpClient试验
  • 独立游戏开发赚钱吗?