美文网首页
nuxt + nginx 前后端不同服务器代理配置

nuxt + nginx 前后端不同服务器代理配置

作者: DaFengS | 来源:发表于2019-05-18 18:34 被阅读0次

    服务器说明:
    服务器A:域名www.aaa.com,部署nuxt代码【端口3000】和nginx代理【端口80】
    服务器B:域名www.bbb.com,部署后端接口代码(java、.net等后端程序实现)【端口80】

    1. nuxt中,对axios插件的自定义扩展配置【文件plugins/axios.js】,需要增加node服务端请求设置,config.headers.host = req.headers.host,这样发送到服务器时,请求的域名可以是原始域名

    样例代码 plugins/axios.js

    /**
     * @param {import('@nuxt/vue-app').Context} ctx
     */
    export default function(ctx) {
      const { $axios, req, redirect, route } = ctx
    
      /**
       * 发送前拦截
       */
      $axios.onRequest(config => {
        if (process.client) {
          // 浏览器执行的客户端代码
        }
        if (process.server) {
          // node执行的服务端代码
          // node服务端做host穿透-重点在这里哟
          config.headers.host = req.headers.host
        }
      })
      /**
       * 返回结果拦截
       */
      $axios.onResponse(response => {
        // 可以添加处理代码
    
        // 或者不处理直接返回response
        return response
      })
    
      /**
       * 错误拦截
       */
      $axios.onError(error => {
        const code = parseInt(error.response && error.response.status)
        if (code === 404) {
          // 404错误处理
        }
      })
    }
    
    1. nginx部署在运行前端代码的服务器,nuxt框架优势在于可以直接使用SSR,支持node服务端渲染,所以nuxt的运行环境是node。
      nginx下没有任何的执行代码,只用来做代理,根目录默认代理nuxt的3000端口,nuxt访问后端接口的前缀是api,nginx代理配置代码样例如下:
    #上游模块接口-前端地址
    upstream project_vue {                                                         
      server www.aaa.com:3000;                                                
      keepalive 2000;
    }
    #上游模块接口-后端地址
    upstream project_java {                                                         
      server www.bbb.com;                                                
      keepalive 2000;
    }
    
    #nginx请求映射的代理配置
    server {
      listen       80;
      server_name  www.aaa.com;
      #charset koi8-r;
    
      #access_log  logs/host.access.log  main;
    
      #后端接口代理,目录层级越多的代理,需要放在前边
      location /api/ {
        #文本替换修正uri,看需要启用,我这里接口也是api开头,所以没有启用替换
        #rewrite ^/api/(.*) /$1 break;
        #代理地址
        proxy_pass http://project_java;
        #域名穿透,可以将原始的请求域名,放在请求中发给接口,当前例子中,www.bbb.com收到的请求域名是www.aaa.com
        proxy_set_header Host $host:$server_port;
        #root   html;
        #index  index.html index.htm;
      }
      #前端代理,目录层级越少的代理,需要放在前边
      location / {
        proxy_pass http://project_vue/;
        proxy_set_header Host $host:$server_port;
      }
    }
    

    感觉写的挺乱,先这样吧,以后再整理

    相关文章

      网友评论

          本文标题:nuxt + nginx 前后端不同服务器代理配置

          本文链接:https://www.haomeiwen.com/subject/lintzqtx.html