Docker+Nginx打包部署前后端分离项目

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

1、问题描述

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

2、项目打包

2.1 前端项目打包

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

2.1.1 修改vue.config.js文件

  添加如下配置:

image-20221230164452873

2.1.2 router配置中添加base属性

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

image-20221230164614590

2.1.3 打包前端项目

  执行命令:npm run build:prod

image-20221230164743322

image-20221230164732551

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

image-20221230164808807

2.2 后端项目打包

image-20221230164838903

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

image-20221230164906192

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

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

image-20221230165043432

  将dist.tgz文件解压即可

3 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;
        }
    }
AI 代码解读

  上面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;
}
AI 代码解读

  第二部分是将后端请求指向后端项目。这里直接替换了uri的前缀prod-api,也就是说假设前端向后端发送的请求为http://localhost:8800/prod-api/admin/system/index,经过nginx反向代理后,实际上到达后端的uri为http://localhost:8800/admin/system/index

  至此,前端项目部署完毕

  访问codeleader.top/guigu,会出现如下页面说明前端部署成功

image-20221230170335533

4、后端通过Dockerfile打包成docker镜像

4.1 这里为什么使用docker?

  我开始不想用这个,是直接将jar包在服务器上部署的,觉得小项目没必要用docker。但是由于我以前搭建个人博客的时候装的jdk11,这个项目使用jdk8开发的,环境不一致,有点难受,docker的环境隔离机制非常适合现在这种情况,关于docker使用场景请看我docker专栏,这里不再赘述。

4.2 编写Dockerfile

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

4.3 构建Docker镜像

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

image-20221230170847494

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

docker build -t guigu_docker:1.0 .
AI 代码解读

image-20221230170948838

4.4 查看构建的镜像

docker images
AI 代码解读

image-20221230171022201

4.5 运行容器

docker run -d -p 8800:8800 --name guigu-auth guigu_docker:1.0
AI 代码解读

image-20221230171057150

image-20221230171116141

4.6 运行测试

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

image-20221230171226854

image-20221230171736165

image-20221230171711121

   现在这种部署方式跟部署单个微服务的方法一样,但是生产中不可能只有一个微服务,所以需要借助容器编排来实现一次打包一堆微服务,这还需要大量的开发实践才行。
目录
打赏
0
0
0
0
112
分享
相关文章
Docker环境下快速部署RabbitMQ教程。
就这样,你成功地用魔法召唤出了RabbitMQ,还把它和你的应用程序连接了起来。现在,消息会像小溪流水一样,在你的系统中自由流淌。别忘了,兔子们不喜欢孤独,他们需要你细心的关怀,不时地监控它们,确保他们的世界运转得井井有条。
76 18
MAZANOKE:一款隐私优先的浏览器图像优化工具及Docker部署指南
MAZANOKE 是一款简易的图片优化工具,它直接在浏览器中运行,支持离线使用,并确保您的图片始终保留在设备上,绝不外泄。 这款专为普通人设计的工具,适合与亲友分享使用,是那些来路不明的"免费"在线工具的可靠替代品。
38 1
MAZANOKE:一款隐私优先的浏览器图像优化工具及Docker部署指南
【赵渝强老师】数据库不适合Docker容器化部署的原因
本文介绍了在Docker中部署MySQL数据库并实现数据持久化的方法,同时分析了数据库不适合容器化的原因。通过具体步骤演示如何拉取镜像、创建持久化目录及启动容器,确保数据安全存储。然而,由于数据安全性、硬件资源争用、网络带宽限制及额外隔离层等问题,数据库服务并不完全适合Docker容器化部署。文中还提到数据库一旦部署通常无需频繁升级,与Docker易于重构和重新部署的特点不符。
195 18
【赵渝强老师】数据库不适合Docker容器化部署的原因
在Docker容器中部署GitLab服务器的步骤(面向Ubuntu 16.04)
现在,你已经成功地在Docker上部署了GitLab。这就是我们在星际中的壮举,轻松如同土豆一样简单!星际旅行结束,靠岸,打开舱门,迎接全新的代码时代。Prepare to code, astronaut!
72 12
技术指南:如何把docsify项目部署到基于CentOS系统的Nginx中。
总结 与其他部署方法相比,将docsify项目部署到基于CentOS系统的Nginx中比较简单。以上步骤应当帮助你在不花费太多时间的情况下,将你的项目顺利部署到Nginx中。迈出第一步,开始部署你的docsify项目吧!
110 14
docker arm架构部署kafka要点
本内容介绍了基于 Docker 的容器化解决方案,包含以下部分: 1. **Docker 容器管理**:通过 Portainer 可视化管理工具实现对主节点和代理节点的统一管理。 2. **Kafka 可视化工具**:部署 Kafka-UI 以图形化方式监控和管理 Kafka 集群,支持动态配置功能, 3. **Kafka 安装与配置**:基于 Bitnami Kafka 镜像,提供完整的 Kafka 集群配置示例,涵盖 KRaft 模式、性能调优参数及数据持久化设置,适用于高可用生产环境。 以上方案适合 ARM64 架构,为用户提供了一站式的容器化管理和消息队列解决方案。
126 10
Ubuntu下部署及操作Docker技巧
以上就是在Ubuntu下部署及操作Docker的具体步骤。但这只是冰山一角,Docker的魅力远不仅如此。你可以将其视为存放各种工具的小箱子,随时随地取用,极大地提升工作效率。你也可以私人订制,适应不同的开发环境,就像一个拥有各种口味冰淇淋的冰箱,满足各种各样的需求。好了,现在你已经掌握了基本的Docker运用技巧,快去尝试使用吧!记住,沉浸在探索中,你会找到无尽的乐趣和满满的收获。
199 23
Docker网关冲突导致容器启动网络异常解决方案
当执行`docker-compose up`命令时,服务器网络可能因Docker创建新网桥导致IP段冲突而中断。原因是Docker默认的docker0网卡(172.17.0.1/16)与宿主机网络地址段重叠,引发路由异常。解决方法为修改docker0地址段,通过配置`/etc/docker/daemon.json`调整为非冲突段(如192.168.200.1/24),并重启服务。同时,在`docker-compose.yml`中指定网络模式为`bridge`,最后通过检查docker0地址、网络接口列表及测试容器启动验证修复效果。
获取Docker基础使用方法:让容器化变得轻松。
对于Docker的初学者来说,了解这些基础知识点就足够了。实践是最好的老师,越是动手操作,对Docker的理解会越深。祝阅读这篇文章的开发者们一切顺利,愿你在Docker的海洋中航行顺利!
104 17
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问