核心是基于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