Question

我已经构建了一个角度为5的应用程序，该应用程序在不同的服务器和主机上远程使用rest api。在我的本地我使用apache服务器来部署角度应用程序，它正在按预期工作。

为了将代码提升到其他环境，我使用＆＃34; ng build --prod＆＃34;来构建生产构建。（角度cli）我看到dist文件夹中的最终内容。我认为从角度标准来看，它将兼容并且更好地建议使用apache服务器，Ngnix等部署角度为4/5的应用程序。但根据我的组织限制，我们必须使用jboss来托管web-app。我没有战争档案。我只有dist文件夹的内容。你可以帮我把角度应用程序部署到jboss吗？

Screenshot of dist folder contents

Answer 1

没有战争我不确定角度应用程序将部署在jboss上。

要在JBoss上部署AngularJS应用程序，我建议您创建一个Web项目，并使用Maven等构建管理器将其构建并打包为可随时部署的WAR存档。

例如，您可以按照JBoss提供的 kitchensink-angularjs快速入门进行操作。

Answer 2

使用npm命令安装grunt和grunt-war
在角项目中添加以下Gruntfile.js，这意味着在项目文件夹中
运行“ng build”命令，它会生成dist文件夹
转到项目文件夹并运行“grunt war”命令，它将为您提供war文件作为结果，可以将其部署到您的jboss服务器中
您可以更改war文件名/ war输出路径，我将“Test”作为war文件名，“warFile”是输出文件夹。

Gruntfile.js：

module.exports = function ( grunt ) {
    grunt.loadNpmTasks( 'grunt-war' );

    var taskConfig = {
        war: {
            target: {
                options: {
                    war_verbose: true,
                    war_dist_folder: 'warFile',           // Folder path seperator added at runtime. 
                    war_name: 'Test',            // .war will be appended if omitted 
                    webxml_welcome: 'index.html',
                    webxml_display_name: 'Test'
                },
                files: [
                    {
                        expand: true,
                        cwd: 'dist',
                        src: ['**'],
                        dest: ''
                    }
                ]
            }
        }
    };

    grunt.initConfig( taskConfig );
};

Answer 3

我们有相同的要求，这就是我们如何生成* .war并设法部署到jboss / wildfly应用程序。

在此之前，需要在您的计算机上安装gulp。 required('****')中的库位于package.json devDependencies，否则会出错。

index.html更改为<base href="/">
使用gulp生成* .war文件。
创建gulpfile.js代码：

`

var gulp = require('gulp')
, war = require('gulp-war')
, zip = require('gulp-zip')
, clean = require('gulp-clean')
, runSequence = require('run-sequence'),

const distWar='./distwar';
const warFileName='lovely';
// This will run in this order: 
// * build-clean 
// * build-scripts and build-styles in parallel 
// * build-html 
// * Finally call the callback function 
gulp.task('build:war', function (callback) {
runSequence(
    'war:clean-dist',
    'war:build-war',
    callback);
});

gulp.task('war:clean-dist', function () {
return gulp.src(distWar, { read: false })
    .pipe(clean());
});

gulp.task('war:build-war', function () {
gulp.src(["dist/**"])
    .pipe(war({
        welcome: 'index.html',
        displayName: warFileName
    }))
    .pipe(zip(warFileName+'.war'))
    .pipe(gulp.dest(distWar));
});

`

在gulp build:war目录中运行命令gulpfile.js。
您的lovely.war将出现在目录./distwar/
将lovely.war复制到standalone wildfly目录。
网址将为http://localhost:8080/lovely/
完成。享受你的生活。

Answer 4

您可以使用以下命令来构建您的应用程序：

ng build --prod --deploy-url='myApp/' --outputPath='dist/myApp.war'

-deploy-url将处理生成的* .js的引用。如果您的资产有问题，请创建带有正确引用的index.prod.html，即

<link href="/myApp/assets/css/pe-icon-7-stroke.css" rel="stylesheet" />

然后将以下内容添加到angular.json

"production": {
      "fileReplacements": [
        {
          "replace": "src/index.html",
          "with": "src/index.prod.html"
        }

要将myApp.war复制到jboss_dir / standalone / deployments，并执行touch jboss_dir / standalone / deployments / myApp.war.dodeploy

jboss 7.1.1上的Angular 5独立部署

4 个答案: