Docker中部署前后端分离项目

Docker中部署前后端分离项目

前言

最近呢,我的研究生老师想让我为实验室做一个管理资料的系统,我差不多有已经有1年没做过Web项目,正好拿这个试试手。我采用Springboot作为框架,Layui 的前后端分离的设计,我们学校内部服务器需要在Docker内部署项目。本篇文章记录了我在Docker中部署前后端项目的笔记。非常感谢博主阿杜 https://blog.csdn.net/y1534414425/article/details/117971395

我是新人博主曹操,希望小伙伴看完我的文章后觉得有收获,就点个关注,我会不定期的更新我的学习内容分享。此外文章中有不正确的,请小伙伴指正。谢谢大家。

项目打包

前端使用npm run build打包。文件打包后上传到服务器中,后端通过 Maven 中 clean package打包。

在项目打包的时候,一定要将数据库访问的链接,更换为你的服务器的ip,以及前台的访问后台的链接也要改为服务器的ip

问题来了,我后端项目是能够正常打包,但是我的前端项目一直打包不了。我采用Layui的模板,我的目录结构是这样的。打包一直报错。所有我干脆之间把项目压缩。
Docker中部署前后端分离项目_第1张图片

镜像拉取

在我的项目中,拉取了三个镜像分别是Mysql ,Jdk:8 , nginx镜像。
experiment-ui–9090 是前端容器
experiment-8887 是后端容器
mysql 是数据库容器

Mysql

系统使用的是 MySQL 数据库,所以要在 Docker 中安装 MySQL

docker pull mysql:5.7.31

运行Mysql

docker run -d --name myMysql -p 9509:3306 -v /data/mysql:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 mysql:5.7.31

大致参数解释一下

标签 用法 说明
-v /data/mysql:/var/lib/mysql 数据卷技术:将服务器本地的文件,同步更新Docker镜像中的指定文件夹中
-d 后台运行
-e 传递环境变量 更新默认
-p 9509:3306 9509外部访问的端口号,3306是docker内部端口号

打包后端并运行为容器

在 jar 包的同一级文件夹下新建 Dockerfile 文件,文件内容如下

FROM java:8
VOLUME /tmp
ADD experiment.jar experiment.jar
EXPOSE 8887
ENTRYPOINT ["java","-jar","/experiment.jar"]

参数解释

from java:8 拉取一个 jdk 为 1.8 的 docker image
experiment.jar 就是你上传的 jar 包,替换为 jar 包的名称
expeiment.jar 是你将该 jar 包重新命名为什么名称,在容器中运行
expose 该容器暴露的端口是多少,就是 jar 在容器中以多少端口运行
entrypoint 容器启动之后执行的命令,java -jar /experiment.jar 即启动 jar

打包镜像

docker build -t experiment.

运行容器

docker run -d -p 8887:8887 --privileged=true -v /public_datasets/fedml/experiment/service:/experiment/service  --name experiment-8887 experiment

打包前端并运行为容器

在前端文件夹 experiment 的同一级文件夹下新建 Dockerfile 文件,文件内容如下

FROM nginx:latest
COPY ./front /usr/share/nginx/html/
EXPOSE 80

打包镜像

docker build -t experiment-ui .

运行容器

docker run -d --privileged=true -v /public_datasets/fedml/experiment/font:/experiment/font  --restart=always  -p 9090:80 --name nginx nginx

因为我的前端并没有打包成功,我直接将压缩包放置到nginx服务中,然后我就找到nginx 容器中的 /usr/share/nginx/html/ 文件夹中发现的文件是在这里面的,然后我就尝试了一下直接访问http://172.31.151.27:9090/page/login.html是能够直接访问的。
在这里插入图片描述

查看容器

在这里插入图片描述

最终效果

打开浏览器访问服务器 IP 即可看到效果

Ok 完结

参考博客

非常感谢博主阿杜https://blog.csdn.net/y1534414425/article/details/117971395

你可能感兴趣的:(docker,容器,运维)