Udemy 4. 複数プロジェクトのGit管理 #02
2020年06月24日に更新

【Git】既存の子ディレクトリをサブモジュール管理に変更する手順

この記事で達成すること

今回はNuxt.jsが入った「front」ディレクトリを、「root」ディレクトリのサブモジュール管理に変更します。

Git02

各プロジェクトをコミットする

それではまず、下の3つのディレクトリに移動しそれぞれをコミットします。

  1. root/apiディレクトリ
  2. root/frontディレクトリ
  3. rootディレクトリ

1. apiディレクトリの作業

「api」ディレクトリに移動しましょう。

root $ cd api

Gitにコミットします。

api $ git add -A
api $ git commit -m "create_rails_app"

2. frontディレクトリの作業

続いてfrontに移動します。

api $ cd ../front

Nuxt.jsではGitが初期化されていないので最初に初期化しておきます。

front $ git init

Gitにコミットしましょう。

front $ git add -A
front $ git commit -m "create_nuxt_app"

3. rootディレクトリの作業

rootに戻りましょう。

front $ cd ..

Gitにコミットします。

root $ git add -A
root $ git commit -m "created_first_app"

現状の確認

それでは「root」リポジトリの管理下に置かれたファイルを確認してみましょう。

root $ git ls-files

.gitignore
api
docker-compose.yml
front/.config/sao-nodejs/config.json
front/.editorconfig
...

おやおや。

「api」ディレクトリ以下のファイルは表示されないのに対し、「front」ディレクトリ以下はファイルが表示されています。

何故でしょう。。。


これは「api」ディレクトリは「root」リポジトリのサブモジュールとして扱われているためです。

それでは何故「api」ディレクトリだけサブモジュール化されたのか?


それは$ rails new を実行したときにRailsがGitの初期化も同時に行ってくれたからです。


なるほど、なるほど。

となると、あとは「front」ディレクトリだけサブモジュール化すれば良いと言うことになりますね。

子ディレクトリをサブモジュール化する手順

それでは

  • 子ディレクトリである「front」を、
  • 親ディレクトリである「root」の

サブモジュールとして変更していきます。

1. 子ディレクトリの名前を変更

まずは「front」ディレクトリの名前を変更しましょう。

root $ git mv front front_cp
  • git mv <対象のファイル・ディレクトリ> <変更する名前/移動先> … Git管理下にあるファイルの移動・名前の変更を行う

2. サブモジュールコマンドの実行

「front_cp」を「front」に名前を変更し、サブモジュールとして追加します。

root $ git submodule add ./front_cp front
  • git submodule add <対象のパス・URL> <追加するサブモジュールの名前> … サブモジュールを追加する。

なぜわざわざ「front_cp」に名前を変更したかと言うと、追加するサブモジュールの名前が既に存在する場合、エラーとなりサブモジュールを追加できないからです。

3. エラーが出た場合

もしsubmodule addコマンドで下のエラーが出た場合。

A git directory for 'front' is found locally with remote(s):
origin	 <プロジェクトパス>
If you want to reuse this local git directory instead of cloning again from
<プロジェクトパス>
use the '--force' option. If the local git directory is not the correct repo

--forceオプションを追加して実行します。

root $ git submodule add --force ./front_cp front
  • --forceaddを実行している場合は、無視されているサブモジュールのパスを追加できるようにします。強制的に実行を行うオプションのようです。

参考

Git

gitサブモジュールの追加/削除に関する問題 - stack over flow


--forceオプションは推奨されないような記事も出てきますが、本プロジェクトでは今のところ問題ありません。

もし不安な方は、この記事を参考にエラー対応をおこなってください。

git submodulesで間違えて追加したときの削除手順

4. 追加されたサブモジュールを確認

サブモジュールとして追加されたディレクトリを確認してみましょう。

「front」ディレクトリと.gitmodulesファイルが追加されました。

root $ ls -a -1

....
.gitmodules # 追加された
front       # 追加された
  • -1オプション … ファイルごとに改行して表示する。

5. gitmodulesファイルの内容

.gitmodulesにはサブモジュール化した履歴が記載されています。

.gitmodules
[submodule "front"]
	path = front
	url = ./front_cp
  • path … 親プロジェクトから見たサブモジュールディレクトリのパス。
  • url … 参照元のパス・URL。

6. サブモジュールディレクトリの内容

サブモジュールとして追加された「front」ディレクトリにはNuxt.jsプロジェクト一式が入っています。

frontディレクトリ
front
├── Dockerfile
├── README.md
├── assets
│   └── README.md
├── components
...

7. リネームしたfront_cpを削除する

ここまでの確認が取れたら「front_cp」ディレクトリは必要ありません。

削除しましょう。

root $ git rm -rf front_cp
  • git rm … コンテンツを削除すると同時にGitの管理下からも削除する。

  • -rオプション … 指定したディレクトリとその中にある全てのコンテンツを全て削除する。

  • -fオプション … rmコマンドはコミットしていない変更がある場合に、間違って削除されないようエラーを出す。そのエラーを無視して強制的に削除するオプション。

    参考 Gitによるバージョン管理 - Page 60 - Google Books Result

8. front_cpディレクトリが残った場合

.gitなどのドットファイルが削除できないことで「front_cp」ディレクトリが残ってしまう場合があります。

root $ ls -1

api
docker-compose.yml
front
front_cp # ← 残ったまま

この場合はrmコマンドで削除します。

root $ rm -r front_cp

削除できたか確認しましょう。

root $ ls -1

api
docker-compose.yml
front

9. サブモジュール管理の確認

「root」ディレクトリのGit管理ファイルを確認してみましょう。

root $ git ls-files

.gitignore
.gitmodules
api
docker-compose.yml
front

「front」ディレクトリ以下のファイルが表示されなくなり、サブモジュール管理となりました。

補足. Atomエディタの場合

Atomエディタの場合、サブモジュールかどうかを目視で確認できます。

一度閉じて再度Atomを開くと、サブモジュールはフォルダアイコンが2重になって表示されます。

2020-06-21 15-55-47

Nuxt.jsの稼働を確認

Nuxt.jsアプリが正しく動くか確認をしておきましょう。

root $ docker-compose up front

おや、エラーが出ました。「nuxtコマンドがないわい!」と怒っています。

/bin/sh: nuxt: not found
front_1  | error Command failed with exit code 127.
...

この原因はNuxt.js本体が入っている「.nuxt」ディレクトリがないことで発生するエラーです。

「.nuxt」ディレクトリはそもそもGitの管理外であったため、サブモジュール化した時にコピーできていなかったのですね。


Nuxt.jsを含むパッケージを再インストールしましょう。

root $ docker-compose run --rm front yarn install

インストールが完了したらhttp://localhost:8080/にアクセスしてください。

無事Nuxt.jsの画面が出てきたらインストール成功です。

2020-06-01 10-56-39

確認が取れたらコンテナを削除しておきます。

# frontコンテナの停止
root $ 「control」+「C」

# その他のコンテナの停止・コンテナの削除
root $ docker-compose down

# 削除できたか確認
root $ docker-compose ps -a

rootディレクトリをコミットしとこう

ここまでの変更をGitにコミットしておきましょう。

root」ディレクトリをGitにコミットします。

root $ git add -A
root $ git commit -m "front_add_submodule"

まとめ

今回は「front」ディレクトリを「root」ディレクトリのサブモジュールとして登録しました。

外部URLをサブモジュール化する記事は良く出てきますが、今回のように子ディレクトリをサブモジュール化する記事がなかなか出てこなくて、参考書がない状態での執筆でした。

自分のプロジェクトで実験してはコミットに戻り、また実験してはコミットに戻りの繰り返しでなんとかここまで書けました。

大変だったー。

次回は?

GitHubに新規アカウントを作成し、公開鍵を追加してSSH接続できるように設定していきます。

どうぞどうぞ↓のリストから。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
1. このカテゴリーの歩き方 #01
【お知らせ】UdemyでRails × Nuxt.jsの動画を公開することになりました
1. このカテゴリーの歩き方 #02
【随時更新】このカテゴリーで作るアプリケーションの仕様書
1. このカテゴリーの歩き方 #03
【随時更新】このカテゴリーの歩き方
1. このカテゴリーの歩き方 #04
(Docker+Rails6+Nuxt.js+PostgreSQL)=>Heroku 環境構築~デプロイまでの手順書
2. Docker入門 #01
Docker for Macをインストールする手順
2. Docker入門 #02
分かるDocker解説。仮想環境・コンテナ・Dockerイメージ・Dockerfileとは何か?
2. Docker入門 #03
分かるDocker解説。DockerComposeとは何か?
3. Dockerを使ったRails+Nuxt.js環境構築 #01
【Docker+Rails6+Nuxt.js】今回作成するアプリの開発環境の全体像を知ろう
3. Dockerを使ったRails+Nuxt.js環境構築 #02
【MacOS】Homebrew経由でGitをインストールする方法
3. Dockerを使ったRails+Nuxt.js環境構築 #03
Rails6を動かすAlpineベースのDockerfileを作成する(AlpineLinuxとは何か)
3. Dockerを使ったRails+Nuxt.js環境構築 #04
Nuxt.jsを動かすAlpineベースのDockerfileを作成する(C.UTF-8とは何か)
3. Dockerを使ったRails+Nuxt.js環境構築 #05
.envファイルを使ったdocker-compose.ymlの環境変数設計
3. Dockerを使ったRails+Nuxt.js環境構築 #06
Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
3. Dockerを使ったRails+Nuxt.js環境構築 #07
docker-compose.ymlを使ってRails6を構築する(PostgreSQLパスワード変更方法)
3. Dockerを使ったRails+Nuxt.js環境構築 #08
docker-compose.ymlを使ってNuxt.jsを構築する
4. 複数プロジェクトのGit管理 #01
複数プロジェクトで行うGit管理の全体像を理解しよう(Gitサブモジュール解説)
4. 複数プロジェクトのGit管理 #02
【Git】既存の子ディレクトリをサブモジュール管理に変更する手順
4. 複数プロジェクトのGit管理 #03
【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく
4. 複数プロジェクトのGit管理 #04
【GitHub】リモートリポジトリの追加・サブモジュールのリンク設定を行う
5. RailsAPI×Nuxt.js初めてのAPI通信 #01
【Rails6】"Hello" jsonを返すコントローラを作成する
5. RailsAPI×Nuxt.js初めてのAPI通信 #02
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説)
5. RailsAPI×Nuxt.js初めてのAPI通信 #03
【Rails6】Gem rack-corsを導入してCORS設定を行う(オリジン・CORSとは何か)
6. Heroku.ymlを使ったDockerデプロイ #01
最初の一歩。Herokuへ新規会員登録を行いHerokuCLIをインストールする
6. Heroku.ymlを使ったDockerデプロイ #02
heroku.yml解説編。Docker環境のRails6をHerokuにデプロイする(1/2)
6. Heroku.ymlを使ったDockerデプロイ #03
HerokuCLI-manifestのデプロイ解説編。Docker環境のRails6をHerokuにデプロイする(2/2)
6. Heroku.ymlを使ったDockerデプロイ #04
Dockerfile解説編。Docker環境のNuxt.jsをHerokuにデプロイする(1/2)
6. Heroku.ymlを使ったDockerデプロイ #05
デプロイ完結編。Docker環境のNuxt.jsをHerokuにデプロイする(2/2)
7. モデル開発事前準備 #01
【Rails6】application.rbの初期設定(タイムゾーン・I18n・Zeitwerk)
新着
SPA開発
ブログ構築
小ネタ集