Liferay DXP前端热部署

我想对一些Portlet的前端代码（HTML、CSS、JS）进行热部署，这样可以节省开发时间，而不需要重新部署整个Portlet

Portlet是一个.war文件

在旧的Liferay 6.2中，只需覆盖tomcat/webapps/portlet name目录中的静态前端代码即可实现这一点。 在Liferay DXP中，这不再可能，因为Portlet不再被提取到

tomcat/webapps/

---

是否有可能进行前端热部署，这样我就可以动态更改例如.html文件，而不必重新部署整个.war Portlet？

除了所描述的方法对于维护来说是非常糟糕的做法之外，我想知道您实际节省了多少时间（正如您所说，这是您的动机）

您始终可以实现您的portlet，以包含来自Liferay无法控制的位置的各种资源，但很自然，提供的工具无法帮助您保持所有内容的同步—这将是您个人需要解决的问题

---

顺便说一下：Tomcat的模式称为开发模式，在这种模式下，您可以只替换webapps目录中的随机内容

我们找到了另一种解决方案来缩短前端开发时间，但它的工作原理与旧版Liferay 6.2完全不同

基本上，我们使用一个express.js代理服务器，它在不同的端口上与Liferay并行运行。此代理服务器将所有请求转发给其他正在运行的liferay，但对HTML、CSS和JS文件的请求除外。它们直接从本地文件系统提供服务。当HTML、CSS或JS文件被更改和保存时，也会触发前端的自动重建

这个小型代理服务器基本上由以下两个文件组成：

dev-server.js文件：

const packageConfig = require('../../../package.json');
const projectName = packageConfig.name;

const config = Object.assign({}, {
    port: 8088,
    liferayUrl: 'http://localhost:8080',
    liferayVersion: 7,
    webpackConfigFile: './webpack.development.config.js',
}, packageConfig.devServer || {});

const path = require('path');
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const webpackCompiler = webpack(require(config.webpackConfigFile));
const express = require('express');
const app = express();

const httpProxy = require('http-proxy');
const liferayProxy = httpProxy.createProxyServer();

let publicPath = `/o/${projectName}/static/js/`;
if(config.liferayVersion === 6) {
    publicPath = `/${projectName}/static/js/`
}

app.use(
    middleware(webpackCompiler, {
        publicPath: `/o/${projectName}/static/js/`
    })
);

app.all('/*', function(req, res) {
    liferayProxy.web(req, res, {target: config.liferayUrl});
});

app.listen(config.port, () => console.log('Development server listening on port ' + config.port + '!'));

以及package.json：

{
  "name": "react-base",
  "version": "1.0.0",
  "license": "NOLICENSE",
  "private": true,
  "scripts": {
    "preinstall": "node ./target/ui-build/build/preInstallHook.js",
    "build-dev": "gulp --gulpfile ./target/ui-build/build/gulpfile.js && webpack --config ./target/ui-build/build/webpack.development.config.js --progress --profile",
    "build": "gulp --gulpfile ./target/ui-build/build/gulpfile.js production && webpack --config ./target/ui-build/build/webpack.production.config.js --bail",
    "lint": "eslint -c ./target/ui-build/build/.eslintrc.js --rulesdir \"node_modules/@myproject/react-component-lib/eslint-rules/\"  \"src/main/react/**/*.js\" ",
    "test": "jest --config=./target/ui-build/build/jest.config.js --rootDir=./ --passWithNoTests",
    "coverage": "jest --config=./target/ui-build/build/jest.config.js --rootDir=./ --passWithNoTests --coverage",
    "stats": "webpack-bundle-analyzer ./target/generated-sources/js/stats.json",
    "start:dev": "node ./target/ui-build/build/dev-server.js"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "mobx": "3.1.16",
    "mobx-react": "4.4.3",
    "prop-types": "15.7.2",
    "react": "16.8.4",
    "react-dom": "16.8.4"
  },
  "devDependencies": {
    "autoprefixer": "^9.1.5",
    "babel-core": "^7.0.0-bridge.0",
    "@babel/core": "7.1.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "^23.0.0",
    "babel-loader": "8.0.4",
    "@babel/plugin-proposal-class-properties": "7.1.0",
    "@babel/plugin-proposal-decorators": "7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
    "@babel/plugin-transform-runtime": "7.1.0",
    "@babel/preset-env": "7.1.0",
    "@babel/preset-react": "7.0.0",
    "css-loader": "1.0.0",
    "enzyme": "3.4.0",
    "enzyme-adapter-react-16": "1.5.0",
    "eslint": "4.19.1",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "7.11.1",
    "express": "4.17.1",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.0",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "http-proxy": "1.17.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "^23.0.0",
    "jest-cli": "^23.0.0",
    "node-sass": "4.9.3",
    "postcss-loader": "3.0.0",
    "raf": "3.4.1",
    "react-test-renderer": "16.8.4",
    "run-sequence": "1.2.2",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "url-loader": "1.1.2",
    "url-search-params-polyfill": "5.0.0",
    "webpack": "4.20.2",
    "webpack-bundle-analyzer": "^3.0.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-middleware": "3.7.0"
  },
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

---

代理服务器可以通过调用'warn run start:dev'启动，然后您可以通过

通过代理服务器访问Liferay。这将大大节省本地开发的时间，并为我们（~50名开发人员）节省了大量时间，在LR 6.2中为此使用一些脚本。所以我想现在已经不可能在新的LR中直接编辑.html文件了？非常感谢您的帮助：）我不知道Liferay中有任何直接的信息。正如我所说：您不仅限于从Liferay中加载HTML和其他文件（至少在开发时是这样）。您可以像以前一样在webapp中部署它们，并从portlet代码中引用这些其他位置。听起来像是一种创造性的解决方法。如果你有一个liferay.com帐户，你应该可以在那里提交一篇文章，否则我可以帮你获得权限。