Liferay DXP前端热部署

Question

我想做一些Portlet前端代码(HTML，CSS，JS)的热部署，这样就可以节省开发时间，而不是需要重新部署整个Portlet。

Portlet是一个.war文件。

在好的旧Liferay6.2中，通过覆盖tomcat/webapps/portlet-name目录中的静态前端代码，这是可能的。在Liferay中，这是不可能的，因为Portlet不再被提取到tomcat/webapps/。

是否有可能进行前端-热部署，以便我可以更改例如，我的.html文件的动态，我不需要重新部署整个.war Portlet？

Answer 1

我们找到了一个替代的解决方案来改善我们的前期开发时间，但它的工作方式完全不同，就像它在旧的Liferay 6.2中那样。

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

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

.dev文件：

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"
  ]
}

代理服务器可以通过调用‘纱运行启动:开发’来启动，然后您可以通过http://localhost:8088访问代理服务器上的Liferay

Answer 2

除了所描述的方法对于维护来说是非常糟糕的实践，我想知道您实际上节省了多少时间(正如您所说的，这是您的动机)。

您可以始终实现您的portlet以包含来自Liferay控制范围之外的各种资源，但是很自然，提供的工具不会帮助您保持所有东西保持同步--这将是您要解决的个人问题。

顺便提一句:Tomcat的模式(您只需替换webapp目录中的随机内容)称为开发模式。