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

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 shenlan
  
## work dir  
WORKDIR /usr/share/shenlan/web-projects
COPY . /usr/share/shenlan/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 shenlan
  
COPY --from=build /usr/share/shenlan/web-projects/dist/ /usr/share/nginx/html/  
COPY --from=build /usr/share/shenlan/web-projects/nginx/default.conf /etc/nginx/conf.d/default.conf  
  
EXPOSE 80

build & deploy

构建镜像

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

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

run

docker run -d -p 80:80 --name web-ui --net my-network shenlan/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>shenlan/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 shenlan
EXPOSE 9527
ENTRYPOINT ["java", "-jar", "/usr/share/shenlan/web-api.jar"]

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

build & deploy

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

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

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

远程构建

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

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

  1. 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
  1. 客户机

设置环境变量

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 shenlan/web-api:0.1.0.RELEASE

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

本文链接:https://blog.inmind.ltd/index.php/archives/71/
This blog is under a CC BY-NC-SA 4.0 Unported License