Docker+Nginx打包部署前后端分离步骤实现

 更新时间:2023年1月10日 15:10  点击:48 作者:别团等shy哥发育

问题描述

最近做了一个前后端分离的通用权限管理系统,今天想用自己的服务器部署下,本地部署测试是没问题的,但是部署在服务器上还是出现了许多小插曲,这里大概记录一下吧。

项目打包

前端项目打包

由于我需要在同一个端口号下使用nginx部署多个前端项目,所以需要额外设置一些东西。

修改vue.config.js文件

添加如下配置:

image-20221230164452873

router配置中添加base属性

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  base:'/guigu'
})

image-20221230164614590

打包前端项目

执行命令:

npm run build:prod

image-20221230164743322

image-20221230164732551

出现dist文件夹说明打包成功

image-20221230164808807

后端项目打包

这里我跳过了test步骤

image-20221230164838903

打包之后target文件夹下面会有jar包

image-20221230164906192

将前端和后端的打包文件上传到服务器

这里上传的方法较多,不过多赘述了。

image-20221230165043432

将dist.tgz文件解压即可

tar -zxvf dist.tgz -C 

写你的解压路径即可

nginx反向代理配置

部分配置如下:

image-20221230165222245

  server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
           proxy_pass http://blog;
		   proxy_set_header HOST $host;
		   proxy_set_header X-Forwarded-Proto $scheme;
		   proxy_set_header X-Real-IP $remote_addr;
		   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
		
		location ^~/prod-api/ {
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-NginX-Proxy true;
			proxy_pass http://127.0.0.1:8800/;
		}
		# guigu-auth配置
		location /guigu {
			alias /opt/guigu-auth/guigu-front/;
			index index.html index.htm;
		}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

上面nginx.conf的配置分为两个部分,第一个部分实现前端vue的映射,

即将

/opt/guigu-auth/guigu-front/index.html

映射成

127.0.0.1:8080/guigu

location /guigu {
			alias /opt/guigu-auth/guigu-front/;
			index index.html index.htm;
}

第二部分是将后端请求指向后端项目。这里直接替换了uri的前缀

prod-api

也就是说假设前端向后端发送的请求为

http://localhost:8800/prod-api/admin/system/index

经过nginx反向代理后,实际上到达后端的uri为

http://localhost:8800/admin/system/index

至此,前端项目部署完毕

访问

codeleader.top/guigu

会出现如下页面说明前端部署成功

image-20221230170335533

后端通过Dockerfile打包成docker镜像

这里为什么使用docker?

我开始不想用这个,是直接将jar包在服务器上部署的,觉得小项目没必要用docker。

但是由于我以前搭建个人博客的时候装的jdk11,这个项目使用jdk8开发的,环境不一致,docker的环境隔离机制非常适合现在这种情况,关于docker使用场景请看我docker专栏,这里不再赘述。

编写Dockerfile

# 基础镜像使用java
FROM java:8
# 作者
MAINTAINER xtt
# VOLUME 指定临时文件目录为/tmp,在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名为guigu_docker.jar
ADD service-system.jar guigu_docker.jar
# 运行jar包
RUN bash -c 'touch /guigu_docker.jar'
ENTRYPOINT ["java","-jar","/guigu_docker.jar"]
#暴露8800端口作为微服务
EXPOSE 8800

构建Docker镜像

将打包的后端项目jar包和Dockerfile放在同一个目录下面

image-20221230170847494

执行命令如下命令构建镜像:

docker build -t guigu_docker:1.0 .

image-20221230170948838

查看构建的镜像

docker images

image-20221230171022201

运行容器

docker run -d -p 8800:8800 --name guigu-auth guigu_docker:1.0

image-20221230171057150

image-20221230171116141

运行测试

点击登录按钮,成功进入系统,说明前后端部署成功。

image-20221230171226854

image-20221230171736165

image-20221230171711121

现在这种部署方式跟部署单个微服务的方法一样,但是生产中不可能只有一个微服务,所以需要借助容器编排来实现一次打包一堆微服务,包括docker-compose、docker swam、k8s、DevOps等这还需要大量的开发实践才行,这些技术光学没用,要在自己的项目中实践才行。其实这里nginx和前端也可以用容器部署的,但这里暂时感觉没必要。

开发+部署多有意思啊,现在整天搞自己不感兴趣的方向已经和当初自己想象的研究生科研生涯完全不同了,这种感觉或许只有自己读研之后才能感同身受了,虽有诸多无奈,但我绝不会放弃我所热爱的技术,架构师之路任重而道远。

以上就是Docker+Nginx打包部署前后端分离步骤实现的详细内容,更多关于Docker+Nginx部署前后端分离的资料请关注猪先飞其它相关文章!

原文出处:https://blog.csdn.net/qq_43753724/article/details/128509914

相关文章

  • 解决Docker中的error during connect异常情况

    这篇文章主要介绍了解决Docker中的error during connect异常情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-22
  • Nginx中配置过滤爬虫的User-Agent的简单方法

    这篇文章主要介绍了Nginx中配置过滤爬虫的User-Agent的简单方法,文中罗列了一些常用搜索引擎的爬虫名称以免造成不必要的过滤,需要的朋友可以参考下...2016-01-27
  • docker部署confluence的完整步骤

    这篇文章主要介绍了docker部署confluence的完整步骤,这里的镜像并不是小编自己写的是基于他人打包的文中有详细介绍,需要的朋友可以参考下...2021-06-11
  • docker 启动elasticsearch镜像,挂载目录后报错的解决

    这篇文章主要介绍了docker 启动 elasticsearch镜像,挂载目录后报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-20
  • 一文搞定Docker安装ElasticSearch的过程

    通过本文可以帮助大家快速学习Docker安装ElasticSearch的过程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-08-31
  • Nginx根据不同浏览器语言配置页面跳转的方法

    这篇文章主要介绍了Nginx根据不同浏览器语言配置页面跳转的方法,包括一个简体繁体的基本判断方法及实际根据中英文跳转的例子,需要的朋友可以参考下...2016-05-22
  • nginx+apache+mysql+php+memcached+squid搭建集群web环境

    当前,LAMP开发模式是WEB开发的首选,如何搭建一个高效、可靠、稳定的WEB服务器一直是个热门主题,本文就是这个主题的一次尝试。...2016-01-27
  • docker swarm外部验证负载均衡时不生效的解决方案

    这篇文章主要介绍了docker swarm外部验证负载均衡时不生效的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-27
  • Nginx反向代理proxy_cache_path directive is not allowed错误解决方法

    这篇文章主要介绍了Nginx反向代理proxy_cache_path directive is not allowed错误解决方法,需要的朋友可以参考下...2016-01-27
  • 在docker中执行linux shell命令的操作

    这篇文章主要介绍了在docker中执行linux shell命令的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-30
  • docker容器与宿主机的数据交互方式总结

    这篇文章主要给大家介绍了关于docker容器与宿主机的数据交互,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-09
  • Nginx自定义访问日志的配置方式

    Nginx日志主要分为两种:访问日志和错误日志。访问日志主要记录客户端访问Nginx的每一个请求,格式可以自定义。下面这篇文章主要给大家介绍了Nginx自定义访问日志的配置方式,需要的朋友可以参考学习,下面来一起看看吧。...2017-07-06
  • Debian7编译安装nginx简明教程

    这篇文章主要介绍了Debian7编译安装nginx简明教程,本文直接给出操作命令和步骤,需要的朋友可以参考下...2016-01-27
  • nginx修改上传文件大小限制的方法

    本篇文章主要介绍了nginx修改上传文件大小限制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧。 ...2017-01-22
  • Linux环境下nginx搭建简易图片服务器

    这篇文章主要介绍了Linux环境下nginx搭建简易图片服务器,需要的朋友可以参考下...2016-01-27
  • 详解Nginx服务器中配置Sysguard模块预防高负载的方案

    这篇文章主要介绍了详解Nginx服务器中配置Sysguard模块预防高负载的方案,该模块由阿里巴巴的团队开发,能够设置负载阀值,比较强大,需要的朋友可以参考下...2016-02-02
  • 详解如何使用Docker部署Django+MySQL8开发环境

    这篇文章主要介绍了详解如何使用Docker部署Django+MySQL8开发环境,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-07-19
  • Nginx访问日志及错误日志参数说明

    这篇文章主要介绍了Nginx访问日志及错误日志参数说明,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-14
  • 安装Docker Desktop报错WSL 2 installation is incomplete的问题(解决报错)

    这篇文章主要介绍了安装Docker Desktop报错WSL 2 installation is incomplete的问题,解决方法很简单只需我们自己手动更新一下,我们根据提示去微软官网下载最新版的wsl2安装后即可正常打开,需要的朋友可以参考下...2021-06-13
  • Docker部署Rancher的方法(无坑)

    这篇文章主要介绍了Docker部署Rancher的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-06