tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

【bitbucket】さくらVPSでアプリをチーム開発&共同作業するときのメモ - bitbucketでリポジトリをgit管理してwebサーバにあげるまで

はじめに

だれかと一緒にさくらvpsなどを借りてwebアプリやサービスを作ってみたいときの流れを簡単にまとめ。
チームのメンバーに見せる手順用メモにもなりますね。

また、共同作業するためのリポジトリはbitbucketを使います。 複数のBitbucketユーザーが1つのtemaアカウントを共有することで共同作業ができるようにします。

あじぇんだ

いじる環境というか端末は、以下の3つです。 アジェンダにはわかりやすいようにそれぞれ[環境]のprefixをつけておきます。

  • [bit] ... bitbucket
  • [mac] ... 自分のmac
  • [vps] ... さくらVPS

アジェンダ

  1. [bit] bitbucketにチーム登録する
  2. [mac] macでチームのリポジトリをcloneしてみる
  3. [bit] チームリポジトリのデプロイ鍵を設定する
  4. [vps] チームリポジトリをclone(pull)してみる
  5. [vps] さくらvpsでpullしてみる

事前準備: さくらvpsに環境を作る

事前準備としてまずはさくらVPS環境を整えないと話になりません。
この記事はそのへんは設定してある前提なので、まだな場合はSSHの設定やらは終わらせてから始めます。
そのへんはコチラを参考に。
さくらvpsの設定自分メモ - ssh設定① - for mac

1. [bit] bitbucketにチーム登録する

複数のBitbucketユーザーが1つのtemaアカウントを共有することで共同作業ができるようにします。
なのでbitbucketを登録してある前提です。
bitbucket自体を登録したり使ってみるのはコチラを参考に。
Bitbucket使ってみるメモ①-さくらvpsやら会社のlinuxにgit cloneってみる

team登録から開発開始までの流れは主にこんな感じです

  • チームを作成する
  • チームリポジトリを作成する
チームを作成する
  • メニューのチームを押すとプルダウンで表示されるチームの作成を選択します。
    f:id:tweeeety:20151007063554p:plain

  • チームの作成画面が表示されるのでチーム名チームIDを入力します。
    それぞれ入力したたら作成ボタンで作成します。
    f:id:tweeeety:20151007063952p:plain

  • すでにメンバが全員bitbucketに登録しているならこの時点でチームメンバを追加しても良いですが、あとからでも追加できます。
    f:id:tweeeety:20151007064006p:plain

  • チームを作成するとチームトップ画面に移動します。あたりまえですがコードがなにもありませんとかいわれますね。 f:id:tweeeety:20151007064031p:plain

チームリポジトリを作成する
  • チームトップ画面からリポジトリを作成します。
    f:id:tweeeety:20151007064100p:plain

  • 新規リポジトリの作成画面でそれぞれ入力してリポジトリの作成ボタンを押します。
    Nameリポジトリの名前になります。
    f:id:tweeeety:20151007064118p:plain

  • 作成するとリポジトリのトップ画面が表示されます。ここからはほとんど個人リポジトリと同じですね。
    f:id:tweeeety:20151007064133p:plain

補足

登録の際やあとからでも良いのですが、課題管理wikiも作ることができます。
jiraのようなタスク管理、ティップスや手順メモなどにwikiを使うとよりはかどることもあったりなかったり。

2. [mac] macでチームのリポジトリをcloneしてみる

  • リポジトリトップ画面の私はゼロからスタートします。らへんを参考にリポジトリをcloneします。
    あとで試しにpullするためには、なんでも良いので1つファイルを作成しておく必要があります。
    f:id:tweeeety:20151007064133p:plain

macでのリポジトリのcloneはコチラを参考にすると良いかもしれません。
Bitbucket使ってみるメモ②-Bitbucketでリポジトリの作成からlinux側でgitセットアップ

bitbucketが教えてくれるまんまですが手順を書いておきます。

# 適当なところにプロジェクトディレクトリを作成して移動
$ mkdir /path/to/your/project
$ cd /path/to/your/project

# プロジェクトディレクトリをgit管理課におく
$ git init
$ git remote add origin git@bitbucket.org:team-hoge/hoge-app.git

# 適当なファイルを作成する
$ echo "tweeeety" >> contributors.txt

# gitコマンドでadd、commit、push
$ git add contributors.txt
$ git commit -m 'Initial commit with contributors'
$ git push -u origin master

3. [bit] チームリポジトリのデプロイ鍵を設定する

デプロイ鍵とはこんな場合に使う鍵になります

  • AさんのPCにチームリポジトリをcloneして開発する
  • BさんのPCにチームリポジトリをcloneして開発する
  • ある程度終わったらwebサーバ(さくらVPSなど)でデプロイ鍵を使ってアプリをgit pullする

webサーバではアプリケーションコードは個人ユーザのディレクトリにpullするわけではないので(してもいいですが)そんなときに使う鍵って感じですね。

小規模なら、本番公開用のアプリディレクトリに直接pullして、
それがデプロイってこととしてしまうのは手が省けていいですね。

ある程度ちゃんとしていて、デバッグ用などに開発サーバも用意してある場合は
開発サーバにpullして、開発サーバから本番へのデプロイはcapistranoなどのデプロイツールを使ったりが良いですね。

[vps]ssh鍵を作成する

と、前おきが長くなりましたがここからがデプロイ鍵の登録です。
しかし、先に鍵を作っておく必要があるのでvps側で鍵を作成します。

今回はhogeというアプリケーションを作る前提で
hogeというユーザを作成し、公開するアプリケーションコードを/home/hoge 配下に置くという前提で進めます。
作業もhogeユーザで行います。

$ pwd
/home/hoge

※ ssh keyの作成
※ わかりやすいように-Cでコメントしておくとよいです
$ ssh-keygen -C 'for_hoge-app'
Generating public/private rsa key pair.

※ 途中鍵の名前はこれでいいかと聞かれるので
※ いくつか鍵作ってもかぶらないように設定。
※ 今回は/home/hoge/.ssh/id_rsa_bitbucket_hoge_appとしました
Enter file in which to save the key (/home/hoge/.ssh/id_rsa): /home/hoge/.ssh/id_rsa_bitbucket_hoge_app

※ パスワードを聞かれるので入力
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/hoge/.ssh/id_rsa_bitbucket_hoge_app.
Your public key has been saved in /home/hoge/.ssh/id_rsa_bitbucket_hoge_app.pub.
The key fingerprint is:
aa:27:55:fb:99:dc:88:66:a0:22:b4:22:3a:cc:ab:c4 for_hoge-app
The key's randomart image is:
+--[ RSA 2048]----+
|                 |
| ..              |
|    .. o ..      |
|... o   ..       |
|.= + . .a.. .    |
|..* E... +.. .   |
|o  . .    .o.o..o|
|.           o...o|
|           o  .. |
+-----------------+


※ 鍵の確認
$ ls -l *hoge*
-rw------- 1 hoge hoge 1743 Oct  4 21:45 id_rsa_bitbucket_hoge_app
-rw-r--r-- 1 hoge hoge  394 Oct  4 21:45 id_rsa_bitbucket_hoge_app.pub

※ 公開鍵を表示してみる
※ ここで表示された文字列を後で使います
$ cat /home/hoge/.ssh/id_rsa_bitbucket_hoge_app.pub 
ssh-rsa ABBAB3NzaD3yc2EBBBBAIwAAAQEAy6o+w3R2LxvttVAmZq26UAj38YjppttXbPKYCki2EZzjtHnoab+O4ab9+C/KBd+pabwDckB4M9d/FabTj5Jrv5g5pBabbddjFjc+nabQMmXd5XxabcX7xF/wfgabc4/X/2kq2XcxABC6JrAWD8abcotrajdRF+an8P9abcP000ai+5+miabciwCqdfMlo4mQabcFoAt2AR9tYg7otabcNZIMIRUKe+NSabcMCEVLRybU0Nabc/j4rYX+NabcWNr+zW9XNhRUy/+Aen0+qpvOAabcwUPZoKx0abcZs9/7tgp3Xabc4aRvS4GgukabcUrCFS+bRh4is+5abcABo2xw== for_hoge-app

[bit]デプロイ鍵を設定する

今度はbitbucketで作業します。

  • bitbucketのチーム画面からリポジトリトップに移動し、左側メニューから設定を選択します。
    f:id:tweeeety:20151007064408p:plain

  • Settings画面が表示されるので、左メニューの内側にあるデプロイ鍵を選択します f:id:tweeeety:20151007064426p:plain

  • 鍵を追加ボタン押します f:id:tweeeety:20151007064439p:plain

  • ポップアップで公開鍵を登録するモーダルが表示されます。
    先ほどcat /home/hoge/.ssh/id_rsa_bitbucket_hoge_app.pubで表示した
    公開鍵文字列をKeyランにコピペして鍵を追加ボタンを押します。
    labelはあとで見てわかりやい名前であればなんでも大丈夫です。無くても登録できます。 f:id:tweeeety:20151007064524p:plain

  • 登録した公開鍵が表示されます。 f:id:tweeeety:20151007064536p:plain

4. [vps] チームリポジトリをclone(pull)してみる

ここまできたらvps側でteamリポジトリをpullしてみます。

2. [mac] macでチームのリポジトリをcloneしてみるで 1つでもファイルをpushしていればclone urlが作成されています。
f:id:tweeeety:20151007064600p:plain

このurlでvps側でcloneしてみます

$ pwd
/home/hoge

# cloneする
$ git clone git@bitbucket.org:team-hoge/hoge-app.git

# 確認する
$ ls -l
drwxr-xr-x 3 hoge hoge 4096 Oct  5 06:29 hoge-app

$ tree .
.
`-- hoge-app
    `-- contributors.txt

/home/hoge/hoge-appにアプリケーションコードがpullできるようになったので、 あとはapacheやnginxなどのwebサーバで適切に指定すれば公開できますね!

補足

cloneの際にPermission denied (publickey).Bad owner or permissionsと言われるときはこちらを参考にしてみてください。
【bitbucket】git cloneでPermission denied (publickey).Bad owner or permissionsと言われたときの対処法

まとめ

githubは使いやすいのですが、いろんな理由でリポジトリやソースを公開したくないときもありますよね。
そんなときはbitbucketでのチーム開発も便利です!
enjoy!\(^o^)/