TEDARE TOKYO

ライフスタイル バイク キャンプ ツーリグ 格闘技 Webの事など・・・

Webデザイン

Git/Bitbucketと連携!DeployBotでサーバへ自動反映させよう!

git+deploybot

Webの構築におすすめ、複数人でバージョン管理!
Bitbucketでgitサーバを構築し、DeployBotでWebサイトへ反映させよう!

はじめに~こんな人におすすめ~

本記事は初心者からそこそこのWeb知識を持った人向けです。

サーバの設定を1からできる様なプログラマーさんや、ゴリゴリのフロントエンジニアの方の参考になる情報ではありませんので、生暖かい目でご覧ください。m(_ _)m

こんな人におすすめ

  • Webサイトの浅い知識がある
  • フリーランスや副業しているWebデザイナー、Webディレクター
  • 複数人で作業したい
  • gitでバージョン管理をしたい
  • gitでPushしたら自動反映させたい
  • 本番サーバとテストサーバをわけたい

作業ファイルをgitサーバにアップしてDeployBotでWebサイトへ自動反映させるイメージ図

DeployBotでWebサイトへ自動反映させるイメージ図

作業環境はSourceTree(ソースツリー)一択!

WindowsでもMacでも使えるgitのGUIツール「SourceTree」がおすすめです。

情報源: Windows と Mac に対応した Mercurial/Git 無料クライアント | Atlassian

Bitbucketでgitサーバを用意しよう!

素人に毛が生えたレベルの私がおすすめするのは無料で使えるBitbucketです。

Bitbucket — The Git solution for professional teams

Bitbucketなら面倒なサーバ設定などはすべてGUIで解決してくれます。

なお、gitの説明はGoogle先生がだいたいのことを語ってくれているので、説明は割愛したいと思います。
そもそもきちんと説明できないのでw

gitってなんなのって人は以下を参考にされると良いでしょう。

ようこそ、サルでもわかるGit入門へ。Gitをつかってバージョン管理ができるようになるために一緒に勉強していきましょう!

情報源: サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ

情報源: もっと早く知りたかった! Gitが鬼のようにわかるスライド厳選7選 | Find Job! Startup

Bitbucketが良い理由

  • 無料でそこそこ使える
  • 作業者アカウント管理ができる
  • 課題管理ができる
  • SourceTreeとの相性が良い
  • 参考情報が多い

という点です。

Backlogはお金がかかるし、GitHubは素人にはちんぷんかんぷんです。

Bitbucketの設定も今回は割愛しますが、基本的には進んでいけば迷わないと思います。

ちなみにgitでSourceTreeとBitbucketを利用した操作方法や設定方法はこの本でだいたい解決してくれます。

Gitが、おもしろいほどわかる基本の使い方33

Gitが、おもしろいほどわかる基本の使い方33

DeployBotでサイトに反映させよう!

せっかくバージョン管理しても、ファイルのアップロードは手動というのは効率悪いですよね?

サーバ設定がデキる人は、ちょちょっと触ればできるでしょうが、
素人にはハードルが高いので、DeployBotを使うことをオススメします。

もちろん基本無料です。

DeployBotの特長

DeployBotはデプロイしてくれるツールです。
細かい便利で難しい利用方法がたくさんあるようですが、基本的には以下の2つが素人には大きなメリット。

  • Pushしたファイルをサーバに自動アップしてくれる(手動もできるよ)
  • ブランチ毎にサーバを指定できる(テスト環境と本番でわけられるよ)

この2点です。

超便利ですね。ハイ。

DeployBotに登録しよう!

以下のDeployBotのサイトでアカウントを作成します。

情報源: DeployBot – Deploy your code anywhere

TOPページ

DeployBotTOP

DeployBotTopページ

アカウト登録

DeployBotEntry

アカウト登録画面

アカウント登録は一般的なものと同じですが、管理画面専用のサブドメインURLを作ることになりますので、忘れないように注意が必要です。
※TOPページからはログイン出来ないため

リポジトリの設定

Repositoryの設定1

Repositoryの設定1

Connect a repositoryをクリック

Repositoryの設定2

Repositoryの設定2

Bitbucketのタブをクリックし、Connect new accountのボタンを押し、Bitbucketと連携させます。

connectがうまく行けば、リポジトリを選んで完了です。

次は詳細設定です。

以下の画像のCreate an environmentをクリックします。

DeployBotRepository_2

続いて以下のページ

DeployBotRepository_3

設定はNameに任意のものを入れ、Deployment modeを選択します。

  • Manual:クリックしてデプロイするモード
  • Automatic:自動でデプロイするモード

gitへPushして反映させたい場合はAutomaticを選択します。

Branchはgitの設定ができていれば、masterが表示されています。
複数のブランチがある場合は好きなものを選択します。

レンタルサーバの選択

DeployBotRepository_4

ここでSFTPまたはFTPを選択します。

私はFTPを選択しました。

そうすると以下の画面になるので、必要な情報を入力します。

DeployBotRepository_5

Saveボタンで設定完了です。

作業しているPCからプッシュしてみましょう!

体感的には1~2分後に自分のサーバに反映されているはずです。

テスト環境の追加

ブランチ毎に環境を用意したい場合は、Overviewのページから追加可能です。

以下の画面のAdd an environmentボタンを押すと、設定画面が表示されます。

DeployBotAddBranch

そこで同じように設定し、Branchの部分を変更して進んでいけば、Branch毎に環境を追加することが可能です。

git+DeployBotまとめ

  • gitサーバは色々と面倒なのでBitbucketを使う。
  • gitの操作は色々と面倒なのでSourceTreeを使う。
  • レンタルサーバへの反映は色々と面倒なのでDeployBotを使う。
  • gitがよくわからなければ色々と面倒なのでGitが、おもしろいほどわかる基本の使い方33

以上が素人には十分な情報かと思ってます!

これを行うことでプロジェクトの管理からバージョン管理、公開設定まで超簡単に対応でき、少しやりて感も出すことが出来ます。ハイ。

是非git初心者やフリーランスのWebデザイナー、Webディレクター、フロントエンジニアはDeployBotを使ってみてください。

これからも時たま役立つ情報をポストしたいと思います。

それでは。ノシ

エムオ
社内ぼっち。 夢は働かなくてすむこと。 愛車はCB1100EX。 柔術青帯。

1 コメント

  1. Git/Bitbucketと連携!DeployBotでサーバへ自動反映させよう! Webの構築におすすめ、� https://t.co/q1hZGsFQM0 #git

Leave a Reply

Theme by Anders Norén