2013/04/12更新

[grunt] gruntを使ってSFTPをファイル保存時に自動で行う

こんにちは、@yoheiMuneです。
久々のgruntJSネタ☆本日はgruntでSFTP（SecureFTP）を行う方法をブログに書きたいと思います。

gruntでSFTPを行う必要があった理由

現在ソーシャルゲーム開発でフロントエンドの仕事を行っています。JS、CSS、HTMLをせこせこと作る仕事です。
今回の案件では、バックエンドにJavaアプリケーションを利用しており、そのViewに当たる部分がJSPやFTLといったテンプレートになっています。

フロントエンドでは、そのJSPやFTPにHTMLを実装していき、開発用公開サーバーにアップして動作を確認するという作業フローを取っています。そのため「編集して、FTPして、確認して」というタスクの流れが必要となり、今回はSFTP部分を自動化することで、作業効率をアップしようという狙いなのです。

ちなみにJavaプロジェクトをローカルに再現すればいいじゃんと思うかもしれませんが、Javaプロジェクトを最新化し続けたり、DBのスキーマ情報を最新化し続けたり、テストデータをメンテしていったりといった手間がめんどいので、ローカルにはJavaプロジェクトを再現していないのでございます。

gruntでSFTPを行う方法

gruntでは既に便利なプラグインが準備されており、今回は以下のSFTP用プラグインを利用しました。

grunt-ssh＠github

今回はFTPをセキュアにしたいということでSFTPを選択して、それが出来るプラグインを探していたら上記のものにたどり着きました。

まずはnpmを使ってプラグインをインストールします。

npm install grunt-ssh --save-dev

これでインストールできます。
続いてGruntfile.jsの記述ですが、こんな感じで行います。

module.exports = function(grunt) {

  // プラグインを読み込む
  grunt.loadNpmTasks('grunt-ssh');

  grunt.initConfig({

    // sftpというタスク名で定義できます
    sftp: {

      // JSをSFTPする設定
      tutorialJS: {
        files: {
          // オブジェクト形式でvalue側に、SFTP対象ファイルを指定
          'js/orgn/': 'js/orgn/tutorial.js'
        },
        options: {
          // IPアドレス、ログイン情報、サーバー上のパスを指定
          host: '172.XXX.XXX.XXX',
          username: 'ログインユーザー名',
          password: 'パスワード',
          path: '/usr/local/hogehogeuser/js/orgn/',
          // この設定はポイントです！後述します。
          srcBasePath: 'js/orgn/',
        }
      },

      // CSSをSFTPする設定
      tutorialCSS: {
        files: {
          'css/orgn/': 'css/orgn/tutorial.css'
        },
        options: {
          host: '172.XXX.XXX.XXX',
          username: 'ログインユーザー名',
          password: 'パスワード',
          path: '/usr/local/hogehogeuser/css/orgn/',
          srcBasePath: 'css/orgn/',
        }
      },

      // JSPをSFTPする設定
      tutorialFtls: {
        files: {
          'javaPrjct/src/main/webapp/WEB-INF/views/tutorial/': 'javaPrjct/src/main/webapp/WEB-INF/views/tutorial/*.jsp'
        },
        options: {
          host: '172.XXX.XXX.XXX',
          username: 'ログインユーザー名',
          password: 'パスワード',
          path: '/usr/local/tomcat/webapp/WEB-INF/views/tutorial/',
          srcBasePath: 'javaPrjct/src/main/webapp/WEB-INF/views/tutorial/',
        }
      },
    },
  });
};

という感じで、SFTPを行うことが出来ます。
後述にさせて頂いたsrcBasePathですが、この値を指定することでSFTP対象ファイルを指定したファイルのパスから srcBasePathを削除したパスを、アップロード後のファイルパスとして使ってくれます。

アップロード対象ファイルを「javaPrjct/src/main/webapp/WEB-INF/views/tutorial/hoge.jsp」と指定。

srcBasePathのおかげで、ファイル名は「hoge.jsp」となる。

そしてサーバー上に配備される際には、path + 上記のファイル名（＝つまり「/usr/local/tomcat/webapp/WEB-INF/views/tutorial/hoge.jsp」）となる。

srcBasePathをうまい感じで指定することで、アップロード後のファイル名を正しく指定することが出来ます。

最後にgruntタスクの呼び出し方ですが、こんな感じです。

grunt sftp

ファイルを保存時に自動的にSFTPする

上記の記述でgruntでSFTPが出来るようになりました。これでかなり便利に開発できるようになったのですが、わざわざSFTPするために手を動かす必要があるのが難点。
ということでSFTPすることを自動化しちゃいます。
今回は、gruntのwatch機能を使って、監視対象のファイルが保存されたら勝手にSFTPする用に実装します。

まずgruntのwatchタスクをインストールします。

npm install grunt-contrib-watch --save-dev

続いてGruntfile.jsを編集します。

module.exports = function(grunt) {

  // watchタスクを読み込みます
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.loadNpmTasks('grunt-ssh');

  grunt.initConfig({

    // watchタスクを定義します
    watch: {
      sftp: {
        files: [
          // 編集対象のファイルを指定します
          'js/orgn/tutorial.js',
          'css/orgn/tutorial.css',
          'javaPrjct/src/main/webapp/WEB-INF/views/tutorial/*.jsp'
        ],
        tasks: [
          'sftp'
        ]
      }
    },

    // sftpというタスク名で定義できます
    sftp: {
      /* 
        上で定義したsftpタスク。
        ここでは記載を省略します。
       */
    }
  });
};

そして、以下のように実行するとファイル監視が始まります。

grunt watch:sftp

これで開発してファイルを保存するたびにファイルが自動でアップロードされるようになります。便利便利(*ﾟ▽ﾟ)ﾉ

実際に利用している場面では、もう少し多くのステップとともに自動化を行っています。
「ファイル保存 -> SCSSのコンパイル -> JSのConcat -> SFTP」の一連の流れをgruntで自動化しているのでございます。

最後に

gruntはとっても便利ですねー。JSをばりばりと書かなきゃいけなかったり、ターミナルを使う必要があったりと敷居は高い感じですが、ぜひいろいろと使いこなしたい限りです。

上記で紹介させて頂いたgrunt-sshは、githubのReadmeに詳しく使い方など記載がありますので、詳細はそちらをご参照ください。
https://github.com/andrewrjones/grunt-ssh

最後までご覧頂きましてありがとうございました。