项目描述：甜柚项目是一个博客类型项目，分为前端和后端，前端是用vue3+ts。前端有3个台。前台，后台管理系统，H5。前台3个系统组成，博客，音乐，商城。后端用springboot。部署方式为docker+mysql

页面效果

准备工作

前提：

  1. centos系统
  2. 准备docker环境
  3. docker部署数据库==> 端口8001
  4. docker部署后端==>端口8002
  5. docker部署网易云node==>端口3000
  6. docker部署网页器前台==> 端口8003
  7. docker部署后台管理系统==> 端口8004
  8. docker部署h5==> 端口8005

docker环境

首先要安装一个yum工具

1
yum install -y yum-utils

安装成功后，执行命令，配置Docker的yum源：

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

安装社区服务

1
2
3
sudo yum makecache fast
sudo yum -y install docker-ce
sudo service docker start

查看ce版本

1
yum list docker-ce.x86_64 --showduplicates | sort -r

安装docker

1
2
# Step2: 安装指定版本的Docker-CE: (VERSION例如上面的17.03.0.ce.1-1.el7.centos)
# sudo yum -y install docker-ce-[VERSION]

添加开机自启

因为我们是本地虚拟机，不能像云服务器一样无时无刻在运行，所以我们需要配置一下，让他开机自启，省得我们每次打开虚拟机都要打开docker。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 启动Docker
systemctl start docker

# 停止Docker
systemctl stop docker

# 重启
systemctl restart docker

# 设置开机自启
systemctl enable docker

# 执行docker ps命令，如果不报错，说明安装启动成功
docker ps

查看版本

1
docker --version

配置阿里云镜像加速

通过命令查看docker镜像信息

1
docker info

登录阿里云镜像工作台

配置镜像加速地址，一起黏贴，哈哈哈。

1
2
3
4
5
6
7
8
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://co7l7wkt.mirror.aliyuncs.com"]
}
EOF	
sudo systemctl daemon-reload
sudo systemctl restart docker

通过docker info 查看docker信息，配置源成功

docker部署数据库

前提开放端口

打开端口：firewall-cmd –zone=public –add-port=8001/tcp –permanent

重启防火墙：firewall-cmd –reload

查看端口是否打开：firewall-cmd –list-all

拉取镜像

1
docker pull mysql

创建容器

1
2
3
4
5
6
docker run -d \
  --name mysql2 \
  -p 8001:3306 \
  -e TZ=Asia/Shanghai \
  -e MYSQL_ROOT_PASSWORD=196691 \
  mysql

测试navicat测试连接

进入容器

1
docker exec -it mysql2 /bin/bash

退出容器

1
exit

docker部署springboot

java应用打包成jar文件

创建DockerFile文件

1
2
3
4
5
6
7
8
9
FROM openjdk:17

COPY *.jar /app.jar  

CMD ["--server.port=8002"]

EXPOSE 8002
 
ENTRYPOINT ["java","-jar","/app.jar"]

把jar文件和dockerfile文件放入centos

构建镜像

1
docker build -t tainyou_back .

查看镜像

生成容器

1
docker run -d -p 8002:8002 --name tianyou_back tainyou_back

测试

测试成功

docker部署网易云node

准备Dockerfile和api应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 使用官方的Node.js作为基础镜像
FROM node

# 设置工作目录
WORKDIR /usr/src/app

# 复制package.json和package-lock.json到工作目录
COPY package*.json ./

# 将npm源设置为淘宝镜像
RUN npm config set registry https://registry.npmmirror.com/

# 安装依赖
RUN npm install

# 将所有文件复制到工作目录
COPY . .

# 暴露容器的端口号
EXPOSE 3000

# 运行Node.js应用
CMD [ "node", "app.js" ]
FROM node:lts-alpine

RUN apk add --no-cache tini

ENV NODE_ENV production
USER node

WORKDIR /app

COPY --chown=node:node . ./

RUN yarn --network-timeout=100000

EXPOSE 3000

CMD [ "/sbin/tini", "--", "node", "app.js" ]

构建镜像

1
docker build -t musicapp .

这个有一点特殊，要进去文件夹里面构建镜像

运行容器

1
docker run -d -p 3000:3000  --name musicapp  musicapp

测试成功

docker部署前台

修改一下前台打包访问路径

1
VITE_APP_BASE_URL = http://47.107.253.199:8002/api

再修改一下音乐端口

执行打包命令

1
npm run build

创建nginx文件夹，里面创建default.conf文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
server {
    listen       8003;
    listen  [::]:8003;
    server_name  localhost;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    location / {
        root    /usr/share/nginx/html; 
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

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

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  zouwen.xin;
        rewrite ^(.*) https://$server_name$1 permanent;
        root         /home/www/website;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
    server {
        listen 80;
        #填写绑定证书的域名
        server_name zouwen.xin; 
        #把http的域名请求转成https
        return 301 https://$host$request_uri; 
    }

# Settings for a TLS enabled server.

   server {
       listen       443 ssl http2;
       listen       [::]:443 ssl http2;
       server_name  zouwen.xin;
       root         /home/www/website;

       ssl_certificate "/home/ssl/zouwen.xin.pem";
       ssl_certificate_key "/home/ssl/zouwen.xin.key";
       ssl_session_cache shared:SSL:1m;
       ssl_session_timeout  10m;
       ssl_ciphers HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers on;

       # Load configuration files for the default server block.
       include /etc/nginx/default.d/*.conf;

       error_page 404 /404.html;
           location = /40x.html {
       }

       error_page 500 502 503 504 /50x.html;
           location = /50x.html {
       }
   }

}

创建Dockerfile文件

1
2
3
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

上传文件

构造镜像，注意不能少了点

1
docker build -t tianyou_front .

创建容器

1
docker run -d --name tianyou_front -p 8003:8003 tianyou_front

音乐页面出了一点问题

原来是走了代理

重新部署一下前台，成功搞定

docker部署后台管理系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
server {
    listen       8004;
    listen  [::]:8004;
    server_name  localhost;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    location / {
        root    /usr/share/nginx/html; 
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
docker build -t tianyou_admin .
docker run -d --name tianyou_admin -p 8004:8004 tianyou_admin

docker部署H5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
    listen       8005;
    listen  [::]:8005;
    server_name  localhost;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    location / {
        root    /usr/share/nginx/html; 
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
1
2
docker build -t tianyou_vant .
docker run -d --name tianyou_vant -p 8005:8005 tianyou_vant