nginx部署前后端分离的项目?

不用nginx可以部署前后端分离项目吗

不可以。不用nginx不可以可以部署前后端分离项目。根据查询相关信息可知:不用nginx无法部署前后端分离项目。前后端分离部署采用前端静态资源部署在服务器,然后需要nginx充当我们的前端静态文件代理服务器,然后后端使用jar包方式部署,还需要nginx的反向代理解决跨域问题,因为前后端分离项目,前后端运行在不同的端口上就需要解决跨域的问题,需要在nginx里进行配置代理转发。

nginx部署前后端分离的项目?  第1张

如何在开发时部署和运行前后端分离的JavaWe

在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项目,然后使用dubbo+zookeeper或者springCloud来构建微服务,前端则会是一个单独的项目,前台的请求通过微服务来调用。但是,不同与传统的web项目,这类前后端分离的项目如何在开发中部署和运行呢?

当前后端分离时,后端项目一定会被加载到tomcat的webapp目录下面,但是前端的资源院该如何被访问到呢?这里以tomcat这个中间件为例,探讨在开发这类项目的时候,如何让前后端分离的项目部署并且运行起来,即后端项目部署在tomcat之后如何在运行时访问静态资源(非上线部署)。

主要有两种方案:1.在本地通过Nginx来处理这些静态资源。2、将静态资源统一放入一个javaweb应用中,并将自动生成的war包随后端项目一期丢入tomcat。下面详细介绍

一、使用Nginx来访问静态资源。

在本地安装nginx并且修改nginx.conf,修改相关配置,将web访问的端口的资源进行更改,配置如下:

server {        listen       80;        server_name  localhost;        charset utf-8;        #access_log  logs/host.access.log  main;

location / {              proxy_pass ;              proxy_redirect off;

proxy_set_header HOST $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

client_max_body_size 10m;

client_body_buffer_size 128k;

proxy_connect_timeout 90;

proxy_send_timeout 90;

proxy_read_timeout 90;

proxy_buffer_size 4k;

proxy_buffers 4 32k;

proxy_busy_buffers_size 64k;

proxy_temp_file_write_size 64k;

}

location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)$  {

root D:\Workspaces\esop-html;             index index.html;

}

listen对象改为你本地的tomcat访问端口,最下面location中的root改为你前端项目中静态资源的位置,这样就可以实现只部署后端的项目就能访问前端的页面了。

二、将前端项目转换为动态的web项目,随后端项目一起丢入tomcat

这个方案省去了在本地安装和配置nginx,但是也只适用于开发阶段项目的部署运行和调试,真正在生产环境通常前后端项目会部署在不同的服务器。

如果是Intellij Idea,在导入前端项目之后,右键项目 add framework support -- web application,这时将会把前端项目转换为一个javaweb项目,然后将静态资源放在生成的web目录下即可。

如果是eclipse,可以新建一个javaweb项目然后将静态资源放入web或者webcontent目录下,或者直接先导入前端项目,然后通过 project facts 将项目转换为dynamic web项目并勾选 js等相关配置。

然后,运行项目时把后端的war包和前端的war包一同添加到 deployment中运行即可。

(Docker Nginx) Spring boot+Vue 前后端分离部署 详细完整版

简述:Spring boot+Vue 前后端分离项目部署,主要采用docker容器部署方式。

Springboot项目部署:docker构建mysql环境+docker构建项目自身环境。

Vue项目:使用docker启动nginx服务器方式代理部署。

项目使用mysql8.0作为数据源,所以部署时需要使用docker构建mysql环境及项目自身环境。

连接出现1251错误时:

首先将项目进行打包:mumu-0.0.1-SNAPSHOT.jar

到此,springboot项目采用docker方式运行部署结束。

使用docker容器方式运行nginx服务器。

对于nginx服务器,重要的两个操作是:

所以我们在配置启动nginx容器的时候,需要将对应的目录及文件进行宿主机挂载,方便后续更新资源及操作

启动命令:

vue项目部署方式:tomcat部署和nginx部署

一般项目前后端分离得话,都会用nginx作为反向代理转发的。

因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理.

其中 vue+webpack+vue-router(history) 部署到nginx服务器下,非根目录,前后端怎样配置文件 这篇文章详细说明了怎么打包vue项目,记得修改config下的index.js文件.

修改为:(只显示修改的部分)

关于nginx的配置,一定需要注意第二篇文章说到的问题;

proxy_pass转发的路径后是否带 “/” 的意义都是不一样的,假设有请求 ,如果配置是第一种情况,不带"/"的话,那么访问的实际是

,直接访问根路径,如果带"/",那么访问的实际是" ",以"/test"作为根路径.

具体配置如下:

因为项目上线,一般需要添加项目名,并且消去vue-router产生的#号,需要在router的配置下,在本项目是router-index.js下配置:

在打包后,会生成dist文件,文件下由以下部分组成:

至此,整个vue项目算是配置完毕,但是部署到tomcat下会出现访问图片 没有带根路径 的问题,如果你引用图片的方式和我一致,如下:

那么可以尝试的解决方法是,重新配置tomcat的;

首先在tomcat的webapps新建文件夹,文件夹名称和上面配置的根路径一致,即为webSite,然后将打包生成的dist文件夹里面的文件复制到webSite下,并且新建文件 WEB-INF/web.xml:

项目结构为:

找到tomcat的conf文件下的server.xml,配置静态服务,找到HOST标签:

这里的配置为:

参考: tomcat配置静态服务

增加这个文件是因为,解除#号,参考官网:

去除vue项目的#号

这里就直接丢配置了:

怎样通过nginx配置实现前后端分离

两种方式,一个是前端一个nginx,后端几个webserver,后端设置防火墙,防火墙允许nginx进入。

另一个方式就是nginx设置好读写分离

以上内容为新媒号(sinv.com.cn)为大家提供!新媒号,坚持更新大家所需的互联网后端知识。希望您喜欢!

版权申明:新媒号所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流,不声明或保证其内容的正确性,如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023-09-23 13:49
下一篇 2023-09-23 13:49

相关推荐

发表回复

登录后才能评论