快捷導(dǎo)航

nginx配置多個(gè)前端項(xiàng)目實(shí)現(xiàn)步驟

更新時(shí)間：2023年03月06日 15:44:00 作者：清風(fēng)笑～

本文主要介紹了nginx配置多個(gè)前端項(xiàng)目實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近一臺(tái)服務(wù)器要配置多個(gè)前端項(xiàng)目，當(dāng)然前后端分離就需要nginx來配置了。

單個(gè)項(xiàng)目還好說，如下
修改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;
        }
   
    }

}

但是出現(xiàn)了多個(gè)項(xiàng)目也需要在nginx.conf配置

項(xiàng)目基于vue cli 開發(fā)的，打包時(shí)需要配置一下js，css 等靜態(tài)文件的連接地址
修改如下配置文件

這里寫圖片描述

根據(jù)項(xiàng)目名字或者路徑名修改在對(duì)應(yīng)的項(xiàng)目里

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; 需要加上，不然范圍報(bào) 500，
然后重啟一下nginx

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

當(dāng)然nginx -s reload 可以，但是可能報(bào)錯(cuò)，解決就用上面辦法

這里寫圖片描述

成功訪問
192.168..:8000/project/index.html
192.168..:8000/project1/index.html

到此這篇關(guān)于nginx配置多個(gè)前端項(xiàng)目實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)nginx配置多前端項(xiàng)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: