linux下前端vue+后端vue+mysql+redis+springboot+nginx的docker部署记录（nginx下多个vue前端）

妖狐艹你老母 2021-09-07 06:05 352阅读 0赞

## 1.服务器 ##

推荐购买腾讯云的学生优惠25岁以下免验证，我购买的是轻量应用服务器，5M宽度每月1000G不香吗。  
系统是CentOS 7.6。购买好服务器并通过Xshell或其他软件连接好，就是前期的准备了（当然除了项目，自备）。

## 2.安装docker ##

#安装
    yum install docker
    #检验安装是否成功
    [root@localhost opt]# docker --version
    Docker version 1.13.1, build 7f2769b/1.13.1
    #启动
    systemctl start docker

**配置镜像加速**  
自行百度阿里云镜像加速配置，获取自己的加速器

vim /etc/docker/daemon.json
    
    # 添加如下内容，具体地址自己申请咯
    { 
      "registry-mirrors": ["https://*******.aliyuncs.com"]
    }
    
    # 重启服务
    systemctl daemon-reload
    systemctl restart docker

## 3.安装docker-compose ##

1.换源：
    curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
    
    2.更改权限：chmod +x /usr/local/bin/docker-compose
    
    3.查看版本：docker-compose --version

## 4.编写Dockerfile，docker-compose.yml文件 ##

因为我们的项目需要成为docker的镜像，所以我们必须先编写Dockerfile文件构建我们的项目镜像然后进行编排，Dockerfile文件可以帮我们进行构建。

Dockerfile

FROM java:8
    EXPOSE 81
    ADD vueblog.jar app.jar
    RUN bash -c 'touch /app.jar'
    ENTRYPOINT ["java", "-jar", "/app.jar"]

docker-compose.yml  
我们需要用到的软件与服务分别有nginx、mysql、redis、还有我们的springboot项目，所以编写如下：

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=****
      redis:
        image: redis:latest
      vueblog:
        image: vueblog:latest
        build: . # 表示以当前目录下的Dockerfile开始构建镜像
        ports:
          - 81:81
        depends_on: # 依赖与mysql、redis，其实可以不填，默认已经表示可以
          - mysql
          - redis

根据上方的服务名修改springboot配置文件中的地址  
redis  
![在这里插入图片描述][20210128160913770.png]  
mysql  
![在这里插入图片描述][20210128160929485.png]

## 5.准备好nginx的挂载目录和配置，上传vue ##

docker-compose.yml中已经提到，

宿主机的挂载目录：/root/nginx/html

挂载配置：/root/nginx/nginx.conf

所以我们在root目录下新建nginx目录，并进入nginx目录下新建html目录和一个nginx.conf配置文件。  
并将两个vue项目打包（**记得替换请求路径**），分别在html下新建admin和front文件夹存放

然后对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/front;
                try_files $uri $uri/ /index.html last; # 别忘了这个哈
                index  index.html index.htm;
            }
    
           location /admin { 
    	    alias /usr/share/nginx/html/admin;
    	    expires  1d;
    	    index index.html;
    	    autoindex on;
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html { 
                root   html;
            }
        }
    }

## 6.部署后端 ##

一切准备就绪之后，我们就开始编排部署了哈。

首先本地打包vueblog项目，vueblog.jar，并上传到linux中，同时docker-compose.yml、Dockerfile也上传到同一目录下。如图所示：  
![在这里插入图片描述][20210128161727601.png]

然后我们执行一下编排命令:

cd ~
    docker-compose up -d

其中-d表示后台服务形式启动  
然后我们稍等片刻，特别是开始Building vueblog的时候可能时间有点长，耐心等待即可！  
最后提示如下：  
![在这里插入图片描述][20210128111018508.png]  
此时其实你已经可以访问前端页面了，但是数据库还没建，所以你还需要远程链接数据库，并创建对应表。然后再次输入

docker-compose up -d

重新启动springboot（先前没有数据，其实是启动失败了的）

[远程连接docker的mysql容器][docker_mysql]

[nginx同时部署多个vue项目][docker_mysql]

**即使如此当访问admin后台时还是可能无法加载，我看了报错是因为部分js或css没找到，然后一看路径发现都少了admin于是我用文件连接工具直接在index.html文件中添加了admin,其实也不多就7处（就我的项目而言）**  
![在这里插入图片描述][2021012816334961.png]  
其实也可以在配置文件中添加配置自动生成，但是我怕出错，就直接改了。其实我已经重置两次系统部署项目了！  
[配置实现][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70 1]  
**我只改了文件的引入，所以后台路由并不会多出admin，域名/admin只是在进入后台页面时有效**

[20210128160913770.png]: /images/20210813/4bdf2afeea35428bbb5bfeaff9d02427.png
[20210128160929485.png]: /images/20210813/c2acca024dbc468b82919e224df49fb0.png
[20210128161727601.png]: /images/20210813/9f45a4197b5941bd920a6ee262aab1d1.png
[20210128111018508.png]: /images/20210813/b765cbda80134d108a0764cd1c887cac.png
[docker_mysql]: https://yearns.blog.csdn.net/article/details/88531973?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control
[2021012816334961.png]: /images/20210813/60fdde0268f040d58925eada5ac5cb4e.png
[Link 1]: https://blog.csdn.net/weixin_38023551/article/details/88640939?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70]: /images/20210813/617da68e38764fafb146979a21125416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70 1]: /images/20210813/3477d79b33334697b6f53464f3b2a283.png