使用Docker部署前后端分离项目

news2025/1/11 15:04:37

目录

引言

部署需要用到的镜像汇总

1. Redis部署

(1)搜索Redis镜像

(2)拉取Redis镜像 

(3)创建Redis容器

2. MySQL部署

(1)拉取MySQL镜像、

(2)查看镜像

(3)启动MySQL容器

(4)使用本地Navicat测试连接 

(5)导入sql文件

3. 后端部署

(1)创建工作目录

(2)修改配置文件

(3)本地后端项目打包

(4)编写 Dockerfile 文件

(5)上传jar包和Dockerfile

(6)创建镜像

(7)使用构建好的镜像启动容器

(8)网页访问测试

4. Nignx部署

(1)拉取nginx镜像

(2)启动一个nginx测试容器

(3)拷贝测试容器内容

(4)删除测试容器

(5)启动新的 nginx 容器

(6)访问测试

(7)查看挂载情况

  5. 前端部署

(1)修改配置文件

(2)前台工程打包 

 (3)上传dist包

(4)编辑nginx配置文件

(4)重启nginx容器

(5)访问测试


引言

使用若依项目来部署演示,代码地址:RuoYi-Vue

首先在本地启动若依项目,确保本地可以成功启动:

 

部署需要用到的镜像汇总:

(1)Redis镜像

(2)MySQL镜像

(3)后端工程自定义镜像

(4)Nginx镜像

镜像:

[root@zy-host home]# docker images
REPOSITORY    TAG                IMAGE ID       CREATED         SIZE
ruoyi-admin   latest             9c91f33418ce   3 hours ago     807MB
nginx         latest             605c77e624dd   12 months ago   141MB
redis         latest             7614ae9453d1   12 months ago   113MB
mysql         latest             3218b38490ce   12 months ago   516MB
java          8                  d23bdf5b1b1b   5 years ago     643MB

 容器:

[root@zy-host home]# docker ps
CONTAINER ID   IMAGE         COMMAND                  CREATED        STATUS          PORTS                                                  NAMES
5cc7296c0ae7   ruoyi-admin   "sh -c 'java $JAVA_O…"   3 hours ago    Up 3 hours      0.0.0.0:8080->8080/tcp, :::8080->8080/tcp              ruoyi-admin
fb5135730d4f   nginx         "/docker-entrypoint.…"   4 hours ago    Up 39 minutes   0.0.0.0:80->80/tcp, :::80->80/tcp                      zy_nginx
62aede427243   mysql         "docker-entrypoint.s…"   6 hours ago    Up 6 hours      0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   zy_mysql
35ca274f4ec8   redis         "docker-entrypoint.s…"   15 hours ago   Up 15 hours     0.0.0.0:6379->6379/tcp, :::6379->6379/tcp              zy_redis

下面介绍部署过程: 

1. Redis部署

(1)搜索Redis镜像

[root@zy-host home]# docker search redis

(2)拉取Redis镜像 

[root@zy-host home]# docker pull redis

[root@zy-host home]# docker images
REPOSITORY   TAG                IMAGE ID       CREATED         SIZE
redis        latest             7614ae9453d1   12 months ago   113MB

 (3)创建Redis容器

[root@zy-host home]# docker run -d -p 6379:6379 --name zy_redis redis
35ca274f4ec8c3d2d1d4bb97c975cbd4a0bc95c943df2cfa2c3e17d997d1941b

2. MySQL部署

(1)拉取MySQL镜像、

[root@zy-host ~]# docker pull mysql

(2)查看镜像

[root@zy-host ~]# docker images
REPOSITORY    TAG                IMAGE ID       CREATED         SIZE
redis         latest             7614ae9453d1   12 months ago   113MB
mysql         latest             3218b38490ce   12 months ago   516MB

(3)启动MySQL容器

[root@zy-host ~]# docker run -d -p 3306:3306 -v /home/mysql/conf:/etc/mysql/conf.d -v /home/mysql/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 --name zy_mysql mysql

(4)使用本地Navicat测试连接 

(5)导入sql文件

新建数据库 ry_vue,导入项目所需的sql文件

3. 后端部署

(1)创建工作目录

在云服务器的 /home 下创建 ruoyi 目录,作为工作目录:

[root@zy-host home]# mkdir ruoyi
[root@zy-host home]# ls
copy.txt  docker  mysql  ruoyi  test  tomcat

(2)修改配置文件

修改 application 配置文件中 MySQL 数据库和 Redis 数据库地址为云服务器地址:

 

(3)本地后端项目打包

在本地环境下,使用maven的 package 命令对后端项目打包(jar包):

 (4)编写 Dockerfile 文件

FROM java:8
VOLUME /tmp
ADD *.jar /app.jar
EXPOSE 8080

RUN sh -c 'touch /app.jar'
ENV JAVA_OPTS=""
ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

 (5)上传jar包和Dockerfile

将本地打好的jar包和Dockerfile文件上传至云服务器的 /home/ruoyi 目录下:

 (6)创建镜像

使用编写的 Dockerfile 创建后台项目的镜像:

[root@zy-host ruoyi]# docker build -t ruoyi-admin .
Sending build context to Docker daemon  81.83MB
Step 1/5 : FROM java:8
 ---> d23bdf5b1b1b
Step 2/5 : ADD *.jar /app.jar
 ---> 1acfeec0802e
Step 3/5 : CMD ["--server.port=8080"]
 ---> Running in 46fa3ac5952d
Removing intermediate container 46fa3ac5952d
 ---> 3fe6fec239b7
Step 4/5 : EXPOSE 8080
 ---> Running in 16b39dba98ec
Removing intermediate container 16b39dba98ec
 ---> 6ecd7fa673e1
Step 5/5 : ENTRYPOINT ["java","-jar","/app.jar"]
 ---> Running in 546854a2884b
Removing intermediate container 546854a2884b
 ---> 80e3109a3cab
Successfully built 80e3109a3cab
Successfully tagged ruoyi-admin:latest

查看构建好的镜像

[root@zy-host ruoyi]# docker images
REPOSITORY    TAG                IMAGE ID       CREATED          SIZE
ruoyi-admin   latest             80e3109a3cab   31 seconds ago   725MB

(7)使用构建好的镜像启动容器

[root@zy-host ruoyi]# docker run -d -p 8080:8080 --name ruoyi-admin ruoyi-admin
3ab5d9246b3b15cfe6b0461ad0d99d0c7f71dff21ba0ba66bfb7b09b1b908438

(8)网页访问测试

访问8080端口,可以看到后端工程启动成功。

4. Nignx部署

(1)拉取nginx镜像

[root@zy-host home]# docker pull nginx

(2)启动一个nginx测试容器

        启动容器直接挂载目录不行,需要使用一个nginx测试容器先把nginx相关配置文件拷贝出来,再挂载。

[root@zy-host home]# docker run -d -p 80:80 --name zy_nginx_test nginx

(3)拷贝测试容器内容

在宿主机 /usr/local/nginx目录下新建三个目录:conf 、html、log

[root@zy-host nginx]# pwd
/usr/local/nginx
[root@zy-host nginx]# mkdir {conf,html,log}
[root@zy-host nginx]# ls
conf  html  log

 将测试容器对应内容拷贝到宿主机中:

[root@zy-host nginx]# docker cp zy_nginx_test:/etc/nginx/nginx.conf /usr/local/nginx/conf/nginx.conf

(4)删除测试容器

将刚才nginx的测试容器删除

[root@zy-host nginx]# docker rm -f zy_nginx_test

(5)启动新的 nginx 容器

[root@zy-host nginx]# docker run -d --restart=always --privileged=true --name zy_nginx -p 80:80 \
-v /usr/local/nginx/cert:/etc/nginx/cert \
-v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /usr/local/nginx/html:/usr/share/nginx/html \
-v /usr/local/nginx/log:/var/log/nginx \
nginx
  1. -d:后台运行

  2. --restart=always:自启动

  3. --privileged=true:表示拥有更多的权限

  4. --name 容器命名

  5. -p 宿主机端口和容器端口的映射

  6. -v 宿主机目录和容器目录的映射

(6)访问测试

访问云服务器公网地址,可以看到nginx部署成功。

(7)查看挂载情况

[root@zy-host nginx]# docker inspect zy_nginx

"Mounts": [
            {
                "Type": "bind",
                "Source": "/usr/local/nginx/html",
                "Destination": "/usr/share/nginx/html",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            },
            {
                "Type": "bind",
                "Source": "/usr/local/nginx/log",
                "Destination": "/var/log/nginx",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            },
            {
                "Type": "bind",
                "Source": "/usr/local/nginx/cert",
                "Destination": "/etc/nginx/cert",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            },
            {
                "Type": "bind",
                "Source": "/usr/local/nginx/conf/nginx.conf",
                "Destination": "/etc/nginx/nginx.conf",
                "Mode": "",
                "RW": true,
                "Propagation": "rprivate"
            }
        ],

  5. 前端部署

(1)修改配置文件

修改前端工程 vue.config.js 文件,target修改为 云服务器 地址

(2)前台工程打包 

# 构建生产环境
npm run build:prod

打好包之后前端工程目录下会出现一个dist文件夹:

 (3)上传dist包

将dist包上传至云服务器宿主机 /usr/local/nginx/html 目录下:

(4)编辑nginx配置文件

修改 宿主机 /usr/local/nginx/conf 目录下的 nginx.conf文件:

[root@zy-host conf]# pwd
/usr/local/nginx/conf
[root@zy-host conf]# vim nginx.conf 

修改后的文件内容如下:

[root@zy-host conf]# vim nginx.conf 
[root@zy-host conf]# cat nginx.conf 

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
    
    server {
	listen 80;
	server_name 39.107.232.89
	charset utf-8;
	
	location / {
	    root /usr/share/nginx/html/dist; #前端工程存放路径,注意这里的路径是容器内的,不是宿主机的
	    try_files $uri $uri/ /index.html;
	    index index.html index.htm;
	}
	location /prod-api/ {
	    proxy_set_header Host $http_host;
	    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_pass http://39.107.232.89:8080/; # 后端项目的发布地址加端口
	}
    }
}

(4)重启nginx容器

需要重启nginx容器之后,修改的配置文件内容才会同步过去。

[root@zy-host html]# docker restart zy_nginx

(5)访问测试

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/146182.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《WebGL编程指南》学习笔记(更新中)

《WebGL编程指南》学习笔记前言1.第一章 WebGL概述1.1 WebGL优势1.2 WebGL起源1.3 WebGL程序结构2.第二章 WebGL入门2.1 了解canvas2.1.1 使用canvas绘制一个长方形2.2 第一个WebGL程序(清除画布)2.3 绘制一个点(版本1——了解着色器&#xf…

k8s之job和cronjob

写在前面 本文一起看下使用k8s来进行作业和定时作业。 1:k8s的业务类型 如果是按照业务类型来划分的话,可以分为离线业务和在线业务,如下: 在线业务:容器启动之后就一直不退出的业务,如Nginx 离线业务&…

XSS-Game 通关教程,XSS-Game level1-18,XSS靶场通关教程

​ 「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「专栏简介」: 此文章已录入专栏 靶场通关教程 XSS-GameXSS-Game level1XSS-Game level2XSS-Game level3XSS-Game level4XSS-…

【QT开发笔记-基础篇】| 第五章 绘图QPainter | 5.15 绘制温度曲线

本节对应的视频讲解:B_站_视_频 https://www.bilibili.com/video/BV1L24y1Q7hc 前面已经讲解了 QPainter 绘图的基本使用 其中包括: 绘制图形 点、线、矩形、圆角矩形、椭圆、圆、圆弧、饼图、弦图、多段线、多边形、路径、文本、图片 画笔设置 线宽…

crawlergo联动xray漏洞挖掘

SRC漏洞挖掘 简介 SRC漏洞平台:安全应急响应中心(SRC, Security Response Center),是企业用于对外接收来自用户发现并报告的产品安全漏洞的站点。说白了,就是连接白帽子和企业的平台,你去合法提交漏洞给他…

研讨会回顾 | 中国企业在软件自动化测试方面的实践现状、挑战及趋势探讨

2022年12月6日,龙智与软件测试自动化“领导者”SmartBear联合举办了主题为“如何通过自动化测试实现降本、增效与提质”的在线研讨会。 此次研讨会中,龙智技术总监李毅为大家分享中国企业在质量和测试中面临的挑战,以及自动化测试实践的现状与…

关于 Serverless 应用架构对企业价值的一些思考

作者:寒斜 前言 对于企业方而言,最关心的核心诉求就是如何能获取更多的营收,更高的利润,通俗点说就是如何赚更多的钱;企业赚钱的方式主要是通过出售企业服务,当用户购买更多的企业服务,企业赚…

【Linux】vim的基本操作

这里写目录标题一、vim编辑器1、基本概念2、基本操作二、vim指令集1、命令模式命令集2、底行模式命令集一、vim编辑器 1、基本概念 vi和vim都是多模式的编辑器,vim是vi的升级版本,并且兼容vi的所以指令。 vim有多种模式,本文讲解常用的3种模…

c++入门(命名空间+缺省参数+函数重载)

文章目录1. 命名空间1. c语言的两个域2. 命名空间的使用1.类型问题命名空间A和B的实现2. 变量问题3.三种访问方法1.指定命名空间访问2. 全局展开using namespace std 的含义尽量不使用using namespace std的原因3. 部分展开2. 缺省参数(备胎)1. 概念2.全缺省参数3.半缺省参数错…

2023/1/6 Vue学习笔记-3-生命周期

1 引出生命周期 透明度变化的案例&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&qu…

HTML实现动态旋转字母背景

演示 css html, body {background: radial-gradient(#181818, #000000);margin: 0;padding: 0;border: 0;-ms-overflow-style: none;}::-webkit-scrollbar {width: 0.5em;height: 0.5em;background-color: #c7c7c7;}/*定义滚动条轨道 内阴影圆角*/::-webkit-scrollbar-track {…

数据分析之数据相关性分析

相关性分析 作者&#xff1a;学者科技 时间&#xff1a;2022/12/25 应用场景 发现数据之间的关联性 比如 啤酒 和 尿布 删减统计指标 比如 城市里的温度传感器&#xff0c;相关性强的可以去掉以节约成本 挑选回归建模的变量 选择与因变量相关性高的自变量自变量间如果有高度…

数字漫画行业繁花似锦,国漫扎根本土文化“向外生长”?

2022年&#xff0c;一半是寒冰&#xff0c;一半是烈火。这一年&#xff0c;我们遇到了消费互联网的降温&#xff0c;包括互联网大厂降本增效潮到来&#xff0c;电商大促节不再公布销售额。同样&#xff0c;我们也见证了经济迸发的新活力&#xff0c;比如元宇宙、虚拟人掀起的热…

配置Domino解决CORS跨域问题

大家好&#xff0c;才是真的好。 前面我们讲过几篇Web应用开发的简单示例&#xff0c;主要功能是同一个站点的同一个应用里里面查看和搜索文档。如果对数据进行操作&#xff0c;可能多少会遇到网页跨域访问问题。 跨域&#xff0c;简单来说&#xff0c;就是浏览器对javascrip…

【知识图谱导论-浙大】第二章:知识图谱的表示

前文&#xff1a; 【知识图谱导论-浙大】第一章&#xff1a;知识图谱概论 本节内容的视频讲解如下&#xff1a; 【知识图谱理论】&#xff08;浙大2022知识图谱课程&#xff09;第二讲-知识图谱的表示什么是知识表示 简而言之&#xff0c;知识表示&#xff08;Knowledge Rep…

【HTML】纯CSS居然能做出这种效果,一款宝藏网页分享(超详细讲解 | 附源码)

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后…

【ASP.NET】家乡网站设计作业「历史」「人文」「自然」「美食」「高中」

文章目录作业描述结果展示代码MasterPage.master(母版页)首页历史页人文页美食页景观页高中页完整资源链接上学期其中ASP.NET网站设计老师布置的作业&#xff0c;在此记录一下&#xff1b;作业描述 为自己的家乡设计一个网站&#xff1a; 要求&#xff1a; 1.网站主要是展示和…

TYPE-C和USB-C接口有什么区别?

USB-C接口全称为USB Type-C&#xff0c;属于USB 3.0下一代接口&#xff0c;其亮点在于更加纤薄的设计、更快的传输速度&#xff08;最高可达10Gbps&#xff09;、更强的电力传输&#xff08;最高100W&#xff09;&#xff0c;此外USB-C接口还支持双面插入&#xff0c;正反面随便…

【NCC】之三:FFT(DFT)加速协方差的计算

FFT加速计算两个图的协方差文章目录<center> FFT加速计算两个图的协方差1. 傅里叶变换和卷积1.1 卷积定理1.2 空域卷积和频域乘积的复杂度2. opencv中的DFT3. FFT用于NCC4. 测试结果部分代码1. 傅里叶变换和卷积 1.1 卷积定理 图片来源 在空域上的卷积就是上面的动图所展…

再学C语言27:输入和输出——缓冲区

I/O函数&#xff1a;输入/输出函数 I/O函数将信息传输至程序并从程序中传出信息&#xff0c;如printf()、scanf()、getchar()、putchar()等函数 getchar()和putchar()每次输入/输出一个字符 示例代码&#xff1a; #include <stdio.h> int main(void) {char c;// 输入回…