GitHub
angular

Angular CLIでプロジェクトを作成し、GitHubで管理する

Angularを触ってみよう、成果物はGithubで管理してみよう、とやってみたメモです。
※OSはWindows7 64bitです。

Angular開発環境の構築

Node.jsをインストールする

下記サイトからインストーラをダウンロードして実行する。
https://nodejs.org/en/download/
すべてデフォルト設定のまま進む。
インストールできたか確認。
 > node -v

Angular CLIをインストールする。

コマンドラインからnpmでインストールする。管理者権限で実行すること。
 > npm install -g @angular/cli

インストールできたか確認
 > ng -v

Gitクライアントをインストールする

こちらの記事を参考にさせていただきました。
自分用 Git For Windowsのインストール手順

Visual Studio Codeをインストールする。

この記事ではあまり関係ないが、今後VSCodeで開発していくので。
下記サイトからインストーラをダウンロードして実行する。
https://code.visualstudio.com/download
とりあえず以下の拡張機能をインストールした。
 ・Debugger for Chrome
 ・npm(npm support for VS Code)

Gitクライアントの準備

ユーザー名とメールアドレスを設定する

※GitHubのアカウントを作成済みであること。
Git Bash(Gitインストール先のgit-bash.exe)を立ち上げて、
 $ git config --global user.name "GitHubのユーザー名"
 $ git config --global user.email GitHubのメールアドレス

SSHキーを作成する

Git Bashで、
 $ ssh-keygen -t rsa -b 4096 -C "COMMENT"

  • -tオプションで、鍵のタイプを指定。
  • -bオプションで、鍵の長さを指定。デフォルトは2048。
  • -Cオプションで、コメントを付与。

鍵の生成場所とファイル名を訊かれるので
 Enter file in which to save the key (/c/Users/xxx/.ssh/id_rsa):
id_rsaというファイル名のままでよければEnter、変更する場合はその値を入力してEnter。

次に、パスフレーズを入力する。
 Enter passphrase (empty for no passphrase):【入力しても表示されないよ】

確認用パスフレーズを入力すると、秘密鍵と公開鍵のペアが生成される。

GitHubの準備

SSHキーを登録する

GitHubにログインして公開鍵の登録画面を開く。
 Settings > SSH and GPG keys > New SSH key
Titleにはどのクライアントで使う鍵なのかわかりやすい名前を付けておくとよい。
Keyには公開鍵の値をコピペ。
入力したら「Add SSH key」をクリックする。

GitHubへのSSH接続を確認する

Git Bashから
 $ ssh -T git@github.com
 The authenticity of host 'github.com (192.30.255.112)' can't be established.
 RSA key fingerprint is SHA256:nThXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.
 Are you sure you want to continue connecting (yes/no)?

接続してよいか訊かれるので、「yes」と入力してEnter。
 Enter passphrase for key '/c/Users/xxx/.ssh/id_rsa':【パスフレーズを入力】
 Hi ユーザー名! You've successfully authenticated, but GitHub does not provide shell
access.

SSH接続、成功~。

リポジトリを作成する。

GitHubに新しいリポジトリを作成する。
「Initialize this repository with a README」にチェックしておく。
「study01」というリポジトリを作成したものとする。

リポジトリをローカルにクローンする

「C:\dev\__git__」以下に持ってくるものとする。

GitHubでリポジトリのページを開き、右上の「Clone or download」を選択する。
「Clone with SSH」のアドレスをコピーする。

Git Bashを開いて「C:\dev\__git__」に移動し、
 $ git clone 【コピーしたアドレス】

で、クローン完了。ローカルリポジトリに移動し、作業ブランチ「develop」を作成する。
 $ cd study01
 $ git branch develop

ブランチが作成できたか確認する。
 $ git branch
  develop
  * master

「*」がついているのが現在の作業ブランチ。作業したいdevelopブランチに移動する。
 $ git checkout develop

※ブランチについてはこちらを参考にさせていただきました。
ぼくが実際に運用していたGitブランチモデルについて

Angular CLIでプロジェクト新規作成

study01ディレクトリ以下に、「study-cli」という名前でプロジェクトを作成するものとする。
 > cd C:\dev\__git__\study01
 > ng new study-cli
Angularアプリのひな形が作成され、実行に必要なライブラリがstudy-cli\node_modules以下にインストールされる。

アプリを実行する。
 > cd study-cli
 > ng serve --open
ブラウザが起動し(--openオプション)、「Welcome to app!!」ページが表示されることを確認する。

GitHubへPushする

ignore

node_modulesはバージョン管理に追加したくないので、「.gitignore」に設定する。
※.gitignoreについては、こちらを参考にさせていただきました。
[Git] .gitignoreの仕様詳解

ローカルにコミット

Git Bashでコマンドを入力し、ローカル環境にコミットする。
 $ git add study-cli
 $ git add .gitignore
 $ git commit -a
EnterでVimが立ち上がるので、コミットコメントを入力して保存・終了するとコミット完了。

Push

ローカル環境にコミットした内容を、GitHubに反映する。
 $ git push origin develop
GitHubのサイトで、developブランチができていること、study-cliが登録されていることを確認する。

今回の作業まとめ

・Angularアプリ開発に必要なソフトのインストール
・Angular CLIでアプリのひな形を生成
・生成したひな形をGitHubで管理

ローカルのディレクトリはこんな感じです。
C:\dev\__git__
└─study01
  │ .git
  │ .gitignore
  │ README.md
  └─study-cli ★アプリルート
    ├─e2e
    ├─node_modules
    └─src
      ├─app
      ├─assets
      └─environments