使用nginx實現(xiàn)一個端口和ip訪問多個vue前端的全過程
前言：由于安全組要求，前端頁面只開放一個端口，但是項目有多個前端，此前一直使用的是一個前端使用單獨一個端口進行訪問，現(xiàn)在需要調(diào)整。
需要實現(xiàn)：這里以80端口為例，兩個前端分別是：project1，project2。
例如：訪問項目1：192.168.1.10:80/project1
訪問項目2：192.168.1.10:80/project2
需要的配置：1、nginx配置；2、vue前端代碼修改
1、nginx配置
server {
listen 80;
server_name localhost;
charset utf-8;
# 配置默認訪問前端
location / {
root /usr/local/html/project1/dist/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# 項目2前端
location /project2{
alias /usr/local/html/project2/dist/;
index index.html;
try_files $uri $uri/ /project2/index.html;
}
# 項目1前端
location /project1{
alias /usr/local/html/project1/dist/;
index index.html;
try_files $uri $uri/ /project1/index.html;
}
# 項目1-api接口地址代理
location /project1-prod-api/ {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
add_header Access-Control-Allow-Headers *;
return 200;
}
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_pass http://192.168.1.10:8080/;
}
# 項目2-api接口地址代理
location /project2-prod-api/ {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
add_header Access-Control-Allow-Headers *;
return 200;
}
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_pass http://192.168.1.10:8081/;
}
}2、vue前端代碼修改
兩個項目的vue代碼均要修改
修改文件：在項目根目錄：.env.production
# 頁面標題 VUE_APP_TITLE = 某某平臺 # 生產(chǎn)環(huán)境配置 ENV = 'production' # 生產(chǎn)環(huán)境 VUE_APP_BASE_API = '/project1-prod-api'
在項目根目錄：vue.config.js
修改publicPath參數(shù)
3、驗證修改
重新打包構(gòu)建vue前端代碼，修改nginx配置，并重啟nginx，防火墻允許nginx配置的端口。
總結(jié)
到此這篇關(guān)于使用nginx實現(xiàn)一個端口和ip訪問多個vue前端的文章就介紹到這了,更多相關(guān)nginx一個端口和ip訪問多個vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Nginx配置PATHINFO隱藏thinkphp index.php
這篇文章主要介紹了Nginx配置PATHINFO隱藏thinkphp index.php,本文直接給出配置示例,需要的朋友可以參考下2015-07-07
Nginx?Gunicorn?flask項目部署思路分析詳解
這篇文章主要為大家介紹了Nginx?Gunicorn?flask項目部署思路分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了Nginx配置-日志格式配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
nginx配置SSL證書實現(xiàn)https服務(wù)的方法
這篇文章主要介紹了nginx配置SSL證書實現(xiàn)https服務(wù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Nginx出現(xiàn)404 Not Found nginx/1.23.4的完美解決方案
在Nginx配置過程中,404 Not Found錯誤是一個常見問題,本文將詳細解析Nginx 404 Not Found的原因及解決方案,確保您能夠輕松解決這一問題,需要的小伙伴跟著小編一起來學習學習吧2024-07-07
Nginx高可用配置實戰(zhàn)教程之負載均衡?+?健康檢查?+?動態(tài)擴展
本文通過電商商品服務(wù)集群的實戰(zhàn)案例,詳細介紹了從零搭建Nginx高可用架構(gòu)的全過程,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2017-08-08
安裝配置php-fpm來搭建Nginx+PHP的生產(chǎn)環(huán)境
這篇文章主要介紹了安裝配置php-fpm來搭建Nginx+PHP的生產(chǎn)環(huán)境的方法,php-fpm的作用是將FastCGI進程管理整合進PHP包,需要的朋友可以參考下2016-01-01
Nginx+Tomcat的服務(wù)器端環(huán)境配置詳解
這篇文章主要介紹了Nginx+Tomcat的服務(wù)器端環(huán)境配置詳解,包括Nginx與Tomcat的監(jiān)控開啟方法,需要的朋友可以參考下2015-12-12
windows下nginx的安裝使用及解決80端口被占用nginx不能啟動的問題
這篇文章主要給大家介紹了關(guān)于windows下nginx的安裝使用，以及如何解決80端口被占用導(dǎo)致nginx不能啟動的問題，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
Nginx搭建支持WebDAV協(xié)議的私有云存儲網(wǎng)關(guān)的實現(xiàn)步驟
本文主要介紹了Nginx搭建支持WebDAV協(xié)議的私有云存儲網(wǎng)關(guān)的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2026-04-04