个人博客部署(docker部署)详细!!!

部署流程目录

1.部署前的准备

**前提:**项目本地测试功能正常
模块端口规定:

  • 前台后端服务模块==>7777
  • 后台后端服务模块==>8989
  • 公共模块==>mh-framework

前端端口规定:

  • 前端前台Vue项目==>8093
  • 后端前台Vue项目==>8094

docker镜像准备

  • java:8(openjdk:8)
  • mysql:5.7.40
  • redis:7.0.11
  • nginx:1.22.1

linux服务器目录准备

  • /vincent/app : 这个目录放docker的项目的各个容器目录
  • /vincent/mydata : 这个目录放后端项目(做一些准备工作)

部署的步骤

  • 准备好linux服务器(腾讯、阿里等,我用的是硅云的)
  • 将本地两个后端项目打包上传至服务器的/vincent/mydata目录中
  • 安装docker
  • 拉取openjdk1.8、mysql:5.7.40、redis:7.0.11、nginx:1.22.1镜像
  • 在/mydata目录中,编写Dockerfile文件,将后端项目打成镜像文件
  • 在/mydata目录中,编写docker-compose.yml文件(容器启动脚本),使用docker-compose容器编排管理容器运行
  • 配置mysql,导入sql文件
  • 配置redis,修改redis.conf文件
  • 配置nginx,将打好包的Vue项目放到/app/nginx/html目录下,并配置nginx.conf文件
  • 测试后端接口和前端页面

使用工具

  • IDEA
  • Navicat
  • XShell
  • Postman
  • 硅云linux服务器

2. 前置工作

修改端口和打包工作

2.1修改前端页面的运行端口

前台前端Vue项目修改项目运行端口是在config文件夹下的index.js文件当中,运行端口由原来的80变为8093
在这里插入图片描述
后台前端Vue项目修改项目运行端口是在vue.config.js文件当中,运行端口由原来的8081变为8094
在这里插入图片描述

2.2修改前端对应的后端访问服务器ip

前台Vue项目页面
在这里插入图片描述
在这里插入图片描述

后台Vue项目页面
在这里插入图片描述
将原来的开发环境和生产环境的VUE_APP_BASE_API都更改为你的服务器ip和后端子模块端口
前台Vue项目
在这里插入图片描述
在这里插入图片描述

后台Vue项目
在这里插入图片描述
在这里插入图片描述

2.3修改后端配置文件中的mysql和redis的ip、用户名和密码

修改后端两个项目的application.yml文件,将MySQL服务和Redis服务的localhost修改为服务器ip
在这里插入图片描述
在这里插入图片描述

2.4后端项目打包

  • 后端项目使用maven打包

​ 打包后在target目录下生成对应模块的jar包,打包顺序
在这里插入图片描述

2.4.1解决打包问题

打包出现的问题:打包完成后查看jar包,发现只有16kb,然后试在本地运行jar包测试,果然有错误,报错信息是:xxxxx-0.0.1-SNAPSHOT.jar中没有主清单属性,原因是不能找到程序的主类,需要修改父pom文件和子模块mh-blog的pom文件和子模块mh-admin的pom文件,修改如下:

这是要使用的SpringBoot版本要在2.6以上

父模块pom中

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.5.6</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.10.1</version>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                    <encoding>${project.build.sourceEncoding}</encoding>
                </configuration>
            </plugin>
            <!-- 此插件必须放在父 POM 中  -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-assembly-plugin</artifactId>
                <version>3.3.0</version>
                <executions>
                    <!--
                    执行本插件的方法为,在主目录下执行如下命令:
                    mvn package assembly:single

                    对于 IntelliJ IDEA,生成的 JAR 包位于每个模块下的文件夹 target
                    -->
                    <execution>
                        <id>make-assembly</id>
                        <phase>package</phase>
                        <goals>
                            <!-- 此处 IntelliJ IDEA 可能会报红,这是正常现象  -->
                            <goal>single</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <archive>
                        <manifest>
                            <!-- 配置程序运行入口所在的类 -->
                            <mainClass>com.mh.MHBlogApplication</mainClass>
                        </manifest>
                        <manifest>
                            <!-- 配置程序运行入口所在的类 -->
                            <mainClass>com.mh.BlogAdminApplication</mainClass>
                        </manifest>
                    </archive>
                    <!-- 设置 JAR 包输出目录 -->
                    <outputDirectory>${project.build.directory}/#maven-assembly-plugin</outputDirectory>
                    <!-- 设置打包后的 JAR 包的目录结构为默认 -->
                    <descriptorRefs>
                        <descriptorRef>jar-with-dependencies</descriptorRef>
                    </descriptorRefs>
                </configuration>
            </plugin>
        </plugins>
    </build>

子模块sangeng-blog和子模块sangeng-admin的pom文件

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
        <finalName>${project.artifactId}</finalName>
    </build>
2.4.2项目打包,本地运行jar包测试

在父pom下首先clean清除先前的jar包,再install打包.(单模块项目首先clean清除先前的jar包,再package打包)
在这里插入图片描述

mh-admin模块
在这里插入图片描述
mh-blog模块
在这里插入图片描述
进入target目录下,在文件搜索框输入cmd进入Dos窗口,使用命令运行jar包,进行本地测试
在这里插入图片描述
在这里插入图片描述
运行正常即可–mh-blog.jar同样的测试方法,(和idea中的输出一样

2.5前端项目打包

前台前端Vue项目
前端mh-blog模块项目使用下面命令打包

npm run build

在这里插入图片描述
后台前端Vue项目
前端mh-admin模块项目使用下面命令打包
注意:因为后端使用的是Finclip提供的模板,所以生产环境使用的是npm run build:prod,如果你没有使用提供的模板,就直接使用npm run build命令。

npm run build:prod

在这里插入图片描述
这里打包会出错
如果你打包的过程中出现以下错误,表示 node.js版本过高,可以关闭node.js安全校验后再打包

set NODE_OPTIONS=--openssl-legacy-provider

在这里插入图片描述
如果使用出现ERROR,请注释掉以下内容
在这里插入图片描述

2.6开放端口

使用Xshell连接服务器(连接方法就不详述了,后续有时间再写)
在这里插入图片描述
打开所有需要运行服务的端口

firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --zone=public --add-port=7777/tcp --permanent
firewall-cmd --zone=public --add-port=8989/tcp --permanent
firewall-cmd --zone=public --add-port=6379/tcp --permanent
firewall-cmd --zone=public --add-port=3306/tcp --permanent
firewall-cmd --zone=public --add-port=8093/tcp --permanent
firewall-cmd --zone=public --add-port=8094/tcp --permanent

重启防火墙

systemctl restart firewalld.service

检查端口是否开放成功

firewall-cmd --zone=public --query-port=8093/tcp

2.7配置安全组规则

在云服务器的安全组中添加规则

这里是硅云,添加的是入方向规则(将上面的所有端口全部添加即可)
在这里插入图片描述

3.Docker安装

Docker运行环境要求系统为64位、Linux系统内核版本为 3.8以上

查看自己虚拟机的内核:

cat /etc/redhat-release

在这里插入图片描述
开始安装:

一:搭建gcc环境(gcc是编程语言译器)

yum -y install gcc
yum -y install gcc-c++

二:安装需要的软件包

yum install -y yum-utils

三:安装镜像仓库
官网上的是
在这里插入图片描述
但是因为docker的服务器是在国外,所以有时候从仓库中下载镜像的时候会连接被拒绝或者连接超时的情况,所以可以使用阿里云镜像仓库

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

四:更新yum软件包索引

yum makecache fast

五:安装docker引擎

yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin

六:启动docker

systemctl start docker

查看docker版本信息
在这里插入图片描述

七:阿里云镜像加速配置(这里没有配置)

4.拉取镜像

  1. 拉取镜像java:8(openjdk:8)
docker pull openjdk:8

拉取镜像mysql:5.7.40

docker pull mysql:5.7.40

拉取镜像redis:7.0.11

docker pull redis:7.0.11

拉取镜像nginx:1.22.1

docker pull nginx:1.22.1

查看镜像
在这里插入图片描述

5.编写Dockerfile文件,构建镜像

1、前后台的后端jar包传到服务器指定目录下/vincent/mydata中
在这里插入图片描述
2、在mydata目录下创建Dockerfile文件,编写Dockersfile文件
​ 这里我们两个jar包分别打成两个镜像,因为一个目录下只能有一个Dockerfile文件,所以当构建完第一个镜像之后修改对应的Dockerfile文件。

​ 在vim模式下 :set paste粘贴的文本数据不会乱

3、第一个Dockerfile文件

FROM openjdk:8
#作者
MAINTAINER dmh
# VOLUME 指定临时文件目录为/tmp,在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD mh-blog.jar mh_blog.jar
# 运行jar包
RUN bash -c 'touch /mh_blog.jar'
ENTRYPOINT ["java","-jar","/mh_blog.jar"]
#暴露7777端口作为微服务
EXPOSE 7777

在这里插入图片描述
构建镜像

docker build -t mh_blog:1.0 .

4、第二个Dockerfile文件

FROM openjdk:8
#作者
MAINTAINER dmh
# VOLUME 指定临时文件目录为/tmp,在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD mh-admin.jar mh_admin.jar
# 运行jar包
RUN bash -c 'touch /mh_admin.jar'
ENTRYPOINT ["java","-jar","/mh_admin.jar"]
#暴露8989端口作为微服务
EXPOSE 8989

在这里插入图片描述
构建镜像

docker build -t mh_admin:1.0 .

5、查看镜像

docker images

在这里插入图片描述

6.使用Docker-compose容器编排

6.1安装Docker-compose(高版本的Docker会默认安装)

1、首先查看主机是否有docker-compose环境

docker compose version

在这里插入图片描述

​ 如果没有就安装docker-compose,则安装,已安装则忽略
2、安装步骤
如果是低版本的docker需要安装docker-compose

由于docker-compose是从github上安装的,有可能是安装失败,自行想办法

DOCKER_CONFIG=${DOCKER_CONFIG:-$HOME/.docker} 

mkdir -p $DOCKER_CONFIG/cli-plugins 

curl -SL https://github.com/docker/compose/releases/download/v2.11.2/docker-compose-linux-x86_64 -o $DOCKER_CONFIG/cli-plugins/docker-compose

chmod +x $DOCKER_CONFIG/cli-plugins/docker-compose

6.2配置nginx文件

进入到事先准备好的/vincent/app目录下

# 1.运行容器
docker run -p 80:80 --name nginx -d nginx:1.22.1
# 2.将容器内的配置文件拷贝到当前目录/app中:
docker container cp nginx:/etc/nginx .
# 3.将文件nginx修改为conf
mv nginx conf
# 4.创建文件夹nginx
mkdir nginx
# 5.将conf目录拷贝到nginx目录
cp -r conf nginx/
# 6.删除conf目录
rm -rf conf
# 3.停止并删除容器
docker stop nginx && docker rm nginx 

此时就将nginx的配置文件拷贝到了app目录下,也就是容器里面

6.3编写docker-compose.yml文件

1、在/vincent/mydata目录下创建docker-compose.yml文件,并编写docker-compose.yml文件(这个脚本用于运行各个容器,以及容器里面的配置)
注意:mysql的用户名和密码需要自己填写
在vim模式下 :set paste粘贴的文本数据不会乱

# compose版本
version: "3"

services:
  mh_blog:
#微服务镜像  
    image: mh_blog:1.0
    container_name: mh_blog
    ports:
      - "7777:7777"
#数据卷
    volumes:
      - /vincent/app/mh_blog:/data/mh_blog
    networks:
      - blog_network
    depends_on:
      - redis
      - mysql
      - nginx


  mh_admin:
#微服务镜像
    image: mh_admin:1.0
    container_name: mh_admin
    ports:
      - "8989:8989"
#数据卷
    volumes:
      - /vincent/app/mh_admin:/data/mh_admin
    networks:
      - blog_network
    depends_on:
      - redis
      - mysql
      - nginx
#redis服务
  redis:
    image: redis:7.0.11
    ports:
      - "6379:6379"
    volumes:
      - /vincent/app/redis/redis.conf:/etc/redis/redis.conf
      - /vincent/app/redis/data:/data
    networks:
      - blog_network
    command: redis-server /etc/redis/redis.conf

 #mysql服务
  mysql:
    image: mysql:5.7.40
    environment:
      MYSQL_ROOT_PASSWORD: 'root密码'
      MYSQL_ALLOW_EMPTY_PASSWORD: 'no'
      MYSQL_DATABASE: 'mh_blog'
      MYSQL_USER: '另一个mysql用户'
      MYSQL_PASSWORD: '另一个mysql用户密码'
      TZ: Asia/Shanghai
    ports:
       - "3306:3306"
    volumes:
       - /vincent/app/mysql/db:/var/lib/mysql  # 数据文件挂载
       - /vincent/app/mysql/conf/my.cnf:/etc/mysql/my.cnf  #配置文件的挂载 
   #    - /vincent/app/mysql/conf/my.cnf:/etc/my.cnf
       - /vincent/app/mysql/init:/docker-entrypoint-initdb.d
       - /vincent/app/mysql/log:/var/log/mysql   # 日志文件的挂载
    networks:
      - blog_network
    command: --default-authentication-plugin=mysql_native_password #解决外部无法访问

 #nginx服务  开启一个容器
  nginx:
    image: nginx:1.22.1
    ports:
      - "80:80"
      - "8093:8093"
      - "8094:8094"
      - "9999:9999"
    volumes:
      - /vincent/app/nginx/html:/usr/share/nginx/html  # /vincent/app/nginx/html宿主机里面,/usr/share/nginx/html一个链接
      - /vincent/app/nginx/logs:/var/log/nginx
      - /vincent/app/nginx/conf:/etc/nginx
     # - /vincent/app/nginx/conf.d:/etc/nginx/conf.d
    networks:
      - blog_network



 #创建自定义网络
networks:
   blog_network:

2、检查当前目录下compose.yml文件是否有语法错误

docker compose config -q

3、启动所有docker-compose服务并后台运行

docker compose up -d

查看正在运行的容器实例
在这里插入图片描述
注意:因为MySQL和Redis还未配置,会出现容器挂掉的情况,这点等待配置过MySql和Redis之后再重启容器实例即可

7.配置MySQL

1、将sql文件传到/vincent/app/mysql/db目录下(和MySQL容器实例相同的容器数据卷位置)
​ 本机Navicat导出sql文件,传送到/app/mysql/db目录下
在这里插入图片描述
在这里插入图片描述

2、进入MySQL容器实例

docker exec -it 容器ID bash

这里会出现问题:请看我的另一篇博客(docker进入容器出现bash-4.2#解决办法
在这里插入图片描述
问题处理完后,可以正常进入mysql容器
在这里插入图片描述

​ 在/var/lib/mysql目录下查看是否有sql文件(一定是在进入容器后查看)
在这里插入图片描述
3、登录MySQL
​ 密码就是在docker-compose.yml文件当中进行配置的

mysql -u mh_blog(这个是docker-compose.yml中配置的用户名) -p

在这里插入图片描述
4、使用对应的数据库,导入sql文件

use mh_blog;
source /var/lib/mysql/mh_blog.sql;

5、sql数据导入成功
在这里插入图片描述

8.配置Redis

获取redis对应版本的配置文件
因为docker拉取的redis镜像是没有redis.conf文件的。因此,就需要我们官网上找一个相对应版本的的redis.conf配置文件

redis配置文件官网Redis configuration | Redis

因为我的redis版本是7.0.11,所以我选择7.0的配置文件
在这里插入图片描述
2、进入/app/redis目录下
不知为何docker-compose.yml文件写的没有问题,但是这里创建的redis.conf文件却是一个文件夹,无奈只好删除redis.conf目录,创建一个redis.conf文件

使用vim命令进入vim编辑器,将redis配置文件内容粘贴进去

touch redis.conf
vim redis.conf

在vim模式下 :set paste粘贴的文本数据不会乱
在这里插入图片描述
3、修改配置文件内容
​ 使用/进行搜索

  • 添加redis密码(requirepass):将foobared换成redis密码即可
    在这里插入图片描述
    在这里插入图片描述

  • 修改bind为0.0.0.0(任何机器都能够访问)
    在这里插入图片描述
    在这里插入图片描述

  • 为了避免和docker中的-d参数冲突,将后台启动设置为no(daemonize no)
    在这里插入图片描述

  • 关闭保护模式(protected-mode no)
    在这里插入图片描述

9.测试后端接口

1、重启现在未启动的容器实例(mysql和redis)

docker restart 容器ID

2、使用postman进行接口测试(其他的接口测试工具也可以)

3、将已经打包好的前端项目放到本地Nginx里面测试
在这里插入图片描述
4、将dist文件直接放到html目录下
5、在conf文件中修改nginx.conf文件,在http{…}中添加内容如下

   server {
   #监听端口
        listen       8094;
        server_name  localhost;

        #charset koi8-r;
        #
        #       #access_log  logs/host.access.log  main;

              location / {
              #dist文件所在目录
                     root   html/dist;
                     index  index.html index.htm;
              #解决刷新404的问题
                     try_files $uri $uri/ /index.html;
                   }

        }

6、点击nginx.exe运行nginx服务

7、访问对应的ip+端口号
在这里插入图片描述
如果你的后台出现问题:

​ 问题一:访问405,解决方案请看2.3章的第3步

​ 问题二:页面只有/login和/dashborad请求,其他页面是空白,因为在后台的前端页面编写的时候路由没有写全,文件位置如下图所示:
在这里插入图片描述
只写了login和dashborad两个路由,详细路由如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },
  {
    path: '/write',
    component: Layout,
    children: [{
      path: '/',
      name: 'Write',
      component: () => import('@/views/content/article/write/index'),
      hidden: true
    }]
  },
  {
    path: '/system/user',
    component: Layout,
    children: [{
      path: '/',
      name: 'User',
      component: () => import('@/views/system/user'),
      hidden: true
    }]
  },
  {
    path: '/system/role',
    component: Layout,
    children: [{
      path: '/',
      name: 'role',
      component: () => import('@/views/system/role'),
      hidden: true
    }]
  },
  {
    path: '/system/menu',
    component: Layout,
    children: [{
      path: '/',
      name: 'menu',
      component: () => import('@/views/system/menu'),
      hidden: true
    }]
  },
  {
    path: '/system/role',
    component: Layout,
    children: [{
      path: '/',
      name: 'role',
      component: () => import('@/views/system/role'),
      hidden: true
    }]
  },
  {
    path: '/content/article',
    component: Layout,
    children: [{
      path: '/',
      name: 'article',
      component: () => import('@/views/content/article/index'),
      hidden: true
    }]
  },
  {
    path: '/content/category',
    component: Layout,
    children: [{
      path: '/',
      name: 'category',
      component: () => import('@/views/content/category/index'),
      hidden: true
    }]
  },
  {
    path: '/content/link',
    component: Layout,
    children: [{
      path: '/',
      name: 'link',
      component: () => import('@/views/content/link/index'),
      hidden: true
    }]
  },
  {
    path: '/content/tag',
    component: Layout,
    children: [{
      path: '/',
      name: 'tag',
      component: () => import('@/views/content/tag/index'),
      hidden: true
    }]
  }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

如果没有问题,下面开始Nginx容器配置

10.配置Nginx

1、将打包好后的两个dist文件夹重命名发送到/vincent/app/nginx/html目录下
在这里插入图片描述
在这里插入图片描述

2、修改nginx.conf配置文件
​ 进入conf文件夹下,打开nginx.conf文件

​ 在http{…}添加两个server
记得root路径为容器内的dist文件路径:这个一定要注意,我就吃了很多亏

# blog
    server {
        listen       8093;
        server_name  自己的id地址;

        #charset koi8-r;
        #
        #       #access_log  logs/host.access.log  main;

              location / {
                     root   /usr/share/nginx/html/mh_blog_dist;
                     index  index.html index.htm;
                     try_files $uri $uri/ /index.html;
                   }

        }

    server {
        listen       8094;
        server_name  自己的ip地址;

        #charset koi8-r;
        #
        #       #access_log  logs/host.access.log  main;

              location / {
                     root   /usr/share/nginx/html/mh_admin_dist;
                     index  index.html index.htm;
                     try_files $uri $uri/ /index.html;
                   }

        }

在这里插入图片描述
3、进入nginx容器,进行配置文件的重新加载

# 进入nginx容器
docker exec -it 容器ID bash
# 从新加载配置文件
nginx -s reload

11 项目测试

访问对应ip和端口,查看项目是否有问题
在这里插入图片描述
在这里插入图片描述

就此完结撒花!!!

参考文献:
【1】☜阳光的原创文章,原文链接:https://blog.csdn.net/qq_52030824/article/details/127982206

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值