MAC将SpringBoot项目和Vue项目部署到Docker上

一、SpringBoot项目

1、在pom.xml的properties中添加Docker镜像名称

<properties>
        <docker.image.prefix>springboot</docker.image.prefix>
        <docker.image.suffix>weather</docker.image.suffix>
    </properties>

注：springboot可按需更改，这里仅做例子使用

2、在pom.xml的plugins添加构建Docker插件

<build>
        <finalName>weather-api</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <!-- Docker maven plugin -->
            <plugin>
                <groupId>com.spotify</groupId>
                <artifactId>docker-maven-plugin</artifactId>
                <version>0.4.13</version>
                <configuration>
                    <imageName>${docker.image.prefix}/${docker.image.suffix}</imageName>
                    <dockerDirectory>src/main/docker</dockerDirectory>
                    <resources>
                        <resource>
                            <targetPath>/</targetPath>
                            <directory>${project.build.directory}</directory>
                            <include>${project.build.finalName}.jar</include>
                        </resource>
                    </resources>
                </configuration>
            </plugin>
        </plugins>
    </build>

3、在src/main/docker目录下创建Dockerfile文件

FROM adoptopenjdk/openjdk8:alpine-jre
MAINTAINER author
EXPOSE 8081
VOLUME /tmp
ADD weather-api.jar app.jar
RUN sh -c 'touch /app.jar'
ENV JAVA_OPTS=""
ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

• FROM 表示要构建的镜像基于哪个镜像，java:8表示使用jdk8环境为基础镜像
• MAINTAINET 指定维护者的信息
• EXPOSE 告诉Docker这个容器在运行时会监听哪些端口
• VOLUME 指向了一个/tmp的目录，由于 Spring Boot 使用内置的Tomcat容器，Tomcat 默认使用/tmp作为工作目录。这个命令的效果是：在宿主机的/var/lib/docker目录下创建一个临时文件并把它链接到容器中的/tmp目录
  ADD 表示把文件拷入docker ,并改名成 app.jar
• ADD 复制指定的到容器的中，可以是 Dockerfile 所在的目录的一个相对路径；可以是 URL，也可以是 tar.gz（自动解压）
• RUN 每条指令将在当前镜像基础上执行，并提交为新的镜像。（可以用 “\” 换行）
• ENV 指定环境变量，会被 RUN 指令使用，并在容器运行时保存
• ENTRYPOINT 表示使用指定命令在镜像运行时执行，启动jar，配置容器启动后执行的命令，并且不可被 docker run 提供的参数覆盖。（每个 Dockerfile 中只能有一个 ENTRYPOINT ，当指定多个时，只有最后一个起效）

4、使用Dockerfileg构建镜像，进入项目目录执行如下命令：

mvn package docker:build

第一次会启动慢一些，如果看到如下信息说明构建镜像成功：

Step 1/8 : FROM adoptopenjdk/openjdk8:alpine-jre

 ---> 11786ee7c1c9
Step 2/8 : MAINTAINER dinglong

 ---> Running in d4fdbe133c40
Removing intermediate container d4fdbe133c40
 ---> 5a374268e8e0
Step 3/8 : EXPOSE 8081

 ---> Running in 5f859c6259ec
Removing intermediate container 5f859c6259ec
 ---> a7436e452b6e
Step 4/8 : VOLUME /tmp

 ---> Running in d4f7fc3757a4
Removing intermediate container d4f7fc3757a4
 ---> 15ab8031b461
Step 5/8 : ADD weather-api.jar app.jar

 ---> 4823f70b8604
Step 6/8 : RUN sh -c 'touch /app.jar'

 ---> Running in 3a0b0c05984c
Removing intermediate container 3a0b0c05984c
 ---> 93eecba147bb
Step 7/8 : ENV JAVA_OPTS=""

 ---> Running in 046590ea8b01
Removing intermediate container 046590ea8b01
 ---> 2e63d89f45ed
Step 8/8 : ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

 ---> Running in fa76d6bcc705
Removing intermediate container fa76d6bcc705
 ---> 1cf44c745ee7
ProgressMessage{id=null, status=null, stream=null, error=null, progress=null, progressDetail=null}
Successfully built 1cf44c745ee7
Successfully tagged springboot/weather:latest
[INFO] Built springboot/weather
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  11.720 s
[INFO] Finished at: 2022-02-26T12:35:09+08:00
[INFO] ------------------------------------------------------------------------

5、使用 docker images 命令查看构建好镜像

author@authordeMacBook-Pro ~ % docker images
REPOSITORY              TAG          IMAGE ID       CREATED          SIZE
springboot/weather      latest       1cf44c745ee7   33 seconds ago   192MB

6、springboot/weather是我们构建的镜像，运行镜像命令:

docker run -p 8081:8081 -t springboot/weather:latest

• –name，指定容器名称
• -v,映射卷（将宿主机的/tmp路径映射到容器内的/tmp路径，rw表示读写，ro表示只读）
• -p，指定映射的端口
• -i，交互式
• -t，分配伪终端
• -d，后台运行

7、使用docker ps 查看正在运行的镜像：

author@authordeMacBook-Pro ~ % docker ps -a
CONTAINER ID   IMAGE                       COMMAND                  CREATED          STATUS          PORTS                    NAMES
c5e9681eafcf   springboot/weather:latest   "sh -c 'java $JAVA_O…"   21 seconds ago   Up 19 seconds   0.0.0.0:8081->8081/tcp   vigorous_feistel

二、Vue项目

1、打包成dist目录

npm run build

2、在dist同目录下创建Dockerfile文件

#dockerfile
#使用 nginx:stable作为基础镜像
FROM nginx:stable

#将当前文件夹的dist文件复制到容器的/usr/share/nginx/html目录
COPY ./dist /usr/share/nginx/html/

#声明运行时容器暴露的端口（容器提供的服务端口）
EXPOSE 3001

#CMD:指定容器启动时要运行的命令
CMD ["nginx", "-g", "daemon off;"]

注：docker中安装nginx:stable，命令：docker pull nginx:stable

3、打包镜像

docker build -t weather-ui:1.0 .

注：创建镜像的仓库是weather-ui, 标签是1.0

4、查看镜像

author@authordeMacBook-Pro ~ % docker images
REPOSITORY              TAG          IMAGE ID       CREATED         SIZE
weather-ui              1.0          1f77fa27d336   4 minutes ago   149MB
springboot/weather      latest       1cf44c745ee7   7 minutes ago   192MB

5、运行容器

docker run -P -d weather-ui:1.0

6、查看容器

author@authordeMacBook-Pro ~ % docker ps -a
CONTAINER ID   IMAGE                       COMMAND                  CREATED              STATUS              PORTS                                            NAMES
d85f08d9c28f   weather-ui:1.0              "/docker-entrypoint.…"   6 seconds ago        Up 5 seconds        0.0.0.0:55001->80/tcp, 0.0.0.0:55000->3001/tcp   naughty_moore
c5e9681eafcf   springboot/weather:latest   "sh -c 'java $JAVA_O…"   About a minute ago   Up About a minute   0.0.0.0:8081->8081/tcp                           vigorous_feistel

7、复制容器暴露出来的端口55001

CONTAINER ID   IMAGE                       COMMAND                  CREATED              STATUS              PORTS                                            NAMES
d85f08d9c28f   weather-ui:1.0              "/docker-entrypoint.…"   6 seconds ago        Up 5 seconds        0.0.0.0:55001->80/tcp, 0.0.0.0:55000->3001/tcp   naughty_moore

三、总结

因为这是一个前后端分离的项目，所以两个容器启动以后，在浏览器访问http://localhost:55001即可访问项目内容

注：55001是前端容器暴露的端口