nginx配置多個前端項目實現(xiàn)步驟
更新時間：2023年03月06日 15:44:00 作者：清風(fēng)笑～
本文主要介紹了nginx配置多個前端項目實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
最近一臺服務(wù)器要配置多個前端項目，當然前后端分離就需要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;
}
}
}
但是出現(xiàn)了多個項目也需要在nginx.conf配置
項目基于vue cli 開發(fā)的，打包時需要配置一下js，css 等靜態(tài)文件的連接地址
修改如下配置文件
根據(jù)項目名字或者路徑名 修改 在對應(yī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; 需要加上， 不然范圍報 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
到此這篇關(guān)于nginx配置多個前端項目實現(xiàn)步驟的文章就介紹到這了,更多相關(guān)nginx配置多前端項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一些運行在Nginx上的網(wǎng)站有時候會出現(xiàn)“502 Bad Gateway”錯誤，有些時候甚至頻繁的出現(xiàn)。以下是小編搜集整理的一些Nginx 502錯誤的排查方法，供參考2013-10-10
prometheus監(jiān)控nginx并實現(xiàn)可視化的操作指南
Nginx是一款高性能的Web服務(wù)器,被廣泛應(yīng)用于各類的網(wǎng)站和應(yīng)用程序中,為了保證Nginx的正常工作,我們需要對其進行監(jiān)控和管理,所以本文給大家介紹了prometheus監(jiān)控nginx并實現(xiàn)可視化的操作指南,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了為Nginx添加mp4流媒體支持的的相關(guān)資料,需要的朋友可以參考下2014-12-12
Nginx中l(wèi)ocation匹配以及rewrite重寫跳轉(zhuǎn)詳解
訪問重寫 rewrite 是 Nginx HTTP 請求處理過程中的一個重要功能,下面這篇文章主要給大家介紹了Nginx中l(wèi)ocation匹配以及rewrite重寫跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Nginx中限制IP并發(fā)數(shù)與下載速度的方法，用到了limit_zone、limit_rate和limit_conn模塊，有需要的朋友參考下2014-01-01
Nginx上傳文件出現(xiàn)“ 413 (499 502 404) Requ
HTTP 413 Request Entity Too Large錯誤常常出現(xiàn)在客戶端發(fā)送的請求體超過服務(wù)器允許的大小限制時,本文主要介紹了Nginx上傳文件出現(xiàn)“ 413 (499 502 404) Request Entity Too Large錯誤解決,感興趣的可以了解一下2024-07-07
通過Nginx搭建Tomcat9集群并實現(xiàn)Session共享
這篇文章主要介紹了通過Nginx搭建Tomcat9集群并實現(xiàn)Session共享,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
使用Nginx為自己的網(wǎng)站資源加上防盜鏈保護實現(xiàn)
這篇文章主要為大家介紹了使用Nginx為自己的網(wǎng)站資源加上防盜鏈保護實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Nginx實戰(zhàn)之反向代理WebSocket的配置實例
最近在工作中遇到一個需求，需要使用 nginx 反向代理websocket，經(jīng)過查找一番資料，目前已經(jīng)測試通過，所以這篇文章主要給大家介紹了Nginx反向代理WebSocket配置的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04
Nginx負載均衡下的webshell連接的實現(xiàn)
在解決shell文件上傳問題、命令執(zhí)行漂移等困難后,可實現(xiàn)正常的webshell上傳,本文主要介紹了Nginx負載均衡下的webshell連接的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01