♦️

Windows＋Volta+AngularプロジェクトをGitHubにアップする

2021/11/21に公開

Angular

Git

GitHub

tech

2021年11月21日時点のWindows10での情報です。

前回Windows10にAngularプロジェクトを作成するで作成したプロジェクトを、他の開発メンバーと共有するために、GitHubにアップします。

Node.jsのバージョンを固定する

Node.jsバージョン管理ツールにはVoltaを使用しています。
Voltaではpinコマンドを使用することで、プロジェクトが使用しているNode.jsのバージョンを固定してくれます。

Voltaの使い方はコチラで丁寧に解説してくれています。
Voltaを解説！手間のかからないJavaScriptツールマネージャ

作成したAngularプロジェクトのNode.jsバージョンを固定する

作成したAngularプロジェクトをVsCodeで開き、ターミナルウィンドウで以下のコマンドを入力し、nodeのバージョンを固定します。

volta pin node

package.jsonに以下のような、voltaの設定が追加されます。

"volta": {
   "node": "16.13.0",
}

GitHubのアカウントを作成する

2020年4月以降からはGitHubのほとんどの機能を無料で利用できるようになりました。
無料ユーザーでもプライベートリポジトリが作成できるようになっています。
プロジェクトのバージョン管理はGitHubを使用したいと思います。

GitHubのアカウント作成方法についてはコチラ
GitHubアカウントを作成する

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

GitHubに、プロジェクトを保存するリポジトリを作成します。

リポジトリ作成方法はコチラ
GitHubにリポジトリを作成する

今回は「angular-service」リポジトリをPrivateで作成しました。

Gitをインストール

プロジェクトをGitHubアップするためにはGitが必要です。

Gitのインストールについてはコチラ
Windows10にGitをインストール
 Windows10でGitの設定（Config）

AngularプロジェクトをGitHubにアップする

ローカルリポジトリを作成

Gitで管理したいプログラムがあるフォルダに移動し、Git用のリポジトリを作成します。

cd <プログラムがあるフォルダ>
git init

.gitフォルダが作成されます。

.gitignoreで除外ファイルを作成

.gitignoreはGit管理したくないファイルやフォルダを設定しておくファイルです。
Git管理したいプログラムがあるフォルダに「.gitignore」ファイルを作成します。

コチラのサイトgitignore.ioで、開発言語に応じたgitignoreの設定値を、自動で生成してくれます。
検索ボックスで「angular」と入力し、「作成する」ボタンをクリックすると、Angular用のgitignoreを自動で生成してくれます。

表示されたAngular用の設定内容を、先ほど作成した「.gitignore」ファイルに貼り付け保存します。

.gitignoreファイルに書かれたファイルはGitの管理対象外になり、ファイルに変更があっても追跡されません。

ワークツリー（作業フォルダ）からステージングエリアへ

現在の状態を「git status」で現在の状態を確認してみます。
mainブランチにはまだ何もコミットされていないこと
.gitignoreで管理対象外のファイルが確認できます。

「git add」コマンドで、ファイルデータをステージングエリアにアップします。
オプション「-all」で、フォルダ内のすべてのファイルをステージングエリアにアップします。

git add -A
または
git add --all

Windows10にGitをインストールで、改行コードの取り扱いを「チェックアウト時は改行コードについて何もしない。コミット時は全てLFに変換する。」を選択したので、自動変換する旨の警告「warning: CRLF will be replaced by LF in .gitignore.」と表示されます。

現在の状態を「git status」で確認してみます。
緑色の文字で表示されているファイルが、ステージングエリアにアップされたファイルです。

ステージングエリアからローカルリポジトリへ

「git commit」コマンドで、ステージングエリアのファイルデータを、ローカルリポジトリへアップします。

$ git commit -m "コミットメッセージ"

現在の状態を「git status」で確認してみます。

「nothing to commit, working tree clean（コミットできるものはなく、ワーキンツリーはクリーンな状態）」と表示されています。

コミットした内容は「git log」コマンドで確認できます。

Gitのリモートリポジトリの設定

GitHubでリモートリポジトリのURLを確認します。

「git remote add」コマンドで、リモートリポジトリのURL「https://github.com/xxxxx」を「origin」という名前でgitのローカルリポジトリに関連付けします。

git remote add origin https://github.com/longbridgeyuk/angular-service.git

設定した内容は「git remote -v」で確認できます。

ローカルリポジトリからGitHubのリモートリポジトリへ

「git push」コマンドで、ローカルリポジトリのファイルデータを、リモートリポジトリのmainブランチにアップします。

git push origin main

初回1回目はGitHubへのログインが必要です。

「sign in with your browser」をクリックします。

「Authorize GitCredentialManager」をクリックします。

パスワードを入力すると、下記の画面が表示されます。

ブラウザを閉じると、ローカルリポジトリのファイルデータがリモートリポジトリにアップされます。