文章目录
前言
完成了客户的一个前后端分离项目,要求部署到客户电脑上去展示,那肯定不能直接把代码弄上去跑呀~~~,于是我就想把他们都打包部署到本地的docker容器里面,方便运行和访问,so,以下内容就详细介绍了如何将前后端分离项目部署到本地的docker容器运行。
一、安装Docker Desktop
- 安装链接:docker desktop
- 点击Download for windows 安装
3.下载成功后双击Docker Desktop Installer.exe进行安装,安装成功后点击close关闭
4.双击桌面图标进入docker desktop,如果出现以下报错,表示WSL版本太低,需要更新
5.安装最新的更新包
用浏览器打开网址:旧版 WSL 的手动安装步骤 | Microsoft Learn 点击下载
6.下载完成后点击安装即可,然后再重启docker desktop,这就安装完成了
7.检验是否安装成功
8.docker设置国内镜像,右击托盘图标选择settings,选择Docker Engine菜单,增加国内镜像地址,增加私有仓库地址:
"registry-mirrors": ["https://registry.docker-cn.com","http://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn"]
{"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},"experimental": false,"features":{"buildkit": true },"registry-mirrors": ["https://registry.docker-cn.com","http://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn"]}
9.添加成功后重新启动docker desktop,现在我们尝试拉取nginx镜像,默认最新版本镜像
现在我们的docker里面就多了一个镜像
二、后端项目打包及部署--springboot项目
1.修改IP地址
因为要部署到docker中,需要将连接MYSQL和Redis数据库的IP地址改为本地地址,cmd输入ipconfig获取IP地址
将host改为上面的IPV4地址,mysql和redis都要改
2.项目打包
打包完成后将target目录下的jar包复制到新的文件夹下,然后在此文件夹下新建Dockerfile文件
Dockerfile文件新增以下内容
## AdoptOpenJDK 停止发布 OpenJDK 二进制,而 Eclipse Temurin 是它的延伸,提供更好的稳定性
FROM eclipse-temurin:8-jre
##FROM openjdk:8ADD yudao-server.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]## 暴露后端项目的 48080 端口
EXPOSE 48080
然后进入目录执行打包命令(前提要启动docker)admin-server是镜像名称
docker build -f Dockerfile -t admin-server .
注意末尾的空格加一个小点
完成后就可以在docker desktop看到镜像
最后运行我们的镜像文件
docker run -p 48080:48080 --name admin-server
如果报错连接不到MySQL数据库或者redis拒绝连接
- mysql连接问题:因为mysql只允许通过localhost或者127.0.0.1连接,需要修改mysql配置
- 在navacat修改,将user为root的Host修改为%
3.redis问题:修改配置文件redis-windows.conf
注释:bind 127.0.0.1
将protected-mode yes改为protected-mode no
现在后端就可以正常启动啦
二、前端项目打包及部署--vue项目
1.添加文件
由于选用Nginx,所以前端需增加Nginx的相关配置文件,在项目根目录下新建 nginx.conf配置文件。
内容如下:
server {listen 80 default_server;server_name localhost; ## 重要!!!修改成你的外网 IP/域名gzip on;gzip_min_length 1k; # 设置允许压缩的页面最小字节数gzip_buffers 4 16k; # 用来存储 gzip 的压缩结果gzip_http_version 1.1; # 识别 HTTP 协议版本gzip_comp_level 2; # 设置 gzip 的压缩比 1-9。1 压缩比最小但最快,而 9 相反gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # 指定压缩类型gzip_proxied any; # 无论后端服务器的 headers 头返回什么信息,都无条件启用压缩location / { ## 前端项目root /usr/share/nginx/html/;index index.html index.htm;try_files $uri $uri/ /index.html;}location /prod-api/ { ## 后端项目 - 管理后台proxy_pass http://192.168.0.46:48080/; ## 重要!!!proxy_pass 需要设置为后端项目所在服务器的 IPproxy_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;}
}
再创建Dockerfile文件
FROM nginx:latestCOPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.confEXPOSE 80
2.打包
打包vue项目,本文使用npm run build命令进行项目的打包。
打包完成后,会生成一个dist目录,可以新建文件夹,将三个文件放在一起
构建镜像:docker build -t front-server .
启动:
docker run -p 80:80 -d --name front-server