docker Compose部署springboot+vue前端端分離

2022-08-11 18:00:43

(一) 準備工作

一、安裝

1、安裝Docker並設定阿里雲倉庫加速

① 環境檢視，選擇對應的docker的安裝版本：

docker 幫助檔案：https://docs.docker.com/get-started/overview/

# 先檢視發行版
cat /etc/os-release

# 若是redhat，檢視系統資訊:
cat /etc/redhat-release

# 若是debain，檢視系統資訊:
cat /etc/debian_version

2、安裝Docker

選擇linux版本的docker安裝教學

# 1、解除安裝舊版本：
sudo yum remove docker 
                  docker-client 
                  docker-client-latest 
                  docker-common 
                  docker-latest 
                  docker-latest-logrotate 
                  docker-logrotate 
                  docker-engine
 # 2、使用倉庫安裝
 # 需要的安裝包
 sudo yum install -y yum-utils   
 # 官網提供的倉庫，下載速度太慢【預設是國外的，我們不要使用國外的，需要使用國內的阿里雲映象地址】 
# 不用官網的倉庫，選擇阿里雲的倉庫  
 sudo yum-config-manager 
    --add-repo 
    https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
    
# 更新yum 軟體包索引    
yum makecache fast
    
    
# 3、安裝 Docker 引擎   docker-ce 社群  docker-ee 企業版
 yum install docker-ce docker-ce-cli containerd.io

 
 # 4、啟動 Docker
 systemctl start docker
 
 # 檢查是否成功啟動
 docker version
 
 # 5、測試hello-world 
 docker run hello-world
 
 # 檢視下載的映象
 docker images
 
 # 6、瞭解解除安裝工作：
 # 解除安裝 Docker 引擎（解除安裝依賴）
 sudo yum remove docker-ce docker-ce-cli containerd.io
 # 刪除所有映像、容器和卷（珊除資源） /var/lib/docker 是docker預設的工作路徑
 sudo rm -rf /var/lib/docker
 sudo rm -rf /var/lib/containerd

2-2、阿里雲映象加速

登入阿里雲官網，點選控制檯，找到產品與服務，搜容器映象服務

映象加速器：

設定使用：

sudo mkdir -p /etc/docker

sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://o10wzpax.mirror.aliyuncs.com"]
}
EOF

sudo systemctl daemon-reload

sudo systemctl restart docker

3、安裝DockerCompose

(1) 下載

# 官網提供的下載地址太慢了

# 使用daocloud提供的下載速度更快
curl -L https://get.daocloud.io/docker/compose/releases/download/1.29.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

(2) 授權

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

(3) 驗證是否安裝成功：

[root@iZwz9535z41cmgcpkm7i81Z bin]# docker-compose --version
docker-compose version 1.29.1, build c34c88b2

二、修改生產環境下的設定以及打包操作：

前端、後端增加生產環境設定，然後修改：專案主機號、請求路徑以及將mysql和redis的主機號修改為docker compose的服務名

1、修改前後端組態檔的專案主機號

前端修改設定存取後端路徑，後端改的就是跨域設定允許前端存取的路徑

前端生產環境設定：

後端生產環境設定(跨域設定)：

2、修改前後端組態檔的專案請求路徑

後端專案暴露的埠是8888，編寫docker-compose.yaml時記得暴露

3、後端生產環境的設定把mysql和redis的主機號修改為docker compose的服務名

4、打包

(1) 前端打包命令：npm run build

打包生成了一個dist包

(2) 後端是多環境設定，打包記得把依賴一起打包：

記得設定啟用的設定環境為 prod，如果忘記在springboot 設定中環境設定了，還可以在製作spirngboot映象的dockerfile 中指明生產環境是prod

# springboot 中 application-prod.properties檔案中設定
spring.profiles.active=prod

打包記得把依賴一起打包：

(二) 開始部署

# 建立 /mnt/docker/ 目錄
mkdir -p /mnt/docker/
cd /mnt/docker/

接下來：

① 編寫構建各個專案模組的Dockerfile

② 編寫docker-compose.yaml

③ mysql、redis、nginx的設定

④ 啟動dockerCompose編排

⑤ 匯入資料[資料庫表資料、前端靜態web資源]

⑥ 測試存取，並排除錯誤

一、blog_api 製作映象

1、上傳打包生成的jar包，上傳到/mnt/docker/ 目錄，並修改jar包的包名為 blog_api.jar

2、編寫映象檔案 api_dockerfile：

FROM java:8 
MAINTAINER shan <test@qq2363581677@163.com> 
ADD ./blog_api.jar /api.jar
CMD java -jar /api.jar --spring.profiles.active=prod

3、構建生成映象 api：

命令： docker build -f dockerfile路徑 -t 自定義映象名稱 .

# blog_api 生成映象
docker build -f ./api_dockerfile -t api .

二、dockerCompose編排

1、編寫 docker-compose.yaml

version: "3"
services:
  mysql:
    image: mysql:5.7
    container_name: mysql
    volumes:
      - /mnt/docker/mysql/conf:/etc/mysql/conf
      - /mnt/docker/mysql/logs:/logs
      - /mnt/docker/mysql/data:/var/lib/mysql 
    environment:
      MYSQL_ROOT_PASSWORD: admin
  redis:
    image: redis
    container_name: redis
    volumes:
      - /mnt/docker/redis/data:/data
  api:
    image: api
    container_name: api
    expose:
      - "8888"
    depends_on:
      - mysql
      - redis
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - /mnt/docker/nginx/:/etc/nginx/
      - /mnt/shan/blog:/shan/blog
    links:
      - api
    depends_on:
      - api

2、dockercompose 進行編排

★ 前提：mysql、redis、nginx的組態檔設定好後才可以進行編排

# 切換到docker-compose.yaml目錄下，啟動容器
cd /mnt/docker/
docker-compose up
docker-compose up -d #代表後臺啟動


docker-compose down  #停止並刪除容器
docker-compose start #啟動已有容器
docker-compose stop  #停止執行的容器

三、mysql、redis、nginx的設定：

1、mysql的設定：

① mysql 服務在docker-compose.yaml 中的編寫內容為：

  mysql:
    volumes:
      - /mnt/docker/mysql/conf:/etc/mysql/conf

② 掛載mysql的組態檔：

mkdir -p /mnt/docker/mysql/conf
cd /mnt/docker/mysql/conf
# 編寫my.cnf檔案[vim my.cnf]

[mysqld]
#
# Remove leading # and set to the amount of RAM for the most important data
# cache in MySQL. Start at 70% of total RAM for dedicated server, else 10%.
# innodb_buffer_pool_size = 128M
#
# Remove leading # to turn on a very important data integrity option: logging
# changes to the binary log between backups.
# log_bin
#
# Remove leading # to set options mainly useful for reporting servers.
# The server defaults are faster for transactions and fast SELECTs.
# Adjust sizes as needed, experiment to find the optimal values.
# join_buffer_size = 128M
# sort_buffer_size = 2M
# read_rnd_buffer_size = 2M
datadir=/var/lib/mysql
socket=/var/lib/mysql/mysql.sock
character-set-server=utf8
# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0
lower_case_table_names=1
pid-file=/var/run/mysqld/mysqld.pid
sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

2、redis的設定：

① redis 服務在docker-compose.yaml 中的編寫內容為：

  redis:
    volumes:
      - /mnt/docker/redis/data:/data

由於沒有掛載組態檔，所有不用掛載redis的設定

3、nginx的設定：

① nginx 服務在docker-compose.yaml 中的編寫內容為：

  nginx:
    volumes:
      - /mnt/docker/nginx/:/etc/nginx/ #組態檔
      - /mnt/shan/blog:/shan/blog	  # web資源

② 掛載nginx的組態檔：

mkdir -p /mnt/docker/nginx/
cd /mnt/docker/nginx/
# 編寫nginx 組態檔

nginx基本設定，編寫nginx.conf檔案[vim 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;
}

nginx基本組態檔nginx.conf中include了一個mime.types組態檔：

上傳mime.types組態檔：

mime.types組態檔: 在nginx安裝包的conf目錄下，下載一個nginx獲取，然後進行上傳
mime.types的上傳目錄：結合dockercompose中資料卷的掛載點，推斷出 /mnt/docker/nginx/

cd /mnt/docker/nginx/
# 使用xftp工具上傳mime.types組態檔

注意：沒有自己的伺服器，把下面 blog.conf設定中的域名server_name 改為localhost，並且沒有ssl證書，記得把443(https 協定埠號) 的設定去掉，並把80（http協定埠號）rewrite 部分去掉。

nginx組態檔blog.conf 記得將組態檔的中文註釋去除再複製貼上。

mkdir -p /mnt/docker/nginx/conf.d
cd /mnt/docker/nginx/conf.d
# 編寫blog.conf檔案[vim blog.conf]

gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_vary off;
upstream apistream{
        server api:8888;
}

server{
        listen 80;
        server_name blog.yilele.site; 
        rewrite ^(.*) https://blog.yilele.site/$1 permanent;
}

server {
               listen       443 ssl;
               server_name  blog.yilele.site;
               index   index.html;
               ssl_certificate      /etc/nginx/ssl/blog.yilele.site.pem;
               ssl_certificate_key  /etc/nginx/ssl/blog.yilele.site.key;
               ssl_session_timeout  5m;
               location /api {#請求https://blog.yilele.site/api 會代理轉發到 api:8888
					proxy_pass http://apistream;
               }              
               location / {
                        root /shan/blog/;
                        index index.html;
               }
              location ~* .(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                          root /shan/blog/;
                          index index.html;
                          add_header Access-Control-Allow-Origin *;
              }
}

③ 設定nginx的ssl證書

申請、下載和上傳伺服器的ssl證書

下載ssl證書：要選擇nginx型別的下載
上傳nginx的ssl證書：要注意證書檔案的名稱、證書格式和咱設定在nginx的組態檔保持一致

# nginx的組態檔： 
server{
        listen 80;
        server_name blog.yilele.site; #域名
   		.....
}

# ssl的PEM 證書通常具有以下擴充套件: .pem、.crt、.cer 和.key
ssl_certificate      /etc/nginx/ssl/blog.yilele.site.pem;#nginx的ssl公鑰，注意是pem字尾,可以根據阿里雲ssl下載的格式填寫
ssl_certificate_key  /etc/nginx/ssl/blog.yilele.site.key;#nginx的ssl私鑰
               
               
# 再根據 docker-compose.yml 檔案推出ssl證書上傳的目錄：
   volumes:
    - /mnt/docker/nginx/:/etc/nginx/

上傳ssl證書：

mkdir -p /mnt/docker/nginx/ssl
cd /mnt/docker/nginx/ssl
# 使用xftp工具上傳ssl證書(blog.yilele.site.pem、blog.yilele.site.key)

可以啟動dockercompose 進行編排啦~

四、匯入資料[資料庫表的資料、前端靜態web資源]

1、匯入資料庫表的資料

(1) 匯入sql檔案

① mysql的掛載資訊：

    volumes:
		.....
      - /mnt/docker/mysql/data:/var/lib/mysql

② 資料庫檢視工具navicat 把表匯出sql檔案：

③ 上傳sql檔案（檔名：blog.sql）：

在資料庫中建立和 sql檔案（blog.sql）對應的資料庫名blog

cd /mnt/docker/mysql/data
# 使用 xftp 將 blog.sql 進行傳輸

(2) 執行sql檔案(建立blog 資料庫並匯入資料)

# 進入mysql容器:
docker exec -it mysql bash
# 切換到掛載目錄(blog.sql 所在目錄): 
cd /var/lib/mysql
# 檢視該目錄下所有檔案: 
ls
# 可以看到blog.sql也在該目錄下

接下來在docker中執行該sql:

mysql -uroot -p 
# 輸入密碼 admin ，進入docker中的資料庫
# 建立資料庫
create database blog;
# 退出回到容器
exit
# 在/var/lib/mysql目錄下，將檔案blog.sql匯入資料庫 
mysql -u root -p blog < blog.sql;
# 輸入密碼 admin

# 重新進入資料庫，切換資料庫
mysql -uroot -p 
# 輸入密碼 admin ，進入docker中的資料庫
use blog;
# 執行sql並儲存資料庫
source blog.sql;
# 執行source命令可能會報錯，打不開blog.sql 檔案，這個問題可以忽略。

將.sql檔案匯入資料庫命令：mysql -u 使用者名稱 -p 資料庫(blog) < 要匯入的資料庫資料(blog.sql)

結果檢查

use blog; 
show tables; 
select * from ms_admin;

如果能查出來結果，那就說明我們的mysql匯入sql檔案成功了。

退出mysql資料庫：exit
退出mysql容器：exit

(3) 檢查mysql的設定

● 編排dockerCompose之後檢查docker中mysql的設定是否成功：

docker logs -f mysql

沒有看到報錯資訊即成功(警告資訊可以忽略)

2、匯入前端靜態web資源

(1) nginx 前端web資源的設定：

   volumes:
   	   ......
     - /mnt/shan/blog:/shan/blog	 # web資源

# 在log目錄用於上傳前端的web資源(打包工具打包生成的html、css、js、圖片等)
cd /mnt/shan/blog
# 使用xftf 上傳web資源

(2) 手動壓縮前端dist包，上傳到 /mnt/shan/blog 目錄

手動壓縮：是為了提高傳輸速度
安裝解壓縮工具：

#獲取安裝列表  yum安裝列表中搜尋zip/unzip是否存在
yum list|grep zip
yum list|grep unzip

#執行安裝支援zip命令 
yum install -y zip

#執行安裝支援unzip命令 
yum install -y unzip

上傳web資源(dist 壓縮包)

# 使用xftf 上傳web資源
# 解壓
unzip dist.zip

可以測試排錯啦~

五、測試並排除錯誤：

(1) 測試：

api 模組的測試：存取 https://blog.yilele.site/

● 當我們覺得部署完全搞定的時候，就可以docker-compose up -d 後臺啟動，這樣的話關掉遠端連線也能執行了。

(2) 排查錯誤：

docker 常用命令：

# 容器命令
● 檢視執行的容器：docker ps
● 刪除容器：docker rm -f 容器id或容器名稱
● 刪除所有容器：docker rm -f $(docker ps -aq)
● 建立、啟動並進入容器: docker run -it 容器id或容器名稱 bash 
● 進入啟動過的容器: docker exec -it 容器id或容器名稱 bash 
● 退出容器：【停止容器】exit 【非停止容器】ctr+p+q
● 啟動容器：docker start 容器id

# 映象命令
● 檢視所有映象： docker images
● 刪除映象： docker rmi -f 映象id
● 刪除所有映象： docker rmi -f $(docker images -aq)

dockerCompose 常用命令：

# 切換到docker-compose.yaml目錄下，啟動容器
docker-compose up
docker-compose up -d #代表後臺啟動


docker-compose down  #停止並刪除容器
docker-compose start #啟動已有容器
docker-compose stop  #停止執行的容器

檢視紀錄檔進行排查錯誤：

# 檢視後端專案的錯誤-紀錄檔（進入docker-compose的目錄下）：
cd /mnt/docker/
docker-compose logs

# 檢視伺服器端ngix-紀錄檔：
docker logs nginx

到此這篇關於docker Compose部署springboot+vue前端端分離的文章就介紹到這了,更多相關docker Compose部署springboot vue內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！