Docker+Nginx部署SpringBoot+Vue前后端分离项目

Docker+Nginx部署SpringBoot+Vue前后端分离项目

一、安装docker

1.卸载旧版本

yum remove docker \

 					docker-client \

 					docker-client-latest \

 					docker-common \

				    docker-latest \

				    docker-latest-logrotate \

					docker-logrotate \

 								docker-engine

2.需要的安装包

yum install -y yum-utils

3.设置镜像的仓库(推荐使用国内阿里云)

yum-config-manager \ --add-repo \ https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

4.更新yum软件索引包

yum makecache fast

5.安装docker相关的docker-ce 社区版

yum install docker-ce docker-ce-cli containerd.io *#* 这里我们使用社区版即可

6.启动docker

systemctl start docker

7.查看是否安装成功

docker version

二、安装docker-compose(两种方法随意挑选)

1.直接在线安装

sudo curl -L "https://github.com/docker/compose/releases/download/1.26.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose 
#远程连接安装 可能访问速度很慢 慢的话使用第二种方式

sudo chmod +x /usr/local/bin/docker-compose  #添加文件权限

docker-compose -v #检验是否安装成功

2.官网下载docker-compose-Linux-x86_64

下载地址 https://github.com/docker/compose/releases

将下载的文件上传到服务器上，再将文件移至/usr/local/bin/docker-compose

mv docker-compose-Linux-x86_64 /usr/local/bin/docker-compose

添加权限

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

测试是否安装成功

docker-compose -v

三、编写dockerfile文件

FROM java:8 #jdk8

EXPOSE 8081 #后端SpringBoot暴露的端口

ADD vueblog-0.0.1-SNAPSHOT.jar app.jar #添加SpringBoot打包后的jar包并命名为app.jar
RUN bash -c 'touch /app.jar'

ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]
#指定这个容器启动的时候要运行的命令 
#spring.profiles.active=pro指定运行的环境

四、编写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:
      - MYSQL_ROOT_PASSWORD=admin
  redis:
    image: redis:latest
  vueblog:
    image: vueblog:latest
    build: .	#以当前目录下的Dockerfile开始构建镜像
    ports:
    - 8081:8081
    depends_on:
      - mysql
      - redis

五、打包SpringBoot项目

1.后端项目大概介绍：

我后端项目架构：springboot+mysql+redis+jwt+shiro+mybatis-plus

三个yam文件

application.yml

mybatis-plus:
  mapper-locations: classpath*:/mapper/**Mapper.xml
server:
  port: 8081
markerhub:
  jwt:
    # 加密密匙
    secret: f4e2e52034348f86b67cde581c0f9eb5
    # token有效时长，7天，单位秒
    expire: 604800
    header: Authorization
spring:
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
    #   返回时间戳
    serialization:
      #使用数值timestamp表示日期
      write-dates-as-timestamps: false

application-default.yml

# 开发环境

# DataSource Config
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/wenblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
shiro-redis:
  enabled: true
  redis-manager:
    host: 127.0.0.1:6379

application-pro.yml

# 上线环境
# DataSource Config
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://mysql:3306/wenblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: admin
shiro-redis:
  enabled: true
  redis-manager:
    host: redis:6379
    
# 这里的mysql和redis的ip地址在docker-compose文件中可以自动匹配

2.开始打包

打包之后项目路径下会出现一个target文件夹

这个jar包名在上面dockerfile文件里的项目名是一至的

六、打包Vue项目

1.在项目路径下新建vue.config.js文件

2.更改axios.js文件

3.开始打包

在命令行输入：npm run build 打包成功之后项目路径下同样会有一个dist的文件夹， dist文件夹里的内容就是项目打包之后的所有静态资源文件

七、准备Nginx的挂载目录和配置

docker-compose.yml已经提到：

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

• 宿主机的挂载配置文件：/root/nginx/nginx.conf

  所以我们需要在服务器上的root目录下新建nginx目录，并进入nginx目录新建一个html目录和一个nginx.conf配置文件

1.新建目录及配置文件

所以我们需要在服务器上的root目录下新建nginx目录，并进入nginx目录新建一个html目录和一个nginx.conf配置文件

2.进行编写

• 将Vue打包之后的dist文件夹下的文件全部上传到/root/nginc/html/目录下(上传前端项目到nginx里)

• 编写nginx.conf文件

  nginx.cong

  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; #这个必须写 否则报404
  			try_files $uri $uri/ /index.html last; #这个必须写 否则报404
              index  index.html index.htm;
          }
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
         
              root   html;
          }
      }
  }
  

八、上传后端项目

前面nginx配置已经顺便把Vue项目打包之后的静态资源文件全部上传到nginx里了

接下来就是将SpringBoot打包之后的jar包上传到/root下就行了

九、上传docker相关文件

将前面编写好的Dockerfile文件和docker-compose.yml文件上传到/root目录下

/root目录如下：

十、开启防火墙

防火墙相关LInux指令

查看防火墙规则

firewall-cmd --list-all    # 查看全部信息
firewall-cmd --list-ports  # 只看端口信息

开启端口

开端口命令：firewall-cmd --zone=public --add-port=80/tcp --permanent
重启防火墙：systemctl restart firewalld.service

命令含义：
--zone #作用域
--add-port=80/tcp  #添加端口，格式为：端口/通讯协议
--permanent   #永久生效，没有此参数重启后失效

分别将8081 3306 6379 80端口开启 如果是阿里云服务器还要将阿里云里的安全组对应端口打开

十一、docker-compose编排服务

cd /root	#进入/root目录
docker-compose up -d	#开始编排	其中-d表示后台服务形式启动

docker ps	#查看容器

最后用Navicat或别的连接数据库软件连接我们服务器上的mysql，再将sql文件建库建表

访问一下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEhti1jQ-1632890959239)(C:\Users\Yu\Desktop\10.png)]

，没有此参数重启后失效

分别将8081 3306 6379 80端口开启 如果是阿里云服务器还要将阿里云里的安全组对应端口打开

### 十一、docker-compose编排服务

```shell
cd /root	#进入/root目录
docker-compose up -d	#开始编排	其中-d表示后台服务形式启动

docker ps	#查看容器

最后用Navicat或别的连接数据库软件连接我们服务器上的mysql，再将sql文件建库建表

访问一下

大功告成！