nginx配置多个前端项目实现步骤

 更新时间:2023年03月06日 15:44:00   作者:清风笑~  
本文主要介绍了nginx配置多个前端项目实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近一台服务器要配置多个前端项目,当然前后端分离就需要nginx来配置了。

单个项目还好说,如下
修改nginx的nginx.conf配置文件

#user  nobody;
worker_processes  1;

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

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


events {
    worker_connections  1024;
}


http {
 
    server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root   /var/www/;
            #index  index.html index.htm;
        }
        location ~ /static/.*\.(gif|jpg|jpeg|png|bmp|swf)$ {
            root /var/www/project;
        }

        location ~ /static/.*\.(js|css)$ {
            root /var/www/project;
        }

        location = /project {
            root   /var/www/project;
            index  index.html index.htm;
        }
   
    }

}

但是出现了多个项目也需要在nginx.conf配置

项目基于vue cli 开发的,打包时需要配置一下js,css 等静态文件的连接地址
修改如下配置文件

这里写图片描述

根据项目名字或者路径名 修改 在对应的项目里

assetsPublicPath: '/project/'
-----------------------
assetsPublicPath: '/project1/'

然后再来配置nginx.conf

user root;
worker_processes  1;

pid /usr/local/nginx/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;

    server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root   /var/www;
            #index  index.html index.htm;
        }

        location = /project1 {
            root   /var/www/project1;
            try_files $uri $uri/ /project1/index.html;
            index  index.html index.htm;
        }
        
        location = /project2{
            root /var/www/project2;
            try_files $uri $uri/ /project2/index.html;
            index  index.html index.htm;
        }

    }

}

此处注意呢 user root; 需要加上, 不然范围报 500,
然后重启一下nginx

 先停止
  ./nginx -s quit
 再重启
 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

当然nginx -s reload 可以 ,但是可能报错, 解决就用上面办法

这里写图片描述

成功访问
192.168..:8000/project/index.html
192.168..:8000/project1/index.html

到此这篇关于nginx配置多个前端项目实现步骤的文章就介绍到这了,更多相关nginx配置多前端项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • nginx 502 Bad Gateway 错误解决办法

    nginx 502 Bad Gateway 错误解决办法

    一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现。以下是小编搜集整理的一些Nginx 502错误的排查方法,供参考
    2013-10-10
  • prometheus监控nginx并实现可视化的操作指南

    prometheus监控nginx并实现可视化的操作指南

    Nginx是一款高性能的Web服务器,被广泛应用于各类的网站和应用程序中,为了保证Nginx的正常工作,我们需要对其进行监控和管理,所以本文给大家介绍了prometheus监控nginx并实现可视化的操作指南,需要的朋友可以参考下
    2024-05-05
  • 为Nginx添加mp4流媒体支持

    为Nginx添加mp4流媒体支持

    这篇文章主要介绍了为Nginx添加mp4流媒体支持的的相关资料,需要的朋友可以参考下
    2014-12-12
  • Nginx中location匹配以及rewrite重写跳转详解

    Nginx中location匹配以及rewrite重写跳转详解

    访问重写 rewrite 是 Nginx HTTP 请求处理过程中的一个重要功能,下面这篇文章主要给大家介绍了Nginx中location匹配以及rewrite重写跳转的相关资料,需要的朋友可以参考下
    2022-03-03
  • Nginx限制IP并发数与下载速度的方法

    Nginx限制IP并发数与下载速度的方法

    这篇文章主要介绍了Nginx中限制IP并发数与下载速度的方法,用到了limit_zone、limit_rate和limit_conn模块,有需要的朋友参考下
    2014-01-01
  • Nginx上传文件出现“ 413 (499 502 404) Request Entity Too Large错误解决

    Nginx上传文件出现“ 413 (499 502 404) Requ

    HTTP 413 Request Entity Too Large错误常常出现在客户端发送的请求体超过服务器允许的大小限制时,本文主要介绍了Nginx上传文件出现“ 413 (499 502 404) Request Entity Too Large错误解决,感兴趣的可以了解一下
    2024-07-07
  • 通过Nginx搭建Tomcat9集群并实现Session共享

    通过Nginx搭建Tomcat9集群并实现Session共享

    这篇文章主要介绍了通过Nginx搭建Tomcat9集群并实现Session共享,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 使用Nginx为自己的网站资源加上防盗链保护实现

    使用Nginx为自己的网站资源加上防盗链保护实现

    这篇文章主要为大家介绍了使用Nginx为自己的网站资源加上防盗链保护实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Nginx实战之反向代理WebSocket的配置实例

    Nginx实战之反向代理WebSocket的配置实例

    最近在工作中遇到一个需求,需要使用 nginx 反向代理websocket,经过查找一番资料,目前已经测试通过,所以这篇文章主要给大家介绍了Nginx反向代理WebSocket配置的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • Nginx负载均衡下的webshell连接的实现

    Nginx负载均衡下的webshell连接的实现

    在解决shell文件上传问题、命令执行漂移等困难后,可实现正常的webshell上传,本文主要介绍了Nginx负载均衡下的webshell连接的实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01

最新评论