Docker+Nginx部署前后端分离项目(SpringBoot+Vue)的详细教程

逃离我推掉我的手 2023-10-07 20:47 10阅读 0赞

教学讲解视频：[视频地址][Link 1]

### 一.安装docker ###

yum install docker

检查是否安装成功

docker --version

启动Docker

systemctl start docker

### 二、安装docker-compose ###

sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

安装完后赋予可执行权限

sudo chmod +x /usr/local/bin/docker-compose

检查是否安装成功

docker-compose --version

### 三、编写Dockfile文件 ###

#依赖jdk8环境
    FROM openjdk:8
    
    #对外暴露8085
    EXPOSE 8085
    #复制server-1.0-SNAPSHOT到docker容器中并命名为app.jar
    ADD server-1.0-SNAPSHOT.jar app.jar
    #执行命令
    RUN bash -c 'touch /app.jar'
    ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]

![在这里插入图片描述][91502c40a8d14765854fcce385b1b039.png]

### 四、编写docker-compose.yml文件 ###

version: "3"
    services:
      nginx: # 服务名称，用户自定义
        image: nginx:latest  # 镜像版本
        ports:
          - 80:80  # 暴露端口
        volumes: # 挂载
          - /root/nginx/html:/usr/share/nginx/html
          - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
        privileged: true # 这个必须要，解决nginx的文件调用的权限问题
      mysql:
        image: mysql:5.7.27
        ports:
          - 3306:3306
        environment: # 指定用户root的密码
          - MYSQL_ROOT_PASSWORD=admin
      redis:
        image: redis:latest
      server:
        image: server:latest
        build: . # 表示以当前目录下的Dockerfile开始构建镜像
        ports:
          - 8085:8085
        depends_on: # 依赖与mysql、redis，其实可以不填，默认已经表示可以
          - mysql
          - redis

![在这里插入图片描述][2cdd28326a2d42b9b5af79516bff6575.png]  
配置文件中MySQL和Redis的IP地址要改成docker-compose.yml文件中的服务名称。  
![在这里插入图片描述][045648faa61b4dff9d0704ca6f4e359a.png]

### 五、编写Nginx的配置文件nginx.conf ###

现在宿主机创建html目录和nginx.conf文件  
![在这里插入图片描述][00bfcd6e405641138749637cf7336a66.png]  
编写配置文件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  101.132.143.220;
          location / {
        
              root   /usr/share/nginx/html;
              try_files $uri $uri/ /index.html;
              index  index.html index.htm;
          }
    	  location /api/ {
        
    		  proxy_pass http://101.132.143.220:8085;
    		  proxy_redirect default;
    		  rewrite ^/api/(.*) /$1 break;
    	  }
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
        
              root   html;
          }
      }
    }

### 六、部署前端 ###

前端Vue项目打包

npm run build

前端打完包会出现个dist目录文件  
![在这里插入图片描述][ba4adc34e006446abf1f2b39c4f643e5.png]  
**把dist目录下的所有文件放到我们刚才创建的html目录下**  
![在这里插入图片描述][9c0561766784496daeb2028de0ae2ab5.png]

### 七、部署后端 ###

先将后端打成jar包，然后上传到云服务器上，同时Dockfile文件和docker-compose.yml文件也要上传到云服务器上。  
![在这里插入图片描述][0060fde1287b429ba5aeb78760c37a40.png]  
输入命令编排启动服务

docker-compose up -d

启动完后，我们可以使用Navicat远程连接云服务器的MySQL数据库，进行SQL文件的导入了。  
![在这里插入图片描述][d4c693e2939e4121b8957f45ae38e2dc.png]

至此，我们的Docker+Nginx的前后端部署就完成辣！

**PS：云服务器上部署记得要把有用到的端口加入安全组。虚拟机上部署要把防火墙关闭哦！**

[Link 1]: https://www.bilibili.com/video/BV1yg411z7gi
[91502c40a8d14765854fcce385b1b039.png]: https://img-blog.csdnimg.cn/91502c40a8d14765854fcce385b1b039.png
[2cdd28326a2d42b9b5af79516bff6575.png]: https://img-blog.csdnimg.cn/2cdd28326a2d42b9b5af79516bff6575.png
[045648faa61b4dff9d0704ca6f4e359a.png]: https://img-blog.csdnimg.cn/045648faa61b4dff9d0704ca6f4e359a.png
[00bfcd6e405641138749637cf7336a66.png]: https://img-blog.csdnimg.cn/00bfcd6e405641138749637cf7336a66.png
[ba4adc34e006446abf1f2b39c4f643e5.png]: https://img-blog.csdnimg.cn/ba4adc34e006446abf1f2b39c4f643e5.png
[9c0561766784496daeb2028de0ae2ab5.png]: https://img-blog.csdnimg.cn/9c0561766784496daeb2028de0ae2ab5.png
[0060fde1287b429ba5aeb78760c37a40.png]: https://img-blog.csdnimg.cn/0060fde1287b429ba5aeb78760c37a40.png
[d4c693e2939e4121b8957f45ae38e2dc.png]: https://img-blog.csdnimg.cn/d4c693e2939e4121b8957f45ae38e2dc.png