Blog

GruntとGit で更新ファイルを自動でFTPアップロードする

最近は、FTPでアップロードをするということが、ほとんどなくなった気がします。

Gitlabをよく利用しているので、Gitlab CIと連携してgit pushしたらジョブを実行してデプロイさせるのがほとんどですが、仕事をしているとFTPでアップロードしなければいけないシーンが少なからずあります。

いちいち更新ファイルを手動でアップロードしていると、すごく手間なのと、改修範囲が大きかったりすると、ファイルのアップロード漏れでエラーになったりとロクなことがないので、自動化できるのであれば、自動化しておいた方が良いと思っています。 今日は、git push したら、自動的にFTPでサーバーにアップロードする方法を紹介したいと思います。

Git push フックさせて自動アップロードさせる方法

簡易的な方法なので、CI を設定するほどでもない時や対象のサーバーがFTPしか使用できない場合に有効な手段かと思います。

まず、grunt-githooksgrunt-ftpush インストールしておきます。

npm install grunt-githooks --save-dev
npm install grunt-ftpush --save-dev 

グローバルにGruntをインストールしていない場合は、次のコマンドでインストールしておきます。

npm install grunt -g

2つのNPMモジュールがインストール出来たら、次はGruntfileを作成します。

module.exports = function(grunt) {

    grunt.loadNpmTasks(“grunt-ftpush”);
    grunt.loadNpmTasks(“grunt-githooks”);

    grunt.initConfig({

        ftpush: {
            build: {
                auth: {
                host: ‘ftp.example.com’,
                port: 21,
                authKey: ‘key1'
                },
                src: ‘’,
                dest: ‘/path/to/youwant/to/upload’,
                exclusions: [‘.*’,’node_modules/*’,’.sass-cache/‘,’package.json’,’package-lock.json’,’Gruntfile.js’],
                keep: [],
                simple: true,
                useList: false
            }
        },

        githooks: {
            options: {
                dest: '.git/hooks',
                hashbang: '#!/bin/bash',
                template: './node_modules/grunt-githooks/templates/shell.hb',
                startMarker: '## GRUNT-GRUNTHOOKS START',
                endMarker: '## GRUNT-GRUNTHOOKS END'
            },
            setup: {
                'pre-push': 'deploy'
            }
        }
    });

  grunt.registerTask('deploy', ["ftpush"]);
}

Gruntfileを作成したら、次のコマンドを実行すると .git/hooks/pre-push にファイルが作成され、git pushをすると、FTPにアップロードされるタスクを実行するフックができます。

コンフリクトが発生してもアップロードされるので、クリティカルな案件での使用は、注意が必要。

この方法は、すごく簡単でお手軽ですが、git pushの前に実行されるため、コンフリクトが発生してプッシュできなくでもFTPアップされてしまうので、注意が必要です。クリティカルな環境の場合は、やはり、CIを連携させて、プッシュ後にフックさせる方法が確実かと思います。

Related Articles
For Every type of your business

開発やコンサルティングのご相談は、
お問い合わせフォームからお気軽に。