Liferay DXP Frontend Горячее развертывание - PullRequest
Новая
       61

Liferay DXP Frontend Горячее развертывание

2 голосов
/ 17 июня 2019

Я бы хотел выполнить горячее развертывание интерфейсного кода (HTML, CSS, JS) для некоторого портлета, чтобы можно было сэкономить время разработки и не требуется повторное развертывание всего портлета.

Портлет - это файл .war.

В старом добром Liferay 6.2 это было просто возможно, переписав статический код внешнего интерфейса в каталоге tomcat/webapps/portlet-name.В Liferay DXP это больше невозможно, так как портлет больше не извлекается в tomcat/webapps/.

Есть ли возможность для frontend-Hot-Deploy, так что я могу изменить, например, мой файл .html вfly, и мне не нужно повторно развертывать весь .war-портлет?

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Мы нашли альтернативное решение, чтобы сократить время разработки веб-интерфейса, но оно работает совершенно иначе, чем в старом 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"
  ]
}

Прокси-сервер можно запустить, вызвав 'yarn run start: dev', затем вы можете получить доступ к Liferay через прокси-сервер через http://localhost:8088

1 голос
/ 17 июня 2019

Помимо описанного метода действительно плохой практики для обслуживания, мне интересно, сколько времени вы на самом деле экономите (как вы говорите, это ваша мотивация).

Вы всегда можете реализовать свой портлет, включив в него различные ресурсы из мест, находящихся вне контроля Liferay, но, естественно, предоставленные инструменты не помогут вам поддерживать синхронизацию - это будет вашей личной проблемой, которую нужно решить.

Кстати: режим Tomcat, в котором вы можете просто заменить случайный контент в каталоге веб-приложений, называется режимом development .

...