エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

トップ > プログラミングの勉強 > ソースコードをGitHubで管理する方法メモ

ソースコードをGitHubで管理する方法メモ

プログラミングの勉強 Git

はじめに

今回の記事の目的

事前にローカルで作成したアプリをGitHubにアップロードして管理する方法のメモ。
リポジトリの作成から始めて事前準備を完了させる。

前提

前回作成した、dockerコンテナ上のReactアプリをGit管理する。tomiko0404.hatenablog.com

ローカルにGitのインストール

既にできていたので今回は省略。記事可したい。

鍵の作成とGitHubへの鍵設定

既にできていたので今回は省略。記事可したい。

参考：
■サルでもできるCodeCommit ssh接続でgit cloneするまで - Qiita ：このあたりの記事をみながら実施したはず。
■ソースコードをAWS CodeCommitで管理する方法メモ - エンジニアを目指す日常ブログ：後日AWSのCodeCommitでソースコード管理をしたときの記事。


GitHub上にリポジトリを作成する

リポジトリ作成
リポジトリ作成

ローカル（vagrant）にリポジトリを作成する

今回は、vagrantのほうにgitがインストールされているので、vagrantにsshし、プロジェクトのフォルダに移動した状態で操作する。


注）私の環境では、vagrant上にdockerコンテナを立ち上げるようにしているため、vagrantはホストOSの役割を担っている。つまり、ホストOS上でソースコードを管理して、dockerコンテナを立ち上げた際はホストOS上のソースコードでアプリが動作するようになっている。

ホストOSとコンテナの関係はこちらを参考。
【図解】Dockerの全体像を理解する -前編- - Qiita

$ git init

リモートリポジトリを作成する

$ git remote add origin git@github.com:～～～～/～～～～.git

でリモートリポジトリを作成する。
このコマンドは、GitHubでリポジトリを作成すると、チュートリアルとして表示されるので、コピペすればよい。

$ git remote add [リモートリポジトリの呼び名] [リモートリポジトリのURL]

という文法。ローカルと、URL先のリポジトリを連携するイメージと思われます。
なので、

$ git remote rm [リモートリポジトリの呼び名]

でリモートリポジトリを削除しても、GitHub側には影響を与えない。

参考にしたサイト
第14話 リモートリポジトリを追加・削除しよう【連載】マンガでわかるGit ～コマンド編～ - itstaffing エンジニアスタイル

ローカルにある資材をステージングする

$ git add .

.はリポジトリ内のすべてのファイルを表す。ただし、.gitignoreに指定されているファイルを除く。.gitignoreファイルは、前回npx create-react-appをしたときにnode.js側が自動で作ってくれていた。もしgit add .に時間がかかる場合は、ignoreすべきファイルをaddしていないか確認が必要。

ローカルにある資材をコミットする

$ git commit -m "initial commit"

ブランチ名を確認・変更する

GitHubのマスターブランチはmainという名前になっている。

ローカル側のブランチ名がmasterになっている場合、不整合が生じてしまうため、ここで確認、変更しておく。

$ git branch
* master
$ git branch -M main

GitHub側のリポジトリ（リモートリポジトリ）にpushする

$ git push  origin main

これでローカルの資材とGitHub上の資材が一致した。

git pushコマンドの意味は、
ローカルブランチ「main」を、リモートレポジトリ「origin」上の同名のブランチに反映する
という意味。

pushコマンドの意味の参考サイト
git push コマンドの使い方と、主要オプションまとめ | WWWクリエイターズ

パスワードについて

GitHubにpushしようとすると、毎回vagrantのパスワードを聞かれるが、仕組みがわかっていない。勉強し次第追記予定。

おそらくこの辺りのサイトが参考になる。
Gitにパスワード認証なしでPushするまでの手順 | Enjoy IT Life

ブランチ名について

もともと、リモートリポジトリにpushするコマンドは以下だと思っていたのだがうまくいかなかった。

$ git push  origin master

デフォルトのブランチ名がmasterからmainに変更されたため、うまくいかなかった模様。

ローカルのブランチ名、リモートリポジトリのリポジトリ名は、

$ git branch

と

$ git remote

で確認できる。

git branchとgit remoteの結果
git branchとgit remoteの結果

github上のブランチ名は画面から判別できる。

github上のブランチ名
github上のブランチ名

おわりに

次回はアプリの編集方法をまとめる。
tomiko0404.hatenablog.com