LINE BOTの作り方を世界一わかりやすく解説（３）【Gitでサーバーとの連携編】

# はじめに

今回は、ローカル（Mac）で作成したアプリケーションのファイルをリモート（サーバー）と同期していきます。
プロジェクトのファイルの同期には `Git` を使用します。

# プロジェクトを Git で管理

最近のソースコードを管理することは `Git` が多くなって気ました。
SubVersion なら使ったことがあると言う人もいるかも知れません。

何を使うにも基本的に一長一短なのですが、複雑なことをしなければ、基本的には `Git` は難しくないので、ここでは `Git` を使ってソースコードの管理をしていきます。

## Gitとは？

Gitに関する説明は他に譲るとして、メリットだけ書いておきます。

* ローカル（手元のMac）とリモート（サーバー）のプログラムを簡単に同期できる
* 複数人で同じプロジェクトを運用できる

特に、ひとりで開発する際には前者の恩恵を受けることが多いです。
FTPでいちいちファイルをやりとりして、、、などGitを使い始めると考えられないですね。

Gitに関して、分かりやすい解説記事はこちら
・[サルでもわかるGit入門](http://www.backlog.jp/git-guide/intro/intro1_2.html)

この解説記事内にあるのですが、後者の複数人で同じプロジェクトを運用するとこのようなイメージです。
![](http://www.backlog.jp/git-guide/img/post/intro/capture_intro1_2_2.png)

`リモートリポジトリ` と呼ばれるところ（クラウドと思ってください）で一元管理しており、それをローカルのPCにクローン（ダウンロード）してきて作業を始めます。
自分が編集した差分をリモートリポジトリに反映させることを `Push` と呼び、他の人がリモートリポジトリに加えた変更点を自分のローカルリポジトリに反映させることを `Pull` と呼びます。

基本これぐらいなので、使いながら覚えていくといった方針で大丈夫かと思います。
※ 複数人でのプロジェクトに携わる際は、経験上、Git初心者がプロジェクトを荒らす可能性大のため、しっかり使い方を習得してから加わることをオススメします。そのためにも、まず一人でやってみましょう。

# ローカルリポジトリ（Mac）をリモートリポジトリ（BitBucket）にPush

それでは Git を使って、ローカルリポジトリ（Mac）をリモートリポジトリ（BitBucket）にPushします。

ここで、リモートリポジトリとして、BitBucketというサービスを使っていきます。
>
Gitのリモートリポジトリとして、一番有名なものはGitHubではないでしょうか。
ただ、GitHubはプライベートリポジトリ（他人に非公開にしたリポジトリ）が有料であるため、プライベートリポジトリが無料の [BitBucket](https://bitbucket.org/) を使用していきましょう。
BitBucketとローカルやリモートのSSH経由での連携はなかなか設定すべきことが多いため、ここも説明は他に譲るとし、ローカルとリモートでGitの使用ができるという前提で話を進めていきます。

## リモートリポジトリの作成（BitBucket）

BitBucketにアクセス（アカウント未登録の場合は登録）し、新規にリポジトリを作っていきます。
「リポジトリ」のプルダウンから新規リポジトリを作成できます。

<img width="610" alt="スクリーンショット 2016-11-12 14.10.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/ecc1c415-ca68-667e-ada7-a607c5af697c.png">

以下のようにリポジトリの名前を決めて作成しましょう。
※ リポジトリの名前とディレクトリ（フォルダ）の名前が同じである方が直感的に管理し易いです。

<img width="954" alt="スクリーンショット 2016-11-12 14.12.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/e3ebf05f-b124-dc64-b0a3-c384b9faf586.png">

これでリモートリポジトリの作成は完了です。

<img width="893" alt="スクリーンショット 2016-11-12 14.14.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/c584a616-5992-da43-185a-44ebca37049c.png">


## ローカルとリモートの紐付け

この画面の「私はゼロからスタートします。」を参考に、ローカルリポジトリとリモートリポジトリの紐付けを行います。
<img width="734" alt="スクリーンショット 2016-11-12 14.33.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/adf2e76b-8731-33b3-16cc-ade2764388bd.png">


では、ローカル（Mac）で作業していきます。
作業前に、作成した `api` のディレクトリへ移動しておいて下さい（これを作業ディレクトリと呼びます）。

### gitの初期化

まず作業ディレクトリで、git の 初期化を行います。

```bash:gitの初期化
$ git init
```

そうすると、隠れディレクトリですが、`.git` というディレクトリができ、こちらで git に関する情報を管理していきます。

### .gitignore の作成

`.gitignore` とは、git では管理しない拡張子やファイルを指定するファイルです。
これを指定しておかないと、全てのファイルをgitで管理することになり、細かい一時的なファイルがリモートリポジトリでの衝突（コンフリクトとよく呼びます）の原因になります。

どの拡張子を git の管理下から省いたら良いのかと言うところは初心者にはもちろん難しい（私もわかりません）のですが、これは [gitignore.io](https://www.gitignore.io/) が全て教えてくれます。

<img width="961" alt="スクリーンショット 2016-11-12 14.24.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/4a6f37b0-f96c-a355-359c-13139dccfc14.png">


ここで、`Python` と `Django` を入力し、.gitignore のファイルを生成します。

<img width="670" alt="スクリーンショット 2016-11-12 14.24.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/e9972168-92de-450a-e14a-ebb8b51ef37b.png">

このように、.gitignore に書き込むべきファイルがでてくるので、.gitignore にコピペして貼り付けます。


```bash:.gitignoreの編集
$ vim .gitignore
```

vim で .gitignore を以下のように編集しました。

```bash:.gitignore

# Created by https://www.gitignore.io/api/python,django

### Python ###
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class

# C extensions
*.so

# Distribution / packaging
.Python
env/
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
*.egg-info/
.installed.cfg
*.egg

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*,cover
.hypothesis/

# Translations
*.mo
*.pot

# Django stuff:
*.log
local_settings.py

# Flask stuff:
instance/
.webassets-cache

# Scrapy stuff:
.scrapy

# Sphinx documentation
docs/_build/

# PyBuilder
target/

# Jupyter Notebook
.ipynb_checkpoints

# pyenv
.python-version

# celery beat schedule file
celerybeat-schedule

# dotenv
.env

# virtualenv
.venv/
venv/
ENV/

# Spyder project settings
.spyderproject

# Rope project settings
.ropeproject


### Django ###
*.pyc
db.sqlite3
media
```

vim で入力や保存ができないという人は以下の６つの手順でコピペしてください。
>
１．gitignore.io で生成した内容をすべて選択してコピー
２．`$ vim .gitignore`
３．`i` を押して入力モード（下に -- INSERT -- と表示されます）
４．`command + v` でいつものように貼り付け
５．`esc` を押して、入力モードの終了
６．`:wq` と入力して、保存してvimを終了

これで、.gitignore の設定完了です。

### リモートとの紐付け

最後に、リモートの指定したリポジトリを `origin` という名前を付けて、対応関係を定義しておきます。

```bash:リモートとの紐付け
$ git remote add origin git@bitbucket.org:#{your_name}/api.git
```

このコマンドひとつでリモートとローカルの対応付けは完了します。


## リモートリポジトリに全てをpush

まず、最初は細かい事を考えずに、.gitignore で省かれたもの以外の全てをpushしましょう。

```bash:masterブランチへ全てpush
$ git add .
$ git commit -m 'first commit'
$ git push origin master
Counting objects: 18, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (15/15), done.
Writing objects: 100% (18/18), 6.12 KiB | 0 bytes/s, done.
Total 18 (delta 1), reused 0 (delta 0)
To git@bitbucket.org:#{your_name}/api.git
 * [new branch]      master -> master
````

## BitBucketで確認

BitBucketのリポジトリ内の「ソース」にアクセスすると、ローカルの情報がリモートに送られ、同期が出来ていることが確認できます。
<img width="746" alt="スクリーンショット 2016-11-12 19.51.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/1345b9ef-2e81-3794-656c-f6a897245641.png">


これで、リモートからPushが完了しました。


# リモートリポジトリ（BitBucket）からローカルリポジトリ（サーバー）にClone

Macの手元にあったファイルをリモートリポジトリ上に同期できたので、今度はサーバー側にその情報をclone(≒ダウンロード)していきます。
なお、サーバー側も BitBucket とのSSH鍵の登録が済んでいることを前提として話を進めていきます。
※参考：[Bitbucket使ってみるメモ①-さくらvpsやら会社のlinuxにgit cloneってみる](http://tweeeety.hateblo.jp/entry/2014/08/17/210633)

サーバーにログインし、cloneしたいディレクトリに移動します。
clone に必要なコマンドはBitBucketから取得出来ます。

<img width="691" alt="スクリーンショット 2016-11-12 14.46.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/3e299bd9-9d10-1f72-52a6-1594cf983ec1.png">

これで、clone用のコマンドが以下のように取得出来るのでコピーします。

<img width="463" alt="スクリーンショット 2016-11-12 14.48.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/6ba0614b-d5b8-fb37-eb64-a8e066fd527c.png">

あとは、サーバー上でコピーしたコマンドを実行します。

```bash
$ git clone git@bitbucket.org:#{your_name}/api.git
```

これでサーバー上にも同じファイルが作成され、サーバーとの連携が完了しました。

# おまけ

フォローお待ちしています！

* Qiita: [Carat 吉崎](http://qiita.com/carat_yoshizaki)
* twitter：[@carat_yoshizaki](https://twitter.com/carat_yoshizaki)
* はてなブログ：[Carat COOのブログ](http://carat-tech.hatenablog.com/)
* ホームページ：[Carat](http://caratinc.jp)

サービス紹介
「数学→プログラミング→Webアプリケーション」まで一気に学べる機械学習のマンツーマン家庭教師サービス「[キカガク](https://kikagaku.net)」に興味のある方はお気軽にご連絡ください。