.net 开发怎么实现前后端分离_再谈前后端分离开发和部署

最新推荐文章于 2024-10-05 11:05:44 发布

風岩聚楽

最新推荐文章于 2024-10-05 11:05:44 发布

阅读量2.4k

点赞数

文章标签： .net 开发怎么实现前后端分离

本文链接：https://blog.csdn.net/weixin_35543991/article/details/112143684

版权

本文探讨了在.NET开发中如何实现前后端分离，包括前端维护HTML、后端维护HTML以及使用Node中间层的方式。重点讨论了Node中间层在处理跨域、接口转发和模板渲染中的作用，以及在实际工作中的应用现状和解决方案。

摘要由CSDN通过智能技术生成

前后端分离开发已成为业界的共识，但分离的同时也带来了部署的问题。传统web模式下，前端和后端同属一个项目，模板的渲染理所当然由后端渲染。然而随着node的流行，以及webpack的模块化打包方案，让前端在开发阶段完全有能力脱离后端环境：通过本地node启动一个服务器，搭配Mock数据，马上就可以进行业务开发了。

但是到了部署阶段，问题也就显现出来：前端最后打包出来的js，css以及index.html，到底放在哪里？静态文件js，css或者图片，我们还可以在CI阶段上传到cdn服务器上，但是最后的html模板index.html一定需要放在一个服务器上，然而这个服务器到底由前端还是后端维护？

前端维护HTML

如果html模板由前端维护，那么前端就需要自己使用一个静态服务器：提供HTML的渲染和API接口的转发。常见的单页应用，也是推荐使用Nginx进行部署。

使用Nginx部署，这里又分两种情况：

静态资源完全由Nginx托管，也就是js,css和index.html放在同一个dist目录里。在这种情况下，webpack的publicPath一般不用特别设置，使用默认的/即可
静态资源上传CDN，Nginx只提供index.html。在这种情况下，webpack的publicPath要设置成cdn的地址，例如://static.demo.cn/activity/share/。但这又会引发一个问题，由于qa环境，验证环境，生产环境的cdn地址通常不同，为了让index.html可以引入正确的静态文件路径，你需要打包三次，仅仅为了生成三份引用了不同路径的html(即使三次打包的js内容完全一样)

nginx配置

server {
    
    listen       80;
    server_name  localhost;

    location / {
    
        root   /app/dist; # 打包的路径
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 单页应用防止重刷新返回404，如果是多页应用则无需这条命令
    }

    location /api {
    
        proxy_pass https://anata.me; #后台转发地址
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remot