ShopifyをGitで管理運用するやり方

# １．はじめに
これはなにか？
Shopify開発における運用のルールとベースになるものを書きました。

## ■課題
- Shopifyは管理画面で「いつ」「だれが」更新したか不明なので、運用ルールとおりに開発しても先祖返りしてしまう。
 - つまり開発をGit管理していても、Shopifyの管理画面側を変更されるとGit管理から外れていってしまう。

## ■解決
そのため管理画面のテーマを３つに分岐して開発しています。
※テーマは例です

・本番（プロダクション）
Debut-production

・ステージング（確認用）
Debut-staging

・デベロップ（開発用）
Debut-development


## ■体制

- 望ましい運用は本番（プロダクション）を管理画面から直接、修正しない事。
 - 管理画面から編集する場合は編集する人を限定すること
- デベロップ（開発用）テーマで修正を行い、ステージング（確認用）テーマで確認をします。

## ■リリースの順番
- デベロップ→ステージング
- ステージング→本番

## ■具体的なやり方
タイトルにあるとおりですが、やり方は諸説あります。今回は、われわれの環境では「こういう風」にやるよ！というだけです。


# ２．Shopifyの開発

## ■local開発はできません。
ソースコード変更の後はサーバーにファイル群をアップロード（自動更新あり）していきながら開発を行います。

## ■用意するもの
### 使用ツール`Shopify Theme Kit`
- PCにインストールします

## ■Gitブランチ

- develop
- master
- original
- feature/0001-xxx
- feature/0002-xxx
- feature/0003-xxx
- ・
- ・
- ・

※`master`ブランチと`develop`ブランチは開発前の段階では、同じ内容と考えてください。
※`original`と名前がつくものは触らない事にします、有事の際にデフォルトへ戻すためです。

## ■Shopifyテーマ
- Debut-production
- Debut-staging
- Debut-development
- Debut-original
 
※`original`と名前がつくものは触らない事にします、有事の際にデフォルトへ戻すためです。

## ■config.yml
各テーマで同じconfigを使用します。

- Debut-production
- Debut-staging
- Debut-development

```config.yml
# 本番環境
production:
  password: パスワード
  theme_id: 1111111111　←例
  store: abcd.myshopify.com　←例

# ステージング環境
staging:
  password: パスワード
  theme_id: 1234567890
  store: abcd.myshopify.com

# 開発環境
development:
  password: パスワード
  theme_id: 9999999999
  store: abcd.myshopify.com
```

## ■開発手順

### （１）ターミナルでデベロップブランチ から フューチャーブランチを作ります。

```terminal
$ git checkout develop
$ git branch
$ git checkout -b feature/0003-xxx
```

- `feature/0003-xxx`の`xxx`部分は開発する件名
- 4桁の数字は管理するための通し番号


### （２）別のターミナルを開いてファイル自動更新のコマンド`theme watch`を打つと、こうなります。

```terminal
$ theme watch
15:51:59 [development] ショップ名称: Watching for file changes to theme 9999999999
```
※監視した状態で、ソースコードを改変すると監視してリアルタイムにサーバーにファイルをアップロードしはじめます。

※自動的にターゲットのテーマは`development`に向きます。
※`theme watch`を使用しない場合は手動でデプロイ

```terminal
$ theme deploy
```

### （３）【重要】開発（ソースコードを更新、変更）する前に、サーバーからダウンロード
※ターゲットのテーマは`development`からのダウンロード

```terminal
$ theme download
[development] 265|265 [=================================================================]  100 %
```
※続いてステージングと本番の管理画面で更新されたものをダウンロード

```terminal
$ theme download --env=staging
$ theme download --env=production
```

gitでコミット

```terminal
$ git status
$ git add .
$ git commit -m "管理画面更新分ダウンロード"
```


### （４）開発（ソースコードを変更）


### （５）エンジニアによるレビュー（画面確認）
オンラインストア
　└ テーマ
　　└ Debut-development
　　　 ├ プレビュー
　　　 └ カスタマイズ


### （６）ステージングへデプロイ



```terminal
$ theme deploy --env=staging
```

またはファイル毎のデプロイの場合

```terminal
$ theme deploy ファイル名 --env=staging
```



### （７）依頼者にレビュー依頼（Slack、またはチャットワーク、またはタスク管理ツール）

### （８）依頼者によるレビュー（画面確認）
オンラインストア
　└ テーマ
　　└ Debut-staging
　　　 └ プレビュー

### （９）修正があればレビューOKとなるまで（３）番または（４）番からもう一度

※プルリクエストの場合
Git画面でプルリクエストのレビュー依頼を行う場合はレビュアーがマージします。

### （１０）レビューOKとなれば、`feature/0003-xxx`から`develop`にマージ

依頼者がGitを使えない場合は、開発者が自分でマージします。

gitでコミットとプッシュ

```terminal
$ git status
$ git add .
$ git commit -m "変更した内容を記入"
$ git push origin feature/0003-xxx ←例
```

gitマージ

```
$ git checkout develop
$ git merge feature/0003-xxx
```


# ３．リリース作業

## ■ソースコードをmasterにマージ
### `develop`から`master`へプルリクエストします。

Git画面でプルリクエストで`develop`から`master`にマージします。

※`master`ブランチと`develop`ブランチは開発前と同じ内容となりました。

## ■本番リリース
```terminal
$ theme deploy --env=production
```


# ４．おわりに
## ■先祖返り

Shopifyは管理画面で「いつ」「だれが」更新したか不明です。
運用ルールとおりに開発しても先祖返りしてしまう場合を想定して。

- （１）こまめにサーバーからdownload
- （２）こまめにコミット