nginx如何配置多个前端项目

发布时间:2023-03-06 16:21:51 作者:iii
来源:亿速云 阅读:170

本篇内容主要讲解“nginx如何配置多个前端项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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 等静态文件的连接地址
修改如下配置文件

nginx如何配置多个前端项目

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

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 可以 ,但是可能报错, 解决就用上面办法

nginx如何配置多个前端项目

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

到此,相信大家对“nginx如何配置多个前端项目”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Centos7下nginx的安装与配置教程详解
  2. nginx反向代理之多端口映射的实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

nginx

上一篇:Vue3中的模板语法怎么使用

下一篇:web怎么改变主题配色

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》