Cntlog > 未分類 > WebデザイナでもできるGitで本番環境に更新(同期)をする方法

WebデザイナでもできるGitで本番環境に更新(同期)をする方法

数年前からGitは使っていて最近ようやくバージョン管理にも慣れてきたかなと思っているのですが、実は本番環境のデータがどのコミットのものか把握できでいない時があり悩んでいました。
以前から特定のブランチのものを絶対に公開バージョンにしたいと画策していましたが上手く言っていなかったのです。

当初はgithubやbitbacketにpushしたらそこから同期を…と考えていたのですが、技術的な事は難しくて諦めていました。
しかし、gitコマンドを使ってftpからでも簡単にアップできる方法がありました。
これなら簡単で誰にでもできそうです。

git-ftp

git-ftpの良い所

Git のバージョン管理と連携して、現在のコミットを FTP でアップロードしてくれます。
※FTPがセキュリティ的にどうかという話はこの際置いておきましょう。

この運用フローを守る事で本番環境の状態がcommitされたものに準ずる事ができるので安心感が高まります。
またgit-ftpではpush先が複数選べるので、このcommitは開発環境、このcommitは先方確認環境、このcommitは本番環境と別々に上げれるのでpushした後ブランチを切って制作していたりしていてもそれほど困る事はありません。便利!

インストール方法

参考

git-ftp インストールと設定(Windows)

下のコマンドを実行してください。
コマンド使うときはgit bash使うのオススメです。

cd ~
git clone http://github.com/git-ftp/git-ftp git-ftp.git
cd git-ftp.git && chmod +x git-ftp
cd /bin/
ln -s ~/git-ftp.git/git-ftp git-ftp

1行目のでcd ~ユーザディレクトリに移動。
C:\Users[ユーザ名]\ (Windows 7 の場合)

これでインストール作業は完了です。
※Macはしらん。

次は正しくインストールされているか、まずは確認しましょう。
“git ftp” と入力して、とりあえず [Enter] を押してください。

git-ftp <action> [<options>] <url>

設定の仕方

ftpでアップしたいgitリポジトリのある所に移動して下記コマンドを1つずつ実行します。

git config git-ftp.[固有名称].url ftp://[ドメイン名]/[FTPで接続されたディレクトリからの相対パス]/
git config git-ftp.[固有名称].user [ユーザ名]
git config git-ftp.[固有名称].password [パスワード]

例)
git config git-ftp.hogehoge .url ftp://domain.com/html/application/
git config git-ftp.hogehoge .user admin
git config git-ftp.hogehoge .password xxxxxxx

上記の「固有名称」(ここでは hogehoge)にしています。

git-ftp.url の設定ではセキュリティを考えて、FTPSが利用できる場合には
スキーマを ftp:// でなく ftpes:// を指定して接続するのが望ましいです。

コマンドを実行すると.gitの中のconfigの中に記載されいるので、もしhogehogeの名称を忘れたらそこを確認すると良いです。

これでほぼ設定完了なので、今度はftpに接続できるか確認します。
最初にファイルをアップロードするときはinitコマンドを使います。

git ftp init -s hogehoge

なお、Gitで編集中のファイルがあるとアップロードするときに必ずエラーになるので commit は終えておいてください。

2回目以降は、Gitで更新されたファイル差分のみを 下記push コマンドでアップロードします。

git ftp push -s hogehoge

あとはコレの繰り返しで完了です。

もし何らかの理由で初めからやり直したくなったら、git ftp push -s hogehogeで作成した、.git-ftp.logを削除したら差分が初期化されます。
.git-ftp.logはFTP でアップロードされたディレクトリにあります。

まとめ

これで本番環境が確実にバージョン管理された状態を保てるので安心して開発が出来ますね。
Gitを使うのは手間と思う時もありますが助けられた時の恩の事を思い出せば、これがないと開発は出来ない気持ちで一杯です。

デザイナさんはGit苦手意識持って避けている人もいますが使っている人はどんどん増えてきているので、きっと周りには優しく教えてくれる人がいると思うので気軽にお願いしてみると良いと思います(*ゝω・*)

関連記事

【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方... 4/10はなんの日かご存知ですか? そう、フォントの日です。 本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。 とりあえず見たい方はデモを用意しているのでそちらをご覧ください。 Noto Serif CJKのデモ ...
WinSCPで特定フォルダをアップロードから除外した... 普段WinScpの同期の機能を使ってアップロードしているのですがGitを使っているとそのファイルも対象になってしまうのでうざいなと感じてました。 設定画面で簡単にできたのでメモです。 上記画像の除外のところにといれれば.gitっと記載されているフォルダはアップロードの対象外となります...
元WEBデザイナが1年間WEBディレクターになってみて気がついた事... 2013年2月から転職をしました。 前職はWEBデザイナーでしたが今はWEBディレクターです。 もともとコミュ力が低いのにディレクターに転向したのは今でも無謀だったなーと思っていますが、将来的にディレクションのスキルを持っていないとマズイなと考えているので後悔はしていません。 ただやりたいと思...
日本語でわかるSketchの使い方と機能 実際私も英語は苦手ですが、Sketchは全然使えています。 ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。 メニュー  メニュー項目の紹介です。 ショートカットキーメモ ⌘…Command...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...