• 需求場景：

有兩個大項目交互必須在一級域名下，每個項目有多個前端，之前采用二級或三級域名的方式導致域名過多不好維護，故由project1.service1.city.com、project1.service2.city.com、project1.service3.city.com的方式，轉換為project1.city.com/service1/、project1.city.com/service2/、project1.city.com/service3/
后續(xù)域名僅需按項目維護

單個前端服務均為docker方式，使用nginx將靜態(tài)資源轉發(fā)，docker -p將端口映射出來

• 實現(xiàn)方式
  采用nginx反向代理，注意項目內路徑的設置問題，本次遇見的問題均有路由錯誤導致，供參考

# 項目nginx配置文件如下server {listen 80;listen 443 ssl http2;server_name eztest.city.com;index index.php index.html index.htm default.php default.htm default.html;root /www/wwwroot/eztest.city.com;#SSL-START SSL相關配置，請勿刪除或修改下一行帶注釋的404規(guī)則#error_page 404/404.html;add_header Strict-Transport-Security "max-age=31536000";error_page 497 https://$host$request_uri;#PHP-INFO-START PHP引用配置，可以注釋或修改include enable-php-00.conf;#PHP-INFO-END#REWRITE-START URL重寫規(guī)則引用,修改后將導致面板設置的偽靜態(tài)規(guī)則失效include /www/server/panel/vhost/rewrite/eztest.city.com;#REWRITE-END#禁止訪問的文件或目錄location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md){return 404;}#一鍵申請SSL證書驗證目錄相關設置location ~ \.well-known{allow all;}# ez-adminlocation /admin/ {proxy_pass http://192.168.10.217:7813/;}location /toolbox/ {proxy_pass http://192.168.10.217:7802/;}# entrancelocation / {proxy_pass http://192.168.10.217:7809/;}location /manager/ {proxy_pass http://192.168.10.217:7808/;}location /report/ {proxy_pass http://192.168.10.217:7815/;}location /scene/ {proxy_pass http://192.168.10.217:7806/;}access_log /www/wwwlogs/eztest.city.com.log access_json;error_log /www/wwwlogs/eztest.city.com.error.log; }

備注：

vue項目注意vue.config.js中publicPath:’./’,的值，若有跟路徑/，可能在多次轉發(fā)后找不到，建議配置為當前路徑

第二種前端項目有兩層，若出現(xiàn)200狀態(tài)，頁面空白的現(xiàn)象，需找前端人員協(xié)同查看,本次修改router.js文件，強制轉換路由

服務nginx配置文件參考如下：

server {listen 8080 default_server;listen [::]:8080 default_server;server_name nginx_vue_front;gzip on;gzip_min_length 1k;gzip_comp_level 9;gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css application/font-sfnt;gzip_disable "MSIE [1-6]\.";gzip_vary on;root /www/wwwroot/dist/;location / {try_files $uri $uri/ /index.html;}location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {access_log off;add_header Cache-Control max-age=360000;} }

dockerfile參考如下：

/www/wwwroot # cat Dockerfile FROM node:12.18.0-alpine3.11ARG NPM_RUN_ARG=build RUN apk add nginx tzdata RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtimeADD . /www/wwwroot/ WORKDIR /www/wwwroot/ RUN yarn config set registry https://registry.npm.taobao.org/ && yarn install && yarn cache clean RUN npm run --silent $NPM_RUN_ARG RUN ln -s /www/wwwroot/deploy/nginx.conf /etc/nginx/conf.d/ RUN rm -f /etc/nginx/mime.types; ln -s /www/wwwroot/deploy/mime.types /etc/nginx/CMD ["/usr/sbin/nginx", "-g", "pid /tmp/nginx.pid; daemon off;"]

總結

以上是生活随笔為你收集整理的nginx反向代理实现二级域名转一级域名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。