vue.js 和 springboot 项目制作 docker 镜像

这里用了两个框架的名字而不是 node, java，只是偏向于项目常用的而不是考虑大而全的。

本文用到的所有环境

linux: 3.10.x
docker: 20.10.1 (API: 1.41)
windows: 20H2
node.js: v12.16.1
yarn: 1.22.4
vue-cli: @vue/cli 4.5.9
maven: 3.6.3
springboot: 2.2.10.RELEASE
个别版本会在配置文件中指定

vue.js

这里会演示一个最小化的部署, web-ui 和 web-api 在一个 docker network里面，
通过容器名+端口可以直接访问。nginx 也可以直接proxy_pass。

docker network

先创建一个网络

docker network create my-network

nginx

在运行 vue 项目的时候，需要一个静态资源服务器，这里使用了 nginx。
需要预先写好nginx的配置在 runtime 的阶段自动加载即可

在项目的根目录建立nginx文件夹，新建文件 default.conf

server {  
  listen       80;  
  server_name  localhost;  
  
  access_log  /var/log/nginx/host.access.log  main;  
  error_log  /var/log/nginx/error.log  error;  
  
  # static location  
  location / {  
      root   /usr/share/nginx/html;  
      index  index.html index.htm;  
  }  
  
  # WEB API  
  location /web-api/ {  
    rewrite  /web-api/(.*)  /$1  break;  
    proxy_pass http://web-api:9527;  
  }  
}

注意： proxy_pass 后面的主机名是后端api的容器名所以才能够直接proxy_pass

如果你想要做一些高级特性，例如负载均衡热备等。需要再配置upstream，然后为每个后端容器分配IP

dockerfile

# build  
FROM node:12.20.0-alpine as build  
MAINTAINER wayne
  
## work dir  
WORKDIR /usr/share/wayne/web-projects
COPY . /usr/share/wayne/web-projects
  
## proxy  如果你需要挂代理的话 这些会很有用，如果不是 请删掉
RUN yarn config set proxy http://10.68.168.114:10809  
RUN yarn config set https-proxy http://10.68.168.114:10809  
  
## install & build  
RUN yarn install  
RUN yarn build  
  
# run  
FROM nginx as runtime  
MAINTAINER wayne
  
COPY --from=build /usr/share/wayne/web-projects/dist/ /usr/share/nginx/html/  
COPY --from=build /usr/share/wayne/web-projects/nginx/default.conf /etc/nginx/conf.d/default.conf  
  
EXPOSE 80

build & deploy

构建镜像

docker build -t wayne/web-ui:0.1.0 .

构建完了之后会在当前的docker images里

run

docker run -d -p 80:80 --name web-ui --net my-network wayne/web-ui:0.1.0

如果这里没有启动web-api 那么运行会失败。只需要先把web-api启动起来再启动ui即可。

springboot

docker network

先创建一个网络 (如果创建了此步骤省略)

docker network create my-network

maven

找到有 spring-boot-maven-plugin 的pom

在 build.plugins 里加入一个 plugin

<plugin>
    <groupId>com.spotify</groupId>
    <artifactId>dockerfile-maven-plugin</artifactId>
    <version>1.4.10</version>
    <executions>
        <execution>
            <id>default</id>
            <goals>
                <goal>build</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <repository>wayne/web-api</repository>
        <tag>${project.version}</tag>
        <buildArgs>
            <JAR_FILE>${project.build.finalName}.jar</JAR_FILE>
        </buildArgs>
    </configuration>
</plugin>

dockerfile

FROM openjdk:8-jre
MAINTAINER wayne
EXPOSE 9527
ENTRYPOINT ["java", "-jar", "/usr/share/wayne/web-api.jar"]

# Add the service itself
ARG JAR_FILE
ADD target/${JAR_FILE} /usr/share/wayne/web-api.jar

build & deploy

这是最小化的方式进阶版请往下看

在项目根目录运行 mvn package 即可。

build & deploy (进阶可以省略该步骤)

远程构建

远程构建需要依赖com.spotify.dockerfile-maven-plugin 这个插件。
上面已经安装过了。

但还需要对docker和客户机做一些配置

docker

开放docker远程端口

vim /lib/systemd/system/docker.service

# 修改下面的 在dockerd 后面追加 -H 参数
ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock

重启docker 应用修改

systemctl daemon-reload
systemctl restart docker

客户机

设置环境变量

DOCKER_HOST=tcp://docker_ip:2375

自定义构建

在最小化设置版本中只需要执行package 就可以打出jar包并且还会打出镜像。
那么我只想单独打出jar包或镜像要怎么做。

在 dockerfile-maven-plugin 插件的 plugin.executions.execution.goals.goal 删掉 build。

这样每次package 就不会构建出镜像。

构建镜像命令为 mvn dockerfile:build

再稍微结合一下

清理
构建
跳过测试

mvn clean package dockerfile:build -Dmaven.test.skip=true

run

docker run -d -p 9527:9527 --name web-api --net my-network wayne/web-api:0.1.0.RELEASE

如果没有特别需要直接访问端口可以不暴露出去，在一个网络里的 web-ui 一样可以访问得到

Wayne's blog