Angularのdistフォルダからwarファイルを作成する

1927 ワード
Angular grunt grunt テキストリンク

前回の記事ではAngularのdistフォルダをWebサーバへ配備する方法を紹介した。

「Angularアプリケーションのビルド資産「dist」フォルダを配備するにはuseHashをつける」
https://qiita.com/suzushou5628/items/25c6c835d9bdde53db32

しかし、APIサーバの開発も自身で行う場合、
APIサーバをデプロイするアプリケーションサーバに対して、
Angularアプリケーションを配備したいこともあるだろう。

そこで本記事では、Angularアプリケーションをglassfishやtomcatへ配備するために、
distフォルダからwarファイルを作成する手順を説明する。

warファイルを作成する前にGruntのインストールを行う。


npm install -g grunt-cli
npm install grunt --save-dev
npm install grunt-war --save-dev

次にGruntfile.jsを作成し、Angularアプリケーションのroot階層に置く。

Gruntfile.js


module.exports = function(grunt){

grunt.loadNpmTasks('grunt-war');
  // プロジェクト設定
  grunt.initConfig({
    pkg:grunt.file.readJSON("package.json"),
    war: {
      target: {
      
  options: {
          war_dist_folder: 'c:/temp/', // warファイル生成先フォルダ
          war_name: 'angular-project' // warファイル名
        },
        files: [
          {
            expand: true,
            cwd: 'dist',
            src: ['**'],
            dest: ''
          }
        ]
      }
    }
  });

grunt.registerTask('default', ['war']);
}

[参照：Gruntfile.js作成]
https://qiita.com/kohei789/items/11480613cc67dd30f6aa

Gruntfile.jsを配置後、ターミナル上でgruntコマンドを実行する。

ここまでの手順を行うことで、指定したフォルダにwarファイルが作成される。