将springboot、vue前后端分离的项目部署到docker上

2021-05-27 19:57:19 阅读：193 来源： 互联网

标签：vue springboot jar client nginx html music docker

继上篇项目，记录一下在学习部署项目时的过程。
首先，将前端vue项目进行打包：
打包操作如下：在项目对应目录下输入npm run build
在这里插入图片描述
打包完成后，项目目录中会多了一个dist文件夹，如下：

后端部分，编写DockerFile文件和docker-compose.yml文件。
打开IDEA，创建DockerFile文件，其内容如下：

FROM java:8

EXPOSE 8888

ADD music_sys-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'

ENTRYPOINT ["java", "-jar", "/app.jar"]

然后编写docker-compose.yml文件，内容如下：

version: '3'

services:
  nginx_client: # 服务名称
    image: nginx:latest
    ports:
      - 80:80
    volumes:
      - /root/music/nginx_client/html:/usr/share/nginx/html
      - /root/music/nginx_client/nginx.conf:/etc/nginx/nginx.conf
    privileged: true  # 这个必须要，解决nginx文件调用的权限问题
  nginx_manage: # 服务名称
    image: nginx:latest
    ports:
      - 81:81
    volumes:
      - /root/music/nginx_manage/html:/usr/share/nginx/html
      - /root/music/nginx_manage/nginx.conf:/etc/nginx/nginx.conf
    privileged: true  # 这个必须要，解决nginx文件调用的权限问题
  mysql:
    image: mysql:8.0.17
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=root
  music_sys:
    image: music_sys:latest
    build:
      context: .
      dockerfile: DockerFile
    ports:
      - 8888:8888
    volumes:
      - /usr/local/ueditorUpload:/usr/local/ueditorUpload
    depends_on:
      - mysql

然后将后端项目打成jar包，打包过程如下：
在这里插入图片描述
等待打包完成后，可以在target中看到一个.jar文件，如下图所示：

接着，连上服务器，根据docker-compose.yml中的挂着路径，创建相应的文件路径

然后将刚刚写的DockerFile和docker-compose.yml文件以及打好的jar包拖到music文件夹下
在这里插入图片描述
然后进入nginx_client文件夹，创建html文件夹和编写nginx.conf，nginx.conf内容如下：

user root;
worker_processes  1;

events {
    worker_connections  1024;
}


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


    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root  /usr/share/nginx/html/client;
            try_files $uri $uri/ /client/index.html last;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

再接着将前端打包好的dist文件夹传到html目录下并改名为client，改成client是为了跟nginx.conf中的文件路径相对于，也可以不改。
在这里插入图片描述

后端管理员vue项目同理。
这些文件部署好后，接着在music目录下执行docker-compose up -d 启动项目，在这个过程中，会自动拉取相应的镜像，需要耐心等待一段时间。等待拉取完成后，可以看到四个容器都已经启动。（这里需要注意，如果还没下载docker和docker-compose的，需要先下载）
在这里插入图片描述
接着，需要去Navicat连接上docker容器中的mysql数据库，并创建到数据，然后将数据表导入创建好。

这个时候，就可以去浏览器访问项目了，首先，输入服务器地址：192.168.18.22，访问默认端口为80，所以启动的是client

然后再访问一下81端口：可以看到访问成功。
在这里插入图片描述
部署到此结束啦，有更简单方法的小伙伴可以在下面留言呀，共同学习共同进步。

标签：vue,springboot,jar,client,nginx,html,music,docker
来源： https://blog.csdn.net/qq_43618698/article/details/117335802

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

将springboot、vue前后端分离的项目部署到docker上