记录：前后端拆分后的组合

2022-02-02 20:01:26 阅读：125 来源： 互联网

标签：function 组合记录 nginx html 拆分 error logger response

　　最近设计架构时，有个场景，首先是前后端分离，再就是一前端对多后端，这里需要解决两件事，一是前端的html,js,css需要一个host；二是需要一个api网关，能组织后端的api服务。有很多反向代理产品能实现，这里选择了Nginx来实现。

　　下面是在一个前端的html文件中调用后端api的例子，前端是不知道后端的api是不是组合的，所以只用相对路径请求就ok

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>


<script src="axios.min.js"></script>
<script>
function getServiceA(){
axios.get('/service_a/test')
  .then(function (response) {
     var x=document.getElementById("a")
     x.innerHTML=response.data;
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

function getServiceB(){
axios.get('/service_b/test')
  .then(function (response) {
   var x=document.getElementById("b")
     x.innerHTML=response.data;
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}
</script>

<button onclick='getServiceA()'>Get Service A</button><span id="a"></span>
</br>
</br>
<button onclick='getServiceB()'>Get Service B</button><span id="b"></span>

</body>
</html>

下面nginx的配置

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8484;
        server_name  localhost; 
        location / {
            root   html;
            index  index.html index.htm;
        }    
    #-------
    location /service_a/ {
       proxy_pass http://localhost:5001/;
    }
    location /service_b/ {
       proxy_pass http://localhost:6001/;
    }
    #-------     
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

其实的A服务，B服务相似

namespace NginxTest1.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TestController : ControllerBase
    {
        private readonly ILogger<TestController> _logger;
        public TestController(ILogger<TestController> logger)
        {
            _logger = logger;
        }

        [HttpGet]
        public string Get()
        {
            var str = "ServiceA:5001_" + DateTime.Now;
            _logger.LogInformation(str);
            return str;
        }
    }
}

运给的结果

关于前后端服务的部署，就随便了，可虚机，可docker

　　想要更快更方便的了解相关知识，可以关注微信公众号

标签：function,组合,记录,nginx,html,拆分,error,logger,response
来源： https://www.cnblogs.com/ljknlb/p/15860662.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

记录：前后端拆分后的组合