如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问

文章目录


前言

完成了客户的一个前后端分离项目,要求部署到客户电脑上去展示,那肯定不能直接把代码弄上去跑呀~~~,于是我就想把他们都打包部署到本地的docker容器里面,方便运行和访问,so,以下内容就详细介绍了如何将前后端分离项目部署到本地的docker容器运行。


一、安装Docker Desktop

  1. 安装链接:docker desktop
  2. 点击Download for windows 安装

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第1张图片

    3.下载成功后双击Docker Desktop Installer.exe进行安装,安装成功后点击close关闭

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第2张图片

  4.双击桌面图标进入docker desktop,如果出现以下报错,表示WSL版本太低,需要更新

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第3张图片

5.安装最新的更新包

 用浏览器打开网址:旧版 WSL 的手动安装步骤 | Microsoft Learn   点击下载

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第4张图片

6.下载完成后点击安装即可,然后再重启docker desktop,这就安装完成了

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第5张图片

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 Desktop容器运行并且访问_第6张图片

 现在我们的docker里面就多了一个镜像

二、后端项目打包及部署--springboot项目

1.修改IP地址

因为要部署到docker中,需要将连接MYSQL和Redis数据库的IP地址改为本地地址,cmd输入ipconfig获取IP地址

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第7张图片

将host改为上面的IPV4地址,mysql和redis都要改

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第8张图片

2.项目打包

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第9张图片

打包完成后将target目录下的jar包复制到新的文件夹下,然后在此文件夹下新建Dockerfile文件

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第10张图片

Dockerfile文件新增以下内容

## AdoptOpenJDK 停止发布 OpenJDK 二进制,而 Eclipse Temurin 是它的延伸,提供更好的稳定性
FROM eclipse-temurin:8-jre
##FROM openjdk:8

ADD 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拒绝连接

  1. mysql连接问题:因为mysql只允许通过localhost或者127.0.0.1连接,需要修改mysql配置
  2. 在navacat修改,将user为root的Host修改为%

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第11张图片

   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 需要设置为后端项目所在服务器的 IP
        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;
    }
}

再创建Dockerfile文件

FROM nginx:latest

COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

2.打包

打包vue项目,本文使用npm run build命令进行项目的打包。
打包完成后,会生成一个dist目录,可以新建文件夹,将三个文件放在一起

如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问_第12张图片

构建镜像:docker build -t front-server .

启动:

docker run -p 80:80 -d   --name front-server

你可能感兴趣的:(docker,容器,运维,前端,java,vue.js)