Skip to content

git-ftp+GitHub+CircleCIで自動アップロード

背景

最近、いろいろな企業や個人から依頼を受けて、Webページを作る機会が増えてきました。

ほとんどの場合、さくらインターネットやGMO、Xserverといったレンタルサーバーを契約していて、アップロード方法はFTPしかないことも少なくありません。

今回実装した自動アップロードの方法と比べて、FTPでのアップロードのデメリットは、バックアップを手動で取らなければならない手順が多いFTPのアカウントをアップロードの度に思い出さなくて良いといったことがあります。

git-ftpとは?

Gitというバージョン管理システムで管理しているファイルをFTPでアップロードするための拡張コマンドです。

自分のコンピュータにインストールしたい場合は下記の公式サイトからダウンロード、インストールしてください。

https://git-ftp.github.io/

実際に設定してみる

GitHubでリポジトリを作る

まず、管理したいコードをGit管理にし、GitHubというWebサービスにリポジトリを作ります。

CircleCI

CircleCI上にFTP情報を設定する

アップロードに必要なアカウント情報は、Git管理のconfig.ymlに書くのではなく、CircleCIの機能を使って設定しましょう。

設定ファイルを作る

設定ファイルを下記のように書きます。

.circleci/config.yml
version: 2
jobs:
  build:
    docker:
      - image: buildpack-deps:scm
    branches:
      only:
        - master
    steps:
      - checkout
      - run:
          name: Upload server
          command: |
            echo $(ls -al)
            apt-get update
            apt-get -qq install git-ftp
            git config git-ftp.url $URL
            git config git-ftp.user $USER_NAME
            git config git-ftp.password $PASSWORD
            echo "Deploying project ..."
            # git ftp init # 初回
            git ftp push # すでに git ftp initして、.git-ftp.logがある状態
.git-ftp-ignore
.gitignore
*/.gitignore
*/.gitkeep
.git-ftp-ignore
.git-ftp-include
.gitlab-ci.yml
*.md
*/.DS_Store
.circleci/**

初回の設定

git ftp init

上記のコードを実行して、FTP先に.git-ftp.logというファイルを作らなければなりません。

初回の実行では、対象すべてのファイルがアップロードされます。

2回目からの設定

git ftp push

FTP先の.git-ftp.logから現在のコミットのハッシュを取り出し、現在のコミットと比べて差分があれば、該当のファイルだけアップロードします。

ディレクトリの構造

├── .circleci
│   └── config.yml
├── .git-ftp-ignore
├── .gitignore
└── index.html

設定ファイルをプロジェクトに置くとこんな状態になります。

下記にそのままのプロジェクトがあるので、参考にしてみてください。

https://github.com/Kazunari-h/git-ftp-sample

終わりに

設定の手間はありますが、一度設定してしまえばGitHubにPushするだけでアップロードをすることができ、変更を加えることが楽になります。

日々の業務が多いWebエンジニアやWebデザイナーは、こうゆうところで時短をすることで周りとの差ができるのかもしれません。

自分自身ももっと自動化に力をいれようと改めて思いました。