ubantu20.04服务器使用docker以及docker-compose编排部署前后端分离个人博客项目(springboot+vue+mysql+redis)

ubantu20.04使用docker部署前后端分离个人博客项目(springboot+vue+mysql+redis)

前言

本博客是基于springboot+vue+jwt+redis+mysql实现,参考码神大佬的教程一步搭建的,不过最后部署的网站还没有做文章列表缓存处理的bug解决,后期会进行重新更新部署。目前个人博客网站域名还在备案阶段。
部署完成效果图:
在这里插入图片描述

部署前准备

  1. 云服务器(我的是阿里云 操作系统:ubantu 20.04 配置:2G 2核)

  2. 阿里云服务器开启端口安全组策略,开放相关的端口
    在这里插入图片描述

  3. xshell/xftp/navicat

正式部署

后端项目修改配置打包

<1> WebMvcConfig修改跨域配置

   @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://个人ip/","null")
                .allowedMethods("POST","GET","PUT","OPTIONS","DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }

<2> resources 新建生产配置文件 application-prod.properties
(docker inspect mysql 或者redis 查看 IPAddress)
在这里插入图片描述

#server
server.port= 8888
spring.application.name=mszlu_blog
# 这个要添加和前端的对应api
spring.mvc.servlet.path=/api
# datasource   docker中mysql内的ip地址
spring.datasource.url=jdbc:mysql://172.17.0.3:3306/blog?useUnicode=true&characterEncoding=UTF-8&serverTimeZone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

#mybatis-plus
#打印日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#标识表的前缀表名
mybatis-plus.global-config.db-config.table-prefix=ms_
#redis的相关配置    docker中redis内的ip地址
spring.redis.host=172.17.0.2
spring.redis.port=6379
# 上传文件总的最大值
spring.servlet.multipart.max-request-size=20MB
# 单个文件的最大值
spring.servlet.multipart.max-file-size=2MB


<3>配置maven相关的打包
blog-api中pom文件添加相关的build插件,不然最后服务器运行jar文件会出现找不到main入口

pom文件添加:

 <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <executable>true</executable>
                </configuration>
            </plugin>
        </plugins>
    </build>

maven打包配置:

在这里插入图片描述
打包在target目录生成jar包,修改名称为blog_api.jar
在这里插入图片描述

前端项目修改配置打包

<1> 修改config文件中 prod.env.js中配置的ip地址

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API:'"http://个人ip/api/"'
}

<2>运行打包命令 npm run build 生成dist文件
在这里插入图片描述

服务器安装配置

<1> 服务器文件目录
在这里插入图片描述
<2>ubantu安装docker 开启docker

sudo apt update
sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

使用下面的 curl 导入源仓库的 GPG key:

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

将 Docker APT 软件源添加到你的系统:

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

安装最新版本

sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io

验证docker启动

sudo systemctl status docker

docker启动和关闭 查看镜像 删除镜像

 systemctl start docker
 systemctl restart  docker
 systemctl stop docker
 docker ps 
 docker ps -a
 docker rm 
 docker rmi

<3>docker直接拉取java mysql nginx redis5.0.3 非常方便!

docker pull nginx
docker pull redis:5.0.3
docker pull java:8
docker pull mysql

<4>mysql数据库相关配置
我程序使用的是mysql8.0最新版本,直接开启即可,省去了mysql5.7的一些权限的配置,虽然我新建了关于mysql的相关目录,但是没有设置对应的一个映射,正常来讲最好实现对应的映射,保证数据文件的安全性,这样即使容器因为异常删除之后也会保存下来原来的数据
docker开启mysql容器

docker run --name mysql8.0 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root -d mysql
--name 设置容器名称
-p 对应端口映射
-e 设置初始化数据库密码,用户是root
-d 设置后台运行
mysql 为镜像的名称

进入mysql内部命令

docker exec -it mysql bash
mysql -uroot -proot
退出bash:ctrl+p+q

navicat连接远程ip数据库导入blog.sql文件(也可以上传sql文件然后source命令导入也可)
在这里插入图片描述
<5>docker 运行redis

docker run -id --name=redis -p 6379:6379 redis:5.0.3

<6>构建dockerfile文件 对应的app镜像
/mnt/docker/app文件夹中导入后端打包好的blog_api.jar
在这里插入图片描述
新建blog_dockerfile文件,写入如下命令
(作者名称自己更改 ./是当前目录 --spring.profiles.active=prod 使用prod配置文件 cmd为运行的命令)

FROM java:8
MAINTAINER mszlu <test@mszlu.com>
ADD ./blog_api.jar /app.jar
CMD java -jar /app.jar --spring.profiles.active=prod

在/mnt/docker/app目录运行命令 成功的话会生成images app镜像 docker images可以查看

docker build -f ./blog_dockerfile -t app .

在这里插入图片描述
<7>导入前端打包好的dist文件,放入/mnt/mszlu/blog文件夹(里面的文件为下图)
在这里插入图片描述
在这里插入图片描述
( 需要把index.html和static文件拿出来)

<8> 最后一步使用docker-compose进行服务编排

  • 服务编排主要是利用Docker Compose将springboot和nginx分批启动,Springboot就是我们自己打包的项目

  • nginx的作用:①将服务器上的静态文件(如HTML、图片)通过HTTP协议展现给客户端。②反向代理服务器,这里nginx代理的就是前端资源客户端本来可以直接通过HTTP协议访问某网站应用服务器,网站管理员可以在中间加上一个Nginx,客户端请求Nginx,Nginx请求应用服务器,然后将结果返回给客户端。加一层代理可以实现负载均衡、虚拟主机等效果。

  1. 安装docker-compose
# Compose目前已经完全支持Linux、Mac OS和Windows,在我们安装Compose之前,需要先安装Docker。下面我 们以编译好的二进制包方式安装在Linux系统中。 
curl -L https://github.com/docker/compose/releases/download/1.22.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
# 设置文件可执行权限 
chmod +x /usr/local/bin/docker-compose
# 查看版本信息 
docker-compose -version
  1. 在/mnt/docker/docker-compose创建nginx,并编写docker-compose.yml文件

在这里插入图片描述

docker-compose.yml文件内容:(路径对应自己的文件映射即可) bridge是保证app和nginx在同一个网络中

version: '3'
services:
  nginx:
   image: nginx
   container_name: nginx
   ports:
    - 80:80
    - 443:443
   links:
    - app
   depends_on:
    - app
   volumes:
    - /mnt/docker/docker-compose/nginx/:/etc/nginx/
    - /mnt/mszlu/web:/mszlu/web
    - /mnt/mszlu/blog:/mszlu/blog
   network_mode: "bridge"
  app:
    image: app
    container_name: app
    expose:
      - "8888"
    network_mode: "bridge"

nginx目录文件
在这里插入图片描述
mime.types文件内容(直接复制即可)


types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js;
    application/atom+xml                             atom;
    application/rss+xml                              rss;

    text/mathml                                      mml;
    text/plain                                       txt;
    text/vnd.sun.j2me.app-descriptor                 jad;
    text/vnd.wap.wml                                 wml;
    text/x-component                                 htc;

    image/png                                        png;
    image/svg+xml                                    svg svgz;
    image/tiff                                       tif tiff;
    image/vnd.wap.wbmp                               wbmp;
    image/webp                                       webp;
    image/x-icon                                     ico;
    image/x-jng                                      jng;
    image/x-ms-bmp                                   bmp;

    font/woff                                        woff;
    font/woff2                                       woff2;

    application/java-archive                         jar war ear;
    application/json                                 json;
    application/mac-binhex40                         hqx;
    application/msword                               doc;
    application/pdf                                  pdf;
    application/postscript                           ps eps ai;
    application/rtf                                  rtf;
    application/vnd.apple.mpegurl                    m3u8;
    application/vnd.google-earth.kml+xml             kml;
    application/vnd.google-earth.kmz                 kmz;
    application/vnd.ms-excel                         xls;
    application/vnd.ms-fontobject                    eot;
    application/vnd.ms-powerpoint                    ppt;
    application/vnd.oasis.opendocument.graphics      odg;
    application/vnd.oasis.opendocument.presentation  odp;
    application/vnd.oasis.opendocument.spreadsheet   ods;
    application/vnd.oasis.opendocument.text          odt;
    application/vnd.openxmlformats-officedocument.presentationml.presentation
                                                     pptx;
    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
                                                     xlsx;
    application/vnd.openxmlformats-officedocument.wordprocessingml.document
                                                     docx;
    application/vnd.wap.wmlc                         wmlc;
    application/x-7z-compressed                      7z;
    application/x-cocoa                              cco;
    application/x-java-archive-diff                  jardiff;
    application/x-java-jnlp-file                     jnlp;
    application/x-makeself                           run;
    application/x-perl                               pl pm;
    application/x-pilot                              prc pdb;
    application/x-rar-compressed                     rar;
    application/x-redhat-package-manager             rpm;
    application/x-sea                                sea;
    application/x-shockwave-flash                    swf;
    application/x-stuffit                            sit;
    application/x-tcl                                tcl tk;
    application/x-x509-ca-cert                       der pem crt;
    application/x-xpinstall                          xpi;
    application/xhtml+xml                            xhtml;
    application/xspf+xml                             xspf;
    application/zip                                  zip;

    application/octet-stream                         bin exe dll;
    application/octet-stream                         deb;
    application/octet-stream                         dmg;
    application/octet-stream                         iso img;
    application/octet-stream                         msi msp msm;

    audio/midi                                       mid midi kar;
    audio/mpeg                                       mp3;
    audio/ogg                                        ogg;
    audio/x-m4a                                      m4a;
    audio/x-realaudio                                ra;

    video/3gpp                                       3gpp 3gp;
    video/mp2t                                       ts;
    video/mp4                                        mp4;
    video/mpeg                                       mpeg mpg;
    video/quicktime                                  mov;
    video/webm                                       webm;
    video/x-flv                                      flv;
    video/x-m4v                                      m4v;
    video/x-mng                                      mng;
    video/x-ms-asf                                   asx asf;
    video/x-ms-wmv                                   wmv;
    video/x-msvideo                                  avi;
}

nginx.conf文件(复制即可)

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

conf.d/blog.conf文件 (更换域名和文件地址)

gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_vary off;
upstream appstream{
     
        server app:8888;
}
server{
    # 监听端口
    listen  80;
    # 主机名称/地址
    server_name whutxiaobao.top www.whut.xiaobao.top;
    index   index.html;
    # 前端服务
     location / {
        root /mszlu/blog/;
        # 刷新页面后跳转到当前页面
        try_files $uri $uri/ /index.html;
        index index.html;
     }

     # 后端api
     location /api {
                proxy_pass http://appstream;
    }

    location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
        root /mszlu/blog/;
        index index.html;
        add_header Access-Control-Allow-Origin *;
    }
}

部署运行

在 /mnt/docker/docker-compose 下面进行服务编排,实现app 和 nginx的启动 docker-compose up 可以先运行查看日志是否报错

docker-compose up #直接启动

docker-compose up -d #代表后台启动

docker-compose down  #停止并删除容器

docker-compose start #启动已有容器

docker-compose stop  #停止运行的容器

docker ps 可以查看当前运行的容器(java redis nginx app mysql)
在这里插入图片描述

部署的时候问题:

  1. 执行docker-compose命令出现nginx启动不了
    <注意:刚开始的时候我执行命令发现 nginx一直报错启动不了 提示docker-compose启动nginx出现Cannot start service nginx: Cannot link to a non runing nginx>
    直接重启服务器就可
  2. 进入页面会显示403错误,可以检查跨域的设置,以及文件路径的映射是否写错

        终于搭建完成了自己的第一个个人博客,从创建到部署完成,目前正在备案,后续会上传域名,感谢码神的教程,以及最后部署过程中浙大大佬的指点!感谢关注!

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小宝..

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值