SpringBoot+Vue+Nginx+Docker+Compose部署基础实现

基础实现步骤

1. 首先有一个简易的服务器（我是用的阿里云的ECS）
   注意：使用云服务器一定要将使用到的端口加入安全组，使用虚拟机的话一定要关闭防火墙！
   
   
2. 我使用的工具：FinalShell
3. 安装docker

   #安装docker
   yum install docker
   #检查是否安装成功
   docker --version
   #启动docker
   systemctl start docker

4. 安装docker-compose

   #安装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

5. 在springBoot项目中编写Dockerfile文件

   #依赖jdk8环境的环境
   FROM openjdk:8
    
   #对外暴露端口
   EXPOSE 6666
   #复制wlsyxh.jar到docker容器中并命名为app.jar
   ADD wlsyxh.jar app.jar
   #执行命令
   RUN bash -c 'touch /app.jar'
   #启动命令，并指定启动的环境
   ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=test"]

   

6. 在springBoot项目中编写docker-compose.yml文件

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

7. 修改springBoot项目的配置文件【将配置文件中使用的mysql、redis、minio等的地址改成docker-compose文件中的服务名称，以及数据库的登录密码】                                                                                  
   
8. 在桌面建一个文件夹
   ①将刚刚添加的Dockerfile、docker-compose.yml文件复制到文件夹中
   ②将springBoot项目打包，并将打好的的jar包复制到文件夹中
   ③导出数据库的sql文件，放入到文件夹中
   
9. 在FinalShell工具中在宿主机的root目录下新建一个文件夹，并将docker-compose.yml、Dockerfile、jar包拖进这个文件夹
   
10. 在宿主机的/root/nginx目录下创建html文件夹和nginx.conf文件
    
11. 编写nginx.conf文件

    user  root;#解决访问ftp服务器文件403的问题
    worker_processes  1;
    events {
      worker_connections  1024;
    }
    http {
      include       mime.types;
      default_type  application/octet-stream;
      sendfile        on;
      keepalive_timeout  65;
      server {
          listen       80;
          charset      utf-8;
          server_name  xxx.xxx.xxx.xxx; #宿主机地址
          location / {
              root   /usr/share/nginx/html/dist;#前端项目打包后存放的地址
              try_files $uri $uri/ /dist/index.html;
              index  index.html index.htm;
              error_page 405 =200  $request_uri;
          }
          location /api {
              proxy_pass http://xxx.xxx.xxx.xxx:6666;
              proxy_set_header  Host $host;
              proxy_redirect default;
    	  	rewrite ^/api/(.*) /$1 break;
          }
          location /ftp/ {
          	alias /var/local/root/webpages/;#ftp服务器中的文件映射nginx中的位置【前提是要在nginx的挂载那里要挂载该目录】    
          	autoindex on;
          }
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
          }
      }
    }

12. 前端项目打包
    vue项目使用npm run build 或者使用packeage.json文件中的命令
    
    
    将打包好的dist文件夹下的所有文件复制到宿主机中创建的html文件夹中
    
13. 部署项目
    输入编排命令安装和启动服务

    docker-compose up -d

    启动成功后就可以用数据库工具去连接远程的mysql服务，连接成功后并创建对应的数据库，并运行桌面文件夹中的sql文件导入数据和结构。
    此时的后端项目【jar包】和nginx都已经启动成功了，可以使用以下命令查看docker中正在运行的容器信息docker ps
    
    至此，我们docker+nginx的前后端部署就完成了！
    在网站中输入服务器的ip就可以访问了