AngularのコードをGitHubへpush
いつも開発環境のツールに頼ってgitを操作していましたが、便利な半面何をしているか理解に欠ける部分があります。そこで今回はAngularCLIで作成したプロジェクトを手動でGitHubにpushすることで、gitへの理解を深めたいと思います。またpushしたレポジトリから別の環境でcloneしてAngularプロジェクトの復元もしてみました。
知識の整理
まず、git関連の用語の整理をしておきます。
- branch(ブランチ)
作業の分岐を示します。分岐がなくてもそのひとつはブランチとなります。
コマンドにおいては、「git branch」で現在のブランチの一覧を表示させることができます。また、「git branch branch1」で新たにブランチを作成することができます。
- master(マスター)
最初にあるブランチの名前です。ポリコレの為に、GitHubでは従来のmasterからmainという名前に変わりました。
- origin(オリジン)
リモートレポジトリを差します。これにレポジトリのアドレス等の情報が結びついています。慣例でoriginとなっていますが、別の名前にすることもできます。
- head
今自分が作業しているブランチの先頭を示すポインタです
- commit(コミット)
ファイルの追加や変更ログをローカルリポジトリに保存します
- インデックス
gitにおけるインデックスとは、管理対象のファイルのリストを指します。リストに加える作業のことを「インデックスする」という形で表すこともあります。
- add
ローカルリポジトリにおいて、インデックスに加える作業です。この作業を経ないとコミットしてもローカルレポジトリは更新されません。
- push
現在のローカルレポジトリのファイルの追加や変更ログをリモートレポジトリへアップロードします
- pull
リモートレポジトリから現在のローカルレポジトリにダウンロードします。
- merge(マージ)
マージはブランチの統合を意味します。コマンドでは現在のブランチに、指定したブランチを統合します。pull処理では自動的にマージ処理が行われます。そのようなことをしたくない場合にはfecthにより履歴の取得だけを行うこともできます(名前のないブランチとして取り込まれます)。
- rebase(リベース)
ブランチを統合するもうひとつの手段にリベースがあります。主な違いはコミットが残るか残らないか、ブランチが残る残らないかです。コミットが残ってブランチが消えるのがrebase、その逆がmargeです。
通常リベースはブランチを切り取って、マスターに付け加えます。なので、ブランチからマスターを指定してrebaseコマンドを実行します。これもmargeとは逆になります(margeは通常mainで、ブランチを指定して実行するので)。
- checkout(チェックアウト）
ブランチを変更することです。
「git checkout branch1」で現在のブランチを変更します。
- upstream branch
英語をそのまま訳すと「上流の分岐」になります。リモートにあるブランチに対してupstreamを設定すると、その変更を追跡します。
GitHubにpush
GitHubのアカウント登録は済んでいるものとして、現在あるコードを実際にGitHubに登録してみます。
まずリモートレポジトリを空の状態で作成します。
Repositoriesから「New」ボダンから始めます。GitHub上でのアドレスとなるオーナー名、レポジトリ名を入力し、公開(Public)・非公開(Private)の選択をし「Create repository」を押します。
この時他のオプションを選択せずに空のレポジトリを作ります。
次に、ローカルレポジトリを作成します。gitのアプリがローカルにインストールされていない場合はgitのページからダウンロードしてインストールします。GUI版も存在するようですが、ここではCUI版で話を進めます。
ローカルレポジトリとしたいフォルダにコマンドラインかPowerShellで移動します。
Angular環境の場合package.jsonやangular.jsonがあるフォルダになります。ここにすでに「.gitignore」というgitで利用するファイルが作成されていると思います。
ここではc:¥angularフォルダだと仮定します。
git initコマンドを実行します。
デフォルトではブランチ名はmasterになりますが、GitHubの仕様に合わせて-bオプションでブランチ名を設定しています。もしここで設定し忘れたら「git branch -M main」とすることでローカルのブランチ名を変更できます。
表示にでるように、gitのデータはカレントフォルダの.gitに入ります。このフォルダは隠しファイル属性がついています。これを消すと、このプロジェクトに対するgitの情報がすべて消えます。
PS> cd c:¥angular PS> git init -b main Initialized empty Git repository in C:/angular/.git/
初期状態をインデックスします。
PS> git add . または PS> git add -A ...
もし、ADDを取消をしたいなら「git rm --cached -r .」を実行します。これは初回のaddの時だけです。2回目以降は「git reset HEAD」とします。
状態を確認したい場合は「git status」を実行します。
PS> git status On branch master No commits yet Changes to be committed: ...
インデックスが終わったらコミットします。コミットでは-mとしてコミットメッセージを入力しないと処理がキャンセルされます。
PS> git commit -m "first commit" ...
リモートの登録をします。ここでは先ほど作成したGitHubのレポジトリのアドレスに対してoriginという名前で登録しています。
PS>git remote add origin https://github.com/オーナー名/レポジトリ名.git ...
削除したい場合は、「remote remove 名前(origin)」とします。
ローカルのレポジトリを、リモートへpushします。-uオプションはアップストリームの指定です。アップストリームが登録されていないとエラーになるので初回は必須です。
2回目以降は「push origin main」やアップストリームにpushするなら「git push」だけでも操作可能です。
PS>git push -u origin main ...
この時GUIでGitHubの認証が出ると思いますので、「Sign in with your browser」をクリックして、ブラウザからログインし操作を受け入れる選択をすると、コマンドライン上の作業が継続されます。
レポジトリからclone
別の環境やフォルダに移り、フォルダに何もない状態からリモートレポジトリにあるプロジェクトを復元します。リモートのレポジトリを丸ごとコピーする場合は「git clone」を使います。
PS>git clone https://github.com/オーナー名/レポジトリ名.git ...
Angularのデフォルトの設定では、node_modulesにあるNode.jsのライブラリは.gitignoreファイルによりgitの対象からは外されています。これらのパッケージを復元するには、cloneしたフォルダの中で「npm update」を実行します。これらはpackege.jsonファイルによって復元されます。
PS>npm update ...
これでAngularプロジェクトは復元できました。復元する環境にangularのcliがインストールされていない場合は、別途「npm install -g @angular/cli」でグローバル環境にAngular CLIをインストールします。
cloneした環境で、README.mdを更新してリモートレポジトリにpushできることを確認します。
PS>git add README.md ... PS>git commit -m "edit readme" ... PS>git push
commit実行時、gitの設定の有無により次のように表示されることがあります。その際は、メッセージの通りに、gitコマンドを実行し、メールアドレスとユーザー名を設定した後実行します。
*** Please tell me who you are. Run git config --global user.email "you@example.com" git config --global user.name "Your Name" to set your account's default identity. Omit --global to set the identity only in this repository.
最後に、元の環境に戻ってpullして変更を確認します。
PS>git pull remote: Enumerating objects: 5, done. remote: Counting objects: 100% (5/5), done. remote: Compressing objects: 100% (1/1), done. remote: Total 3 (delta 2), reused 3 (delta 2), pack-reused 0 Unpacking objects: 100% (3/3), 268 bytes | 1024 bytes/s, done. From https://github.com/sugakenn/krep 6831a26..8652014 main -> origin/main Updating 6831a26..8652014 Fast-forward README.md | 2 ++ 1 file changed, 2 insertions(+)
参考にさせていただきました。サイト一覧です。ありがとうございました。