frontendmavenplugin +jibmavenplugin 构建前后端混合docker 项目

核心是基于frontend-maven-plugin+ jib-maven-plugin 构建基于docker 运行的项目

项目结构

├── README.md

├── frontends  // web 

│   ├── app.css

│   ├── index.html

│   ├── package.json

│   └── yarn.lock

├── pom.xml // 构建

└── src

    ├── main // backend 

    │   ├── java

    │   │   └── com

    │   │       └── dalong

    │   │           └── Main.java

    │   └── resources

    └── test

        └── java

代码说明

主要说明项目运行的，具体代码参考github

• pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

 

    <groupId>com.dalong</groupId>

    <artifactId>guiceappdemo</artifactId>

    <version>1.0-SNAPSHOT</version>

 

    <properties>

        <maven.compiler.source>8</maven.compiler.source>

        <maven.compiler.target>8</maven.compiler.target>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

    </properties>

 

    <dependencies>

        <dependency>

            <groupId>com.google.inject</groupId>

            <artifactId>guice</artifactId>

            <version>5.1.0</version>

        </dependency>

        <dependency>

            <groupId>com.sparkjava</groupId>

            <artifactId>spark-core</artifactId>

            <version>2.9.4</version>

        </dependency>

    </dependencies>

    <build>

        <plugins>

            <plugin>

                <groupId>com.github.eirslett</groupId>

                <artifactId>frontend-maven-plugin</artifactId>

                <version>1.11.3</version>

                <configuration>

                    <workingDirectory>frontends</workingDirectory> // 指定frontends 插件工作目录

                </configuration>

                <executions>

                    <execution>

                        <!-- optional: you don't really need execution ids, but it looks nice in your build log. -->

                        <id>install node and yarn</id>

                        <goals>

                            <goal>install-node-and-yarn</goal>

                        </goals>

                        <!-- optional: default phase is "generate-resources" -->

                        <phase>generate-resources</phase>

                        <configuration>

                            <nodeVersion>v16.8.0</nodeVersion>

                            <yarnVersion>v1.22.11</yarnVersion>

                        </configuration>

                    </execution>

                    <execution>

                        <id>yarn install</id>

                        <goals>

                            <goal>yarn</goal>

                        </goals>

                        <configuration>

                            <arguments>install</arguments>

                        </configuration>

                    </execution>

                    <execution>

                        <id>build minimized webpack bundle</id>

                        <phase>generate-resources</phase>

                        <goals>

                            <goal>yarn</goal>

                        </goals>

                        <configuration>

                            <arguments>b-publish</arguments>

                        </configuration>

                    </execution>

                </executions>

            </plugin>

            <plugin>

               // jib-maven 构建进行，不需要docker 引擎

                <groupId>com.google.cloud.tools</groupId>

                <artifactId>jib-maven-plugin</artifactId>

                <version>3.3.0</version>

                <configuration>

                    <to>

                        <image>dalongrong/mydemofrontendapp</image> // 实际需要定义为自己的

                    </to>

                </configuration>

                <executions>

                    <execution>

                        <phase>package</phase>

                        <goals>

                            <goal>build</goal>

                        </goals>

                    </execution>

                </executions>

            </plugin>

 

            <plugin>

                <groupId>org.apache.maven.plugins</groupId>

                <artifactId>maven-resources-plugin</artifactId>

                <executions>

                    <execution>

                        <id>Copy  target static folder</id>

                        <phase>process-resources</phase>

                        <goals>

                            <goal>copy-resources</goal>

                        </goals>

                        <configuration>

                          // resource 资源拷贝

                            <outputDirectory>${project.build.outputDirectory}/public</outputDirectory> // public 做为web 的首页，基于sparkjava 框架

                            <resources>

                                <resource> 

                                    <directory>frontends/dist</directory>

                                    <filtering>false</filtering>

                                </resource>

                            </resources>

                        </configuration>

                    </execution>

                </executions>

            </plugin>

        </plugins>

    </build>

</project>

• 构建&&运行

会启动构建以及push 容器镜像

• 构建

mvn clean package 

• 运行

docker run -it -p 8080:8080  dalongrong/mydemofrontendapp

• 效果

说明

以上是基于frontend-maven-plugin +jib-maven-plugin 构建以及运行一个前后端混合的项目，实现前后端一体，同时实现无容器引擎的运行
## 参考资料
https://github.com/GoogleContainerTools/jib/tree/master/jib-maven-plugin
https://parceljs.org/
https://github.com/eirslett/frontend-maven-plugin
https://github.com/rongfengliang/maven-frontend-maven-jib