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