如何将 vue dist 文件夹部署到 GlassFish 5？

Question

我正在尝试找出一种在 GlassFish 5 上部署我的 vue 项目的方法。原因是我有两个项目。一个在 GlassFish 上运行的基于 java 的 REST 项目。以及一个纯 Vue 项目，之前运行在 node.js。

由于 2 个不同的主机，我不得不一次又一次地与 CORS 问题作斗争，我想将这两个项目合并到一台服务器上。

如果我在 Vue 文档 (how to create dist folder) 中理解正确，那么首先我必须使用 serve -s dist.

创建一个 dist 文件夹

要将此文件夹部署到我的 GlassFish 服务器上，我需要对它做什么？

目标是我可以继续在我的纯 Vue 项目中开发前端，然后从中创建一个新的 dist 文件夹，然后将它移动到我需要通过我的 GlassFish 服务器提供它的任何地方。

从那里，我在没有运行任何 CORS 问题的情况下调用我的休息界面。

我的 rest/backend 项目是用 Maven 构建的，是一个 war。

Answer 1

您可以使用 frontend-maven-plugin 在 Maven 构建中捆绑您的前端构建步骤。只需使用此 Maven 插件执行构建 Vue 应用程序的命令（例如 npm run build）并配置 .war 文件以将 dist 文件夹包含为 Web 资源。

我对 Payara（类似于 Glassfish）上的 React + Jakarta EE 应用程序运行做了同样的设置（您可能需要根据您的文件夹结构调整它）：

<project>

  <!-- dependencies like seen above -->

  <build>
    <finalName>jakarta-ee-react-file-handling</finalName>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.8.0</version>
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <phase>generate-resources</phase>
          </execution>
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm test</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
              <environmentVariables>
                <CI>true</CI>
              </environmentVariables>
              <arguments>test</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
              <environmentVariables>
                <CI>true</CI>
              </environmentVariables>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
        <configuration>
          <workingDirectory>src/main/frontend</workingDirectory>
          <nodeVersion>v12.13.1</nodeVersion>
        </configuration>
      </plugin>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.8.1</version>
      </plugin>
      <plugin>
        <artifactId>maven-surefire-plugin</artifactId>
        <version>2.22.2</version>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.2.3</version>
        <configuration>
          <webResources>
            <resource>
              <directory>${project.basedir}/src/main/frontend/build</directory>
            </resource>
          </webResources>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

我还写了一篇关于 bundling the frontend build with a Jakarta EE backend and the source code is also available on GitHub 的指南。

如何将 vue dist 文件夹部署到 GlassFish 5？

How to deploy vue dist folder to GlassFish 5?

java

glassfish

vue.js

jakarta-ee