基于openEuler22.03 LTS环境的容器项目实训——前后端分离项目部署

一、说明

本文配置环境为VMware虚拟机或华为云服务器(4核CPU,8 GB内存,40GB磁盘),OS为openEuler 22.03 LTS ,Linux服务器要求能联网。

二、安装docker环境

2.1 安装docker相关软件包

[root@node01 ~]# dnf -y install docker docker-compose

2.2 查看docker版本

[root@node01 ~]# docker version
Client:
 Version:           18.09.0
 EulerVersion:      18.09.0.323
 API version:       1.39
 Go version:        go1.17.3
 Git commit:        172f8da
 Built:             Wed Apr 19 02:01:22 2023
 OS/Arch:           linux/amd64
 Experimental:      false

Server:
 Engine:
  Version:          18.09.0
  EulerVersion:     18.09.0.323
  API version:      1.39 (minimum version 1.12)
  Go version:       go1.17.3
  Git commit:       172f8da
  Built:            Wed Apr 19 02:00:48 2023
  OS/Arch:          linux/amd64
  Experimental:     false

2.3 添加国内镜像源

系统默认从docker官方镜像源Docker hub拉取镜像,在国内从Docker hub拉取镜像会比较慢,而且可能因为网络原因导致拉取失败,此时就可以配置 “国内的加速器”。国内有许多的云服务商都配置了国内镜像加速器服务。

以配置华为云容器加速器为例,如下图所示,在华为云的所有服务中,找到容器中的“容器镜像服务SWR”,

点击左侧的“镜像资源”-->“镜像中心”,然后点击右上角的“镜像加速器”,打开如下图所示的窗口,并按其中的操作说明修改/etc/docker/daemon.json文件即可。

2.4 启动并设置为开机自启动

完成上述操作后,建议重新加载配置,并重启docker服务,命令如下:

[root@node01 ~]# systemctl daemon-reload
[root@node01 ~]# systemctl restart docker
[root@node01 ~]# systemctl enable docker

三、前后端分离部署Web项目实战

以下以前后端分离架构的开源项目(https://gitee.com/y_project/RuoYi-Vue)为例,采用一键综合编排docker容器的方式进行部署进行实战训练。

根据官方文档(http://doc.ruoyi.vip/ruoyi/)说明,该项目的系统运行环境要求如下:

  • JDK >= 1.8
  • MySQL >= 5.7
  • Maven >= 3.0

根据官方文档信息,利用docker部署该项目的部署架构如下图所示,其中Nginx容器实例提供HTTP反向代理和Web服务,JDK8容器实例提供后端项目运行环境,MySQL容器实例提供数据库服务,redis容器实例提供redis缓存服务。

3.1 准备工作

3.1.1 清空环境

为避免干扰,建议清除所有已有的镜像和容器,确保执行【docker ps -a】和【docker images】命令的输出均为空,如下图所示。

[root@node01 ~]# docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

[root@node01 ~]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE

3.1.2 下载源码

若依开源项目(前后端分离版本)源码下载地址:https://gitee.com/y_project/RuoYi-Vue

下载该项目源码的ZIP压缩包

解压后的文件和目录如下:

3.1.3 修改数据库配置

在ruoyi-admin/src/main/resources/application-druid.yml中,修改数据库配置内容,包括数据库服务器IP地址、连接账号和密码等,如下图所示,,将默认的localhost修改为数据库容器名称(即3.8.1节中docker-compose.yml文件中的mysql容器名称),数据库连接账号和密码可自行修改和保存。

3.1.4 修改redis配置

在ruoyi-admin/src/main/resources/application.yml中,修改redis的host地址,将默认的localhost修改为redis容器名称(即3.8.1节中docker-compose.yml文件中的redis容器名称),同时指定连接密码(即3.1.6节中redis.conf文件中的密码),如下所示。

3.1.5 准备nginx配置文件

 前端项目需要依赖Web服务器,这里选择利用Nginx服务来配置Web服务器,这里需要准备一个名为nginx.conf的文件,其内容如下:(注意,一定要根据自己的系统情况进行修改,不得照抄!

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/local/ruoyi/dist;    #此处为前端项目Web主目录
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
  
  location /prod-api/ {    #此处的接口名请见下面的注
             #请求头设置,防止出现跨域问题
             proxy_set_header Host $http_host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             
             #所有对/prod-api接口的请求均会代理至back-end:8080,其中back-end为后端容器名称。
             proxy_pass http://back-end:8080/;
        }
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

注:文件中的/prod-api接口可在源码的ruoyi-ui/src/.env.production文件中查看,如下所示。

后端监听端口8080可在ruoyi-admin/src/main/resources/application.yml中查看到。 

3.1.6 准备redis配置文件

系统开发采用了redis,故后面需要部署redis服务,这里需要准备一个名为redis.conf的文件,其内容如下,其中密码值必须与6.1.4节中修改的值一致

requirepass 123456

3.1.7 准备工作目录

在云服务器(或者虚拟机)的/opt目录中新建一个名为ruoyi-vue的目录,并在其中建立如下图所示的目录结构。

3.2 前端项目构建

可利用Node.js包管理工具的npm命令对前端项目进行打包,Node.js的安装与环境配置可参见文章:Node.js的安装与配置

在ruoyi-ui文件夹下的package.json文件中可以看到前端项目构建的命令,其中build:prod为构建生产环境,build:stage则为测试环境,以下以构建生产环境为例。

在cmd命令行下,在ruoyi-ui文件夹下,依次执行【npm install】和【npm run build:prod】将前端项目打包成一个dist文件夹,如下图所示。

# 安装依赖包
D:\develop\ruoyi-vue\ruoyi-ui>npm install
npm WARN ERESOLVE overriding peer dependency
……此处省略其它系统输出……

# 打包前端项目
D:\develop\ruoyi-vue\ruoyi-ui>npm run build:prod

> ruoyi@3.6.4 build:prod
> vue-cli-service build


-  Building for production...
……此处省略其它系统输出……

# 查看前端项目dist文件夹中的文件
D:\develop\ruoyi-vue\ruoyi-ui>dir dist
 驱动器 D 中的卷是 软件
 卷的序列号是 C88D-5646

 D:\develop\ruoyi-vue\ruoyi-ui\dist 的目录

2024/05/04  17:52    <DIR>          .
2024/05/04  17:52    <DIR>          ..
2024/05/04  17:52             5,561 favicon.ico
2024/05/04  17:52    <DIR>          html
2024/05/04  17:52            12,085 index.html
2024/05/04  17:52             3,967 index.html.gz
2024/05/04  17:52                26 robots.txt
2024/05/04  17:52    <DIR>          static
               4 个文件         21,639 字节
               4 个目录 219,372,675,072 可用字节

3.3 构建前端镜像

3.3.1 上传前端文件

将前端项目dist文件夹利用xftp上传至云服务器的/opt/ruoyi-vue/frontend目录,如下图所示。

将nginx.conf文件上传至/opt/ruoyi-vue/frontend/conf目录中,如下图所示。

3.3.2 编写前端镜像构建脚本

在/opt/ruoyi-vue/frontend/目录下新建Dockerfile镜像构建脚本,构建前端镜像,并将前面准备的dist文件夹和nginx.conf文件添加到Nginx的镜像中,脚本内容如下:

[root@node01 frontend]# vim Dockerfile 

# 基础镜像
FROM nginx
# author
MAINTAINER ptuxgk

# 挂载目录
VOLUME /usr/local/ruoyi/dist
# 创建目录
RUN mkdir -p /usr/local/ruoyi/dist
# 指定路径
WORKDIR /usr/local/ruoyi/dist
# 复制conf文件到路径
COPY ./conf/nginx.conf /etc/nginx/nginx.conf
# 复制html文件到路径
COPY ./dist /usr/local/ruoyi/dist

3.3.3 构建前端镜像

执行【docker build -t front-end:latest .】命令拉取nginx基础镜像,并利用该nginx镜像构建一个名为front-end:latest的镜像,如下所示。

[root@node01 frontend]# docker build -t front-end:latest .
Sending build context to Docker daemon  6.672MB
Step 1/3 : FROM nginx:latest
latest: Pulling from library/nginx
b0a0cf830b12: Pull complete 
8ddb1e6cdf34: Pull complete 
5252b206aac2: Pull complete 
988b92d96970: Pull complete 
7102627a7a6e: Pull complete 
93295add984d: Pull complete 
ebde0aa1d1aa: Pull complete 
Digest: sha256:ed6d2c43c8fbcd3eaa44c9dab6d94cb346234476230dc1681227aa72d07181ee
Status: Downloaded newer image for nginx:latest
 ---> 7383c266ef25
Step 2/3 : COPY dist  /usr/share/dist
 ---> 972f25f1821e
Step 3/3 : COPY nginx.conf /etc/nginx/nginx.conf
 ---> ad549d5b54bc
Successfully built ad549d5b54bc
Successfully tagged front-end:latest

3.3.4 查看前端镜像

执行【docker images】命令查看当前镜像,如下所示。

[root@node01 frontend]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
front-end           latest              ad549d5b54bc        2 minutes ago       194MB
nginx               latest              7383c266ef25        5 days ago          188MB

3.4 后端项目编译构建

利用诸如IntelliJ IDEA之类的工具将其打包生成6个jar包(也可以利用华为云的CodeArts编译构建生成,过程可参见:利用CodeArts构建编译后端项目),具体打包过程这里从略。

利用华为云的CodeArts编译构建的jar包如下所示。

将编译构建的jar包保存在本地某个目录。 

3.5 构建后端镜像

3.5.1 上传后端项目文件

将后端项目的6个jar包上传至云服务器的/opt/ruoyi-vue/backend目录,如下所示。

注:其实只要上传ruoyi-admin.jar包即可。

3.5.2 编写后端镜像构建脚本

后端项目jar包运行需要有jkd8环境,该环境可通过由java8镜像创建的容器提供。在/opt/ruoyi-vue/backend目录下新建Dockerfile,用于构建jdk8镜像,具体内容如下:

# 基础镜像
FROM  williamyeh/java8
# author
MAINTAINER ptuxgk

# 挂载目录
VOLUME /usr/local/ruoyi/backend
# 创建目录
RUN mkdir -p /usr/local/ruoyi/backend
# 指定路径
WORKDIR /usr/local/ruoyi/backend
# 复制jar文件到路径
COPY ./*.jar /usr/local/ruoyi/backend/

注:java8基础镜像名并非固定,建议先执行【docker search java8】命令查看最新官方镜像名称。 

3.5.3 构建后端镜像

执行【docker build -t back-end:latest .】命令拉取java8基础镜像,并利用该基础镜像构建一个名为back-end:latest的镜像,如下所示。

[root@cloudECS backend]# docker build -t back-end:latest .
Sending build context to Docker daemon  83.65MB
Step 1/6 : FROM  williamyeh/java8
latest: Pulling from williamyeh/java8
f2b6b4884fc8: Pull complete 
c6c308a14d13: Pull complete 
Digest: sha256:174d528516a0eae5c4df69966eeb5e51d7c0dc1a532249af61013953eab1d9f3
Status: Downloaded newer image for williamyeh/java8:latest
 ---> 00bc163fa009
Step 2/6 : MAINTAINER ptuxgk
 ---> Running in 0a7ed28c794f
Removing intermediate container 0a7ed28c794f
 ---> 831de4be0612
Step 3/6 : VOLUME /usr/local/ruoyi/backend
 ---> Running in c1cc6e2e5c5b
Removing intermediate container c1cc6e2e5c5b
 ---> 190559101128
Step 4/6 : RUN mkdir -p /usr/local/ruoyi/backend
 ---> Running in fc16acafcf30
Removing intermediate container fc16acafcf30
 ---> 4e5a6cbf8eb5
Step 5/6 : WORKDIR /usr/local/ruoyi/backend
 ---> Running in 00d130b20e14
Removing intermediate container 00d130b20e14
 ---> 0125ec0febda
Step 6/6 : COPY ./*.jar /usr/local/ruoyi/backend/
 ---> eaa761aa7d4a
Successfully built eaa761aa7d4a
Successfully tagged back-end:latest

3.5.4 查看镜像

执行【docker images】命令查看当前镜像,如下所示。

[root@cloudECS backend]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
back-end            latest              eaa761aa7d4a        33 minutes ago      677MB
front-end           latest              203196905fe3        9 hours ago         193MB
nginx               latest              92b11f67642b        2 months ago        187MB
williamyeh/java8    latest              00bc163fa009        6 years ago         593MB

3.6 构建数据库镜像

3.6.1 上传数据库文件

将源码的sql目录下的的*.sql文件上传至云服务器的/opt/ruoyi-vue/mysql/db目录,如下图所示。

3.6.2 编写mysql镜像构建脚本

系统采用MySQL数据库,在/opt/ruoyi-vue/mysql/目录新建一个名为Dockerfile的文件,并用该文件构建MySQL镜像,Dockerfile文件的具体内容如下:

[root@cloudECS mysql]# vim Dockerfile 

# 基础镜像
FROM mysql:latest
# author
MAINTAINER ptuxgk

# 执行sql脚本
ADD ./db/*.sql /docker-entrypoint-initdb.d/

3.6.3 构建mysql镜像

执行【docker build -t ruoyi-mysql:latest .】命令拉取mysql基础镜像,并利用该基础镜像构建一个名为ruoyi-mysql:latest镜像,如下所示。

[root@cloudECS mysql]# docker build -t ruoyi-mysql:latest .
Sending build context to Docker daemon  74.75kB
Step 1/3 : FROM mysql:latest
latest: Pulling from library/mysql
bd37f6d99203: Pull complete 
aafe9b2df4d0: Pull complete 
fc98c884ffd9: Pull complete 
587e0e3e0c51: Pull complete 
64520c05a6b1: Pull complete 
13d3ebffe534: Pull complete 
9be2eca8f885: Pull complete 
810320f66957: Pull complete 
8c425b59d0ec: Pull complete 
7387b81cae91: Pull complete 
Digest: sha256:f7a8e140a7d6d1e6e0c99eeb0489c50a186ee4ac44ff55323a176529b9a43d33
Status: Downloaded newer image for mysql:latest
 ---> 8251f0669c6e
Step 2/3 : MAINTAINER ptuxgk
 ---> Running in 2b0a431e9b65
Removing intermediate container 2b0a431e9b65
 ---> 4036144807cc
Step 3/3 : ADD ./db/*.sql /docker-entrypoint-initdb.d/
 ---> f95f0353c921
Successfully built f95f0353c921
Successfully tagged ruoyi-mysql:latest

3.6.4 查看镜像

执行【docker images】命令查看当前镜像,如下所示。

[root@cloudECS mysql]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
back-end            latest              eaa761aa7d4a        6 hours ago         677MB
ruoyi-mysql         latest              c4a7b774a9d6        14 hours ago        623MB
front-end           latest              203196905fe3        14 hours ago        193MB
mysql               latest              8251f0669c6e        2 days ago          623MB
nginx               latest              92b11f67642b        2 months ago        187MB
williamyeh/java8    latest              00bc163fa009        6 years ago         593MB

3.7 构建redis镜像

3.7.1 上传redis配置文件

将准备的redis.conf文件上传到云服务器的/opt/ruoyi-vue/redis/conf/目录下,如下图所示。

3.7.2 编写redis镜像构建脚本

在/opt/ruoyi-vue/redis/目录新建一个名为Dockerfile的文件,并用该文件构建redis镜像,Dockerfile文件的具体内容如下:

[root@cloudECS redis]# vim Dockerfile 

# 基础镜像
FROM redis:latest
# author
MAINTAINER ptuxgk

# 指定挂载目录
VOLUME /usr/local/ruoyi/redis
# 创建redis工作目录
RUN mkdir -p /usr/local/ruoyi/redis
# 指定redis工作目录
WORKDIR /usr/local/ruoyi/redis
# 复制conf文件到容器工作目录
COPY ./conf/redis.conf /usr/local/ruoyi/redis/redis.conf

3.7.3 构建redis镜像

执行【docker build -t ruoyi-redis:latest .】命令拉取redis基础镜像,并利用该基础镜像构建一个名为ruoyi-redis:latest镜像,如下所示。

[root@cloudECS redis]# docker build -t ruoyi-redis:latest .
Sending build context to Docker daemon  94.21kB
Step 1/6 : FROM redis:latest
latest: Pulling from library/redis
b0a0cf830b12: Pull complete 
214d0afb35ca: Pull complete 
16a9d12e7a2c: Pull complete 
cb9709829e8b: Pull complete 
00e912971fa2: Pull complete 
f7ebca356832: Pull complete 
4f4fb700ef54: Pull complete 
c16c264be546: Pull complete 
Digest: sha256:f14f42fc7e824b93c0e2fe3cdf42f68197ee0311c3d2e0235be37480b2e208e6
Status: Downloaded newer image for redis:latest
 ---> 9509c4dd19fb
Step 2/6 : MAINTAINER ptuxgk
 ---> Running in 7186def3f2c2
Removing intermediate container 7186def3f2c2
 ---> d67df10108ef
Step 3/6 : VOLUME /usr/local/ruoyi/redis
 ---> Running in 92496dcf613c
Removing intermediate container 92496dcf613c
 ---> dc405a5da66c
Step 4/6 : RUN mkdir -p /usr/local/ruoyi/redis
 ---> Running in 9cf19bd29e10
Removing intermediate container 9cf19bd29e10
 ---> 162e0c47d016
Step 5/6 : WORKDIR /usr/local/ruoyi/redis
 ---> Running in d09421701fcb
Removing intermediate container d09421701fcb
 ---> b3866979047b
Step 6/6 : COPY ./conf/redis.conf /usr/local/ruoyi/redis/redis.conf
 ---> 7a1d7cf426c6
Successfully built 7a1d7cf426c6
Successfully tagged ruoyi-redis:latest

3.7.4 查看镜像

执行【docker images】命令查看当前镜像,如下所示。

[root@cloudECS redis]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
ruoyi-redis         latest              7a1d7cf426c6        35 seconds ago      117MB
ruoyi-mysql         latest              f95f0353c921        9 minutes ago       623MB
back-end            latest              eaa761aa7d4a        6 hours ago         677MB
front-end           latest              203196905fe3        15 hours ago        193MB
mysql               latest              8251f0669c6e        2 days ago          623MB
redis               latest              9509c4dd19fb        3 weeks ago         116MB
nginx               latest              92b11f67642b        2 months ago        187MB
williamyeh/java8    latest              00bc163fa009        6 years ago         593MB

3.8 综合编排与部署

成功完成上述镜像构建后,就可能利用这些镜像来综合编排容器和部署项目了。

3.8.1 编写综合编排配置文件

在云服务器的/opt/ruoyi-vue/目录下,新建一个名为docker-compose.yml的配置文件,文件内容如下:

[root@cloudECS ruoyi-vue]# vim docker-compose.yml

---
version: '3'
services:
  ruoyi-mysql:    #服务名称
    image: ruoyi-mysql:latest    #镜像名称
    container_name: ruoyi-mysql    #容器名称
    ports:                 #指定端口映射   
      - "3306:3306"        #云服务器端口:容器内部端口
    volumes:               #指定挂载目录,云服务器目录:容器目录
      - /opt/ruoyi-vue/mysql/conf:/etc/mysql/conf.d
      - /opt/ruoyi-vue/mysql/mysql-files:/var/lib/mysql-files
      - /opt/ruoyi-vue/mysql/data:/var/lib/mysql
      - /opt/ruoyi-vue/mysql/log:/var/log/mysql
    command: [            #容器内部要执行的命令
          'mysqld',
          '--innodb-buffer-pool-size=80M',
          '--character-set-server=utf8mb4',
          '--collation-server=utf8mb4_unicode_ci',
          '--default-time-zone=+8:00',
          '--lower-case-table-names=1'
        ]
    environment:        #指定容器环境
      MYSQL_DATABASE: 'ry-vue'        #指定数据库名称
      MYSQL_ROOT_PASSWORD: password   #指定数据库连接密码,与6.1.3中修改的值要一致
    networks:           #指定容器网络
      - ptuxgk
  ruoyi-redis:
    image: ruoyi-redis:latest
    container_name: ruoyi-redis
    ports:
      - "6379:6379"
    volumes:
      - ./redis/conf/redis.conf:/usr/local/ruoyi/redis/redis.conf
      - ./redis/data:/data
    command: redis-server /usr/local/ruoyi/redis/redis.conf
    networks:
      -  ptuxgk
  back-end:
    image: back-end:latest
    container_name: back-end
    ports:
     - "8080:8080"
    volumes:
      - ./backend/:/usr/local/ruoyi/backend
    command: java -jar /usr/local/ruoyi/backend/ruoyi-admin.jar
    depends_on:
     - ruoyi-mysql
     - ruoyi-redis
    networks:
     - ptuxgk
  front-end:
    image: front-end:latest
    container_name: front-end
    volumes:
      - "./frontend/conf/nginx.conf:/etc/nginx/nginx.conf"
      - "./frontend/dist:/usr/local/ruoyi/dist"
    ports:
      - "80:80"
    networks:
      - ptuxgk
    depends_on:
      - back-end
networks:
    ptuxgk:

配置文件中,后端服务的监听端口可在源码的ruoyi-admin/src/main/resources/application.yml文件中查看到,如下图所示。

3.8.2 一键项目部署

在docker-compose.yml配置文件所在目录执行【docker-compose up -d】命令创建容器并一键部署项目,如下图所示。

[root@cloudECS ruoyi-vue]# docker-compose up -d
Creating network "ruoyi-vue_ptuxgk" with the default driver
Creating ruoyi-mysql ... done
Creating ruoyi-redis ... done
Creating back-end    ... done
Creating front-end   ... done

注:从上述输出可以看出自动创建了一个名为 ruoyi-vue_ptuxgk的容器网络,其中ruoyi-vue为当前目录名称。

3.8.3 查看容器状态

稍候片刻,执行【docker ps -a】命令,查看容器及其状态,如下所示。

[root@cloudECS ruoyi-vue]# docker ps -a
CONTAINER ID        IMAGE                COMMAND                  CREATED             STATUS                      PORTS                               NAMES
de3f8f1acb8f        front-end:latest     "/docker-entrypoint.…"   20 minutes ago      Up 20 minutes               0.0.0.0:80->80/tcp                  front-end
6278d033a793        back-end:latest      "java -jar /usr/loca…"   20 minutes ago      Exited (1) 19 minutes ago                                       back-end
8927ae570103        ruoyi-mysql:latest   "docker-entrypoint.s…"   20 minutes ago      Up 20 minutes               0.0.0.0:3306->3306/tcp, 33060/tcp   ruoyi-mysql
333cc727c10a        ruoyi-redis:latest   "docker-entrypoint.s…"   20 minutes ago      Up 20 minutes               0.0.0.0:6379->6379/tcp              ruoyi-redis

从容器状态可以看到后端容器back-end状态为Exited,执行【docker logs back-end】命令查看该容器的日志,如下所示。

[root@cloudECS ruoyi-vue]# docker logs back-end 

……此处省略其它输出信息,仅保留以下一行错误日志……
Caused by: java.net.NoRouteToHostException: No route to host (Host unreachable)

从日志可以看出backe-end容器未成功启动的原因是主机不可达。

 注:如果其它容器状态也是Exited,则可以执行【docker restart 容器ID/名称】命令重启该容器,如果仍然报错,则执行【docker logs 容器ID/名称】查看错误日志,并根据日志排除故障。

3.8.4 配置防火墙

back-end容器未成功启动的原因很可能是防火墙拦截导致,通过以下方法解决:

(1)查看容器网络ID

执行【docker networks ls】命令查看一健部署时创建的容器网络ID,如下所示。

# 查看容器网络
[root@cloudECS ruoyi-vue]# docker network ls
NETWORK ID          NAME                DRIVER              SCOPE
0ece53f5b997        bridge              bridge              local
cc2e27be3957        host                host                local
96f666ce5b05        none                null                local
9f9a5c1d0be1        ruoyi-vue_ptuxgk    bridge              local   #自定义的容器网络

(2)配置防火墙

配置防火墙,放行容器网络流量 

# 配置防火墙放行自定义的容器网络流量
[root@cloudECS ruoyi-vue]# firewall-cmd --permanent --zone=public --add-interface=br-9f9a5c1d0be1
success

# 重新加载,使上述配置立即生效
[root@cloudECS ruoyi-vue]# firewall-cmd --reload     
success

 3.8.5 重启后端容器

执行【docker restart back-end】命令重启后端容器,稍侯片刻后再执行【docker ps -a】命令查看容器状态,可以看到后端容器可以正常启动了,如下所示。

# 重启容器
[root@cloudECS ruoyi-vue]# docker restart back-end 
back-end

# 查看容器状态
[root@cloudECS ruoyi-vue]# docker ps -a
CONTAINER ID        IMAGE                COMMAND                  CREATED             STATUS              PORTS                               NAMES
de3f8f1acb8f        front-end:latest     "/docker-entrypoint.…"   34 minutes ago      Up 34 minutes       0.0.0.0:80->80/tcp                  front-end
6278d033a793        back-end:latest      "java -jar /usr/loca…"   34 minutes ago      Up 3 minutes        0.0.0.0:8080->8080/tcp              back-end
8927ae570103        ruoyi-mysql:latest   "docker-entrypoint.s…"   34 minutes ago      Up 34 minutes       0.0.0.0:3306->3306/tcp, 33060/tcp   ruoyi-mysql
333cc727c10a        ruoyi-redis:latest   "docker-entrypoint.s…"   34 minutes ago      Up 34 minutes       0.0.0.0:6379->6379/tcp              ruoyi-redis

3.9 测试访问

3.9.1 验证访问前端页面

打开浏览器,访问虚拟机IP地址,可成功访问前端登录页面,如下图所示。

3.9.2 验证访问后端页面

以默认的管理员账号admin/admin123登录,可成功访问后端页面,如下图所示。

3.10 乱码处理

访问后台管理页面会发现很多如下所示的乱码。

造成这种现象是因为数据库字符集编码不符,可通过以下方式解决。

3.10.1 建立MySQL连接

利用诸如Navicat 工具,建立一个MySQL连接,如下图所示。

并在接下来的窗口中填写连接基本信息,其中连接名可自由定义,主机地址为虚拟机IP地址或云主机EIP地址,用户名和密码为3.1.3节中指定的数据库连接账号和密码,端口采用默认的3306即可。

完成上述基本信息填写后,单击左下角的“测试连接”按钮,如果能看到如下图所示的“连接成功”消息框,则表示上述基本信息填写正确,则单击“确定”按钮建立连接。

3.10.2 查看数据库

双击新建的连接,打开连接,可以看到其中存在一个名为ry-vue的数据库,双击该数据库,打开数据库,双击其中的数据表(比如sys_config),打开数据表,可以看到其中的config_name字段就是乱码,如下图所示。 

3.10.3 编辑数据库

 右击ry-vue数据库,选择“编辑数据库”菜单项,如下所示。

打开如下图所示的对话框,并将其中排序规则修改为“utf8mb4_unicode_ci”。

3.10.4 重新导入数据库

右击ry-vue数据库,选择“运行SQL文件…”菜单项,如下所示。

在打开的对话框中,单击浏览按钮,导入源码目录sql目录下的sql脚本文件,如下图所示。

单击“开始”按钮运行该脚本文件。

同样的操作,导入并运行另一个sql脚本文件。

最后重新登录后台,就可以看到正常的后台管理菜单,如下所示。

注:如是仍然不成功,在3.10.2节中,可以考虑将该数据库删除,然后重新创建一个同名的数据库,然后按照3.10.4节的操作导入数据库即可。 

  • 30
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值