docker-compose實現前后端分離的自動化部署

時隔一個學年，我再一次租起了阿里雲服務器(哎呀真香啊)，其實一開始我也是拒絕的，但是由於我的電腦配置日漸落后，連啟動一個虛擬機都要等上半天。我就想說：買！咱不受那個窩囊氣。

具體配置是這樣的

好了，廢話不多說，這篇文章是搭建web環境的，看過之前的文章都知道，技術選型肯定就是docker + springboot + vue了

下載環境

這里我默認大家docker已經裝好了，如果沒有裝好，請參考我之前的文章
我們現在需要下載的是docker-compose

# 下載和安裝
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 -vesion

項目架構

這是我的項目的所有的工程文件，下面講解一下這些都是些啥玩意。

首先介紹一下前后端分別都是我的github項目，地址是 前端|后端.

前端准備

先介紹一下前端文件，也就是web文件夾
我們的前端是通過vue打包后部署到nginx，因為要做后端的負載均衡。

修改源代碼

首先我們需要修改文件，因為我們要部署到docker里面。容器與容器之間會有沖突域產生，localhost是絕對訪問不到自己的項目的，所以我們需要將我們請求后端的axios的bashUrl修改一下改成這樣-> http://example.com/server

中間的域名可以換成你的服務器ip地址，后面的server是一個聲明，好讓nginx反向代理到后端

打包項目文件

然后我們要給我們的前端打包，打開項目根目錄然后輸入下面的命令

npm run build

我們會得到一個dist文件夾，也就是我們的前端文件[我還沒有搞cdn加速，太卑微了]

編寫nginx配置文件 nginx.conf

具體文件如下:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    client_max_body_size 4m;

	upstream eblogserver{
		server eblog_server_1:8099 weight=1;
		server eblog_server_2:8098 weight=2;
	}

    sendfile        on;
    keepalive_timeout  65;
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";
    server {
        listen       80;
        server_name  localhost;
        location / {
            try_files $uri $uri/ /index.html last;
            root /usr/share/nginx/html;
            index  index.html;

        }
		location ^~ /server/ {
			proxy_pass http://eblogserver/;
		}

    }
}

上面的upstream是加權輪轉進行負載均衡的意思

編寫Dockerfile

具體文件如下

FROM nginx
COPY nginx.conf /etc/nginx/nginx.conf
COPY ./dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

后端

修改源代碼

因為我這里使用的idea的IDE，所以我直接在這里面打包，但是因為有沖突域的存在，所以我們通過127.0.0.1是訪問不到我們的mysql的，所以我們需要修改我們的配置文件，而這里又因為打包的時候需要檢查所有的test文件，包括數據庫是否可以連接。所以這里就會產生一個很大的沖突，經過度娘得知，我們可以跳過安全檢查。

打開我們的pom.xml，修改里面的properties

<properties>
    <java.version>1.8</java.version>
    <skipTests>true</skipTests><!--添加 -->
</properties>

然后我們修改我們的數據庫連接路徑

url: jdbc:mysql://docker_mysql:3306/eblog?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai

這里面的docker_mysql是我們一會啟動的mysql的服務

打包jar

具體操作如下

編寫Dockerfile

文件代碼如下

# 繼承java 1.8
FROM java:8
# 容器的操作者
MAINTAINER whoami
# 數據卷
VOLUME /temp
# 修改jar包名稱
ADD app-0.0.1-SNAPSHOT.jar eblog-server.jar
RUN bash -c 'touch /eblog-server.jar'
ENTRYPOINT ["java","-jar","eblog-server.jar"]

構建鏡像

docker build -t eblog-server .

其實這里不用編成鏡像也行，只是為了展示不同的構建方法才這么寫

docker-compose.yml

具體代碼如下

version: '3'
services:
    nginx:
        restart: always
        container_name: nginx
        build:
            context: ./web
            dockerfile: ./Dockerfile
        ports:
            - 80:80
        depends_on:
            - eblog_server_1
            - eblog_server_2
        volumes:
            - ./web/log:/var/log/nginx
    eblog_server_1:
        container_name: eblog_server_1
        image: eblog-server
        ports:
            - 8099:8099
        depends_on:
            - docker_mysql
            - docker_redis
        volumes:
          - ./server/img:/img
    eblog_server_2:
        container_name: eblog_server_2
        image: eblog-server
        ports:
            - 8098:8098
        depends_on:
            - docker_mysql
            - docker_redis
        volumes:
          - ./server/img:/img
    docker_mysql:
        container_name: docker_mysql
        image: mysql:5.6
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: 123
            MYSQL_ROOT_HOST: '%'
        ports:
            - 3306:3306
        volumes:
            - ./mysql/data:/var/lib/mysql
    docker_redis:
      container_name: docker_redis
      image: redis
      restart: always
      command: redis-server /usr/local/etc/redis/redis.conf
      ports:
        - 6379:6379
      volumes:
        - ./redis/data:/data
        - ./redis/redis.conf:/usr/local/etc/redis/redis.conf

下面講解一下文件配置

• version -> 沒什么好說的 版本而已

• services -> 需要運行的服務

• nginx,eblog_server_1 .. 標識符

• depends_on -> 等里面的服務啟動完成后才會啟動

• container_name -> 容器名稱

• image -> 使用docker里面的鏡像

• build

這個是重點

如果使用Dockerfile創建鏡像的話，比如我們的前端，我們需要利用build先構建鏡像，然后再創建容器。
而那個context就是構建的目錄,我們進入web目錄下才會后我們的dockerfile，並且在web目錄下才會由我們的nginx.conf文件

啟動服務

打包到服務器之后輸入下面的命令

# 后台運行
docker-compose up -d

# 前台運行
docker-compose up

運行成功后，打開運行中的服務:

發現運行成功

停止服務

dcoker-compose down