手把手教你通过 Docker 部署前后端分离项目(亲测可用)

点击上方“Java基基”,选择“设为星标”

做积极的人,而不是积极废人!

每天 14:00 更新文章,每天掉亿点点头发...

源码精品专栏

 

来源:blog.csdn.net/HJW_233/

article/details/126450317


一、安装Docker

1、安装:

yum install docker

2、启动/停止/重启docker服务

service docker start 
service docker stop 
service docker restart

3、查看docker版本信息

docker version
85524ecba1e0e6c3b5829e111d2075ed.png

4、运行helloword,因为不存在此镜像,docker会自动下载运行本镜像

docker run hello-world
bb4cb2d86228eae7999a95618a788460.png

5、查看所有docker镜像

docker images
a824be8f99e984b6489e662bf9219129.png

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

  • 项目地址:https://github.com/YunaiV/ruoyi-vue-pro

  • 视频教程:https://doc.iocoder.cn/video/

二、安装Nginx

1、拉取Nginx镜像文件

docker pull nginx
e340cada0df1a6d9f688a7c6c4cccfa5.png

2、查看下载好的镜像文件

docker images
9399dd3cc02b287327bf7be2902af4b0.png

3、创建并运行Nginx容器

docker run -d --name nginx01 -p 3344:80 nginx
命令详解:

> 基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
>
> * 项目地址:<https://github.com/YunaiV/yudao-cloud>
> * 视频教程:<https://doc.iocoder.cn/video/>

# docker run 启动一个镜像
# -d 表示后台允许
# --name nginx01  表示为当前容器起一个别名
# -p 3344:80 表示将本机的3344端口映射到nginx镜像的80端口

4、查看正在运行的容器

docker ps
2c4b1adb9f98b5c13d2824143c830b21.png

5、查看Nginx是否部署成功

curl localhost:3344
4241b128f46904e675c322178fcbab32.png
拓展

1、进入Nginx容器当中

docker exec -it nginx01 /bin/bash
命令详解:
# docker exec 在运行的容器中执行命令
# -i 以交互模式运行容器,通常与 -t 同时使用;例如-it
# -t 为容器重新分配一个伪输入终端,通常与 -i 同时使用;例如-it
# nginx01 容器名
# /bin/bash 其实就是表示载入容器后运行bash(命令语言解释程序), 因为docker中必须要保持一个进程(运行的程序)的运行,要不然整个容器就会退出,所以说,bash就担任起了docker中运行的那个进程的角色!
#而/bin/bash则是bash在linux下的位置

2、在容器中查询出nginx的相关配置文件存放位置

whereis nginx

3、退出容器,回到本地linux系统

exit

4、停止并移除Nginx容器

docker stop bedfd2a72585 #停止容器
docker rm bedfd2a72585 #移除容器
# bedfd2a72585表示容器的ID,即:CONTAINER ID

5、本地创建管理目录

mkdir -p /data/nginx
mkdir -p /data/nginx/www 
mkdir -p /data/nginx/conf
mkdir -p /data/nginx/logs

6、将容器中的相应文件copy到刚创建的管理目录中

docker cp bedfd2a72585:/etc/nginx/nginx.conf /data/nginx/
docker cp bedfd2a72585:/etc/nginx/conf.d /data/nginx/conf/
docker cp bedfd2a72585:/usr/share/nginx/html/ /data/nginx/www/
docker cp bedfd2a72585:/var/log/nginx/ /data/nginx/logs/

注:docker cp bedfd2a72585中的 "bedfd2a72585" 为容器ID(docker ps可查看)

7、再次启动容器并作目录挂载

docker run --name nginx -p 80:80 -v /data/nginx/nginx.conf:/etc/nginx/nginx.conf -v /data/nginx/www/:/usr/share/nginx/html/ -v /data/nginx/logs/:/var/log/nginx/ -v /data/nginx/conf/:/etc/nginx/conf.d --privileged=true -d nginx

ps:-p 80:80 端口进行映射,将本地 80端口映射到容器内部的 80 端口。

三、安装Mysql

1、下拉mysql镜像文件

docker pull mysql  #默认最新版本
 
docker pull mysql:xxx  #指定版本号
996f53d6abddb2d7cafc6939f31ab861.png

2、查看当前镜像

docker images
9b0187f70585243c028ea0fc82714061.png

3、启动mysql容器

第一种:

docker run --name mysql01 -d -p 3310:3306 -e MYSQL_ROOT_PASSWORD=root mysql

命令详解:

# --name 自定义容器名称
# -d 后台运行
# -p 指定映射的端口号
# -e MYSQL_ROOT_PASSWORD=root 数据库密钥

第二种:

docker run --restart=always --privileged=true -d -v /home/mysql/data:/var/lib/mysql -v /home/mysql/conf:/etc/mysql/conf.d -v /home/mysql/my.cnf:/etc/mysql/my.cnf -p 3311:3306 --name mysql02 -e MYSQL_ROOT_PASSWORD=root mysql
  • --restart=always 代表开启启动

  • --privileged=true 代表进入容器内部为管理员身份

  • -d 表示后台运行容器 并返回容器Id

  • -v 把mysql产生的数据同步到本地 防止数据丢失

  • -e 容器传参  设置mysql的初始密码

4、查看正在运行的容器

docker ps
367cdf34a88271fbecb0d3a08a4c13c9.png

5、测试数据库连接

d110baaaea5cb15543be8f2bd8aee8c9.png e2cf2f416f04b647834413db14f3bd40.png

四、部署SpringBoot项目

1、整合后端成Jar包并编写Dockerfile文件

fa6c9927442761650d89cc014cb65ae0.png

2、Dockerfile内容详解

FROM java:8  #工程java版本
 
COPY *.jar /app.jar  #将所有的jar包整合为app.jar
 
EXPOSE 9099  #暴露后端端口号
 
ENTRYPOINT ["java","-jar","app.jar"]  #执行jar包

3、将文件上传到Linux服务器上面,必须放在同级目录一起!

f2a9575e879445af4a74a8abde59c9fd.png

4、构建镜像

docker build -t api .  #点千万别漏了,这里取名镜像为api,可以随便取名!
399213a789aafbef3faf96e2ec34a5d4.png

5、查看当前镜像

docker images
fbd4e110aa9edcbb6094af1f18969927.png

6、创建一个新的容器并运行

docker run -d -p 9099:9099 --name httapi api 
#将9099端口映射到9099端口,端口记得放开
#httapi为自定义容器名字
#api是镜像名字

7、查看正在运行的容器

docker ps
6cd439e53e1ebcb687687b7a7b5e43fb.png

8、使用postman测试接口

787189c96610229dcf4e94c1495d759d.png

五、部署Vue项目

1、打包Vue工程并同时编写default.conf文件和Dockerfile文件

fb6d2c11f23b668b3141dd5d0844a314.png

2、default.conf文件和Dockerfile文件详细

  • default.conf配置

server {
    listen       80;
    server_name  ip地址; # 修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
     location /api {
      proxy_pass http://ip地址:端口号/;
    }
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
  • Dockerfile配置

# 基础镜像使用Nginx
FROM nginx
# 作者
MAINTAINER htt
# 添加时区环境变量,亚洲,上海
ENV TimeZone=Asia/Shanghai
# 将前端dist文件中的内容复制到nginx目录
COPY dist  /usr/share/nginx/html/
# 用本地的nginx配置文件覆盖镜像的Nginx配置
COPY default.conf /etc/nginx/conf.d
# 暴露端口
EXPOSE 80

3、上传这三个文件到Linux服务器的同一个文件夹当中,务必放在一起!

52721ff4090f28dfee36df241762b544.png

4、构建镜像

docker build -t vue . #点千万别漏了,这里取名镜像为vue,可以随便取名!
143dc6205a16e8f716a2e6e628efa4f1.png

5、查看当前镜像

docker images
77c5474dad97af27eef6df6692faff53.png

6、创建一个新的容器并运行

docker run -d -p 8088:80 --name httvue vue 
#将8088端口映射到80端口,端口记得放开
#httvue为自定义容器名字
#vue是镜像名字

7、查看正在运行的容器

docker ps
f8ee3f814f8678abfd78ca4abdb21dbf.png

8、访问前端页面并测试接口

a55931259b62c2166e6c63e2b74e3d25.png

欢迎加入我的知识星球,一起探讨架构,交流源码。加入方式,长按下方二维码噢

e1ececaf2613b654294698773a6bc7c1.png

已在知识星球更新源码解析如下:

3f4a0d073ebabb162bac11ac090b91a5.jpeg

900d010f04f980895f57ad94fc7e3328.jpeg

f009493e430509344e00cea663b5d18a.jpeg

fc183780846ddb9bd18c9cfe210f91da.jpeg

最近更新《芋道 SpringBoot 2.X 入门》系列,已经 101 余篇,覆盖了 MyBatis、Redis、MongoDB、ES、分库分表、读写分离、SpringMVC、Webflux、权限、WebSocket、Dubbo、RabbitMQ、RocketMQ、Kafka、性能测试等等内容。

提供近 3W 行代码的 SpringBoot 示例,以及超 6W 行代码的电商微服务项目。

获取方式:点“在看”,关注公众号并回复 666 领取,更多内容陆续奉上。

文章有帮助的话,在看,转发吧。
谢谢支持哟 (*^__^*)
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值