macでAngularの環境構築してアプリ立ち上げまでやる


macでAngularの環境構築をしてアプリ立ち上げまでやりました。


##Homebrewをインストール

以下の記事を参考にしましょう。
[macOSにHomebrewをインストール](https://qiita.com/pypypyo14/items/4bf3b8bd511b6e93c9f9)

##nodebrewをインストール

以下の記事を参考にしましょう。
[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)


##環境変数を設定
nodebrewをインストールしたら、次はnode.jsをインストールすればいいのですがその前に環境変数を設定しておくといいかもしれません

nodebrewをインストールしたのにnode.jsがインストールできない場合は環境変数を設定しておきましょう。

環境変数ってなんぞや、って人は以下の記事が分かりやすいと思います。
[①環境変数（英：environment variable）とは]
(https://wa3.i-3-i.info/word11027.html)
[②PATHを通すために環境変数の設定を理解する (Mac OS X)]
(https://qiita.com/soarflat/items/d5015bec37f8a8254380)
[③NodebrewでNodeをインストールする](https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498)
[④.bash_profile ? .bashrc ? いろいろあるけどこいつらなにもの？](https://qiita.com/hirokishirai/items/5a529c8395c4b336bf31)
[⑤NodebrewでNodeをインストールする](https://qiita.com/soarflat/items/09be6ab9cd91d366bf71)

ここでは._zprofileにPATHを通します。
言葉を変えれば._zprofileに環境変数を通すということです。

そもそも._zprofileというのは何か、ということなのですが……。
これは「ログインシェルがzshの状態でログインしたときに読み込まれる設定ファイル」です。

以下はログインシェルに関する説明です。
[.bash_profileとは]
(https://wa3.i-3-i.info/word13650.html)

さてコードです。
まずホームディレクトリ直下で`$ vi ~/.zprofile`を打ちます。

その後、viの操作です。

viが初めての場合は以下のコマンド表を参照ください。
[viコマンド（vimコマンド）リファレンス](https://qiita.com/pe-ta/items/0510bee10bcfd88afeee)

e、iと順にキーを打ち、
`$ export PATH=$HOME/.nodebrew/current/bin:$PATH`
を入力し、esc、:wqで終了です。

これで環境変数が設定できました。

##node.jsをインストールして有効化

node.jsをインストールしていきます。
今回はv14.15.1をインストールします。
`$ brew install nodebrew　v14.15.1`
これでインストール完了です。

ただ、まだインストールはできても有効化はできていない状況です。

有効化をしていきます。

まずは実際にインストールできてるかを確認します。
`$nodebrew ls`
と打って
`v14.15.1
current: none`
と出れば成功です。

有効化します。

`nodebrew use v14.15.1`


これで有効化完了しました。

さらに詳しく知りたい方は以下の記事を参考にしましょう。
[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)

どのバージョンを入れるかですが、それは上司やチームと相談です。
LTS版を入れることが多いかもしれません。
[Node.jsのLTS版ってなに？](https://qiita.com/umi_kappa/items/2d80b72b2c4067bbe052#:~:text=LTS%20%3A%20%E9%95%B7%E6%9C%9F%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A8%E3%81%AE,%E3%81%84%E3%81%8F%E3%81%A8%E3%81%AE%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82)

##Dockerをインストール

以下の記事を参考にしましょう。
[Macにdockerインストール]
(https://qiita.com/ama_keshi/items/b4c47a4aca5d48f2661c)

##GitHubのSSH鍵設定

この項目は、新しいPCでGithubを使う人のみが必要なステップです！

SSHってなんぞや？って人は↓の動画がわかりやすいです。

[初心者向けに解説　SSH、公開鍵認証とは何か？【プログラミング】](https://www.youtube.com/watch?v=uURs8HnzCQU&t=2s)




SSH鍵設定をしていきます。


公式ドキュメントを参照しましょう。
[公式ドキュメント：新しい SSH キーを生成して ssh-agent に追加する](https://docs.github.com/ja/free-pro-team@latest/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)

ホームディレクトリ直下で`ls -a`実行。
以下のような表示になると思います。

```
.			.docker			.zsh_history		Music
..			.nodebrew		Applications		Pictures
.CFUserTextEncoding	.ssh			Desktop			Public
.DS_Store		.viminfo		Documents		y.era
.Trash			.vscode			Downloads
.bash_profile.swo	.zprofile		Library
.bash_profile.swp	.zprofile.swp		Movies
```

この中の`.sshディレクトリ`に移動します。

そして以下を実行です。
メールアドレスは自分の GitHub メールアドレスに置き換えてください。

`$ ssh-keygen -t ed25519 -C "your_email@example.com"`

これにより、入力したメールアドレスをラベルとして使用して新しい SSH キーが作成されます。

`> Generating public/private ed25519 key pair.`

以下のような表示でますが、取りあえずEnterを３回押します。

```
> Enter a file in which to save the key (/Users/you/.ssh/id_ed25519): [Press enter]
> Enter passphrase (empty for no passphrase): [Type a passphrase]
> Enter same passphrase again: [Type passphrase again]
```

その後`~/.ssh/config`へアクセス。

そこで`vi config`でviを開く。

そこで以下の項目を打ち込みましょう。

```
HOST github
  HostName github.com
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519
  User git
```

:wqで、上記内容を保存してvi編集モードを終了。

そして`$ ssh-add -K ~/.ssh/id_ed25519`です。

次にGitHubアカウントへの新しいSSHキーの追加です。
こちらは下記の公式ドキュメント通りで大丈夫です。
[公式ドキュメント：GitHubアカウントへの新しいSSHキーの追加](https://docs.github.com/ja/free-pro-team@latest/github/authenticating-to-github/adding-a-new-ssh-key-to-your-github-account)


上記リンク内の`キーを [Key] フィールドに貼り付けます。`という項目がありますが、そこに関して貼り付けるのは公開鍵です。

公開鍵の確認方法ですが`$cat id_ed25519.pub`と打ちます。
すると以下のような値が出ます。

```
-----BEGIN OPENSSH PRIVATE KEY-----
123honyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonyahonya123=
-----END OPENSSH PRIVATE KEY-----
```

この`123`で始まり`123=`でおわるのが公開鍵です。


公式ドキュメントだけで理解できなければ以下の記事も参考になります。
[GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)
[GitHubにssh接続できるようにする](https://qiita.com/0ta2/items/25c27d447378b13a1ac3)
[「よく分かる公開鍵認証」～初心者でもよくわかる！VPSによるWebサーバー運用講座(2)](https://knowledge.sakura.ad.jp/3543/)


###トラブルシューティング
最後の方ちょっとうまくいかずに、手こずりましたが以下の記事通り、質問にきちんと答えればOKでした。

エラー内容

```
The authenticity of host 'IPアドレス' cant be established.
ECDSA key fingerprint is SHA256:bigP3AxpgzAipLLAo3ejI3wLAVr33tL33qoLqP3abjk.
Are you sure you want to continue connecting (yes/no)?
Host key verification failed.
```

`Are you sure you want to continue connecting (yes/no)?`
……というクエスチョンに`yes`と答えれば解決です。
Enterを押しただけだとエラーになります。


[SSHで『Host key verification failed』と出てログインできない時の対処法](https://affi-sapo-sv.com/note/ssh-verification-failed.php)


##Dokcerを用いてDBを起動

ここも結構てこづりましたね。
以下を参考にしました。

[コマンドでDockerコンテナを停止・削除、イメージの削除をする](https://qiita.com/shisama/items/48e2eaf1dc356568b0d7)

なんかDB起動がうまくいかない時は、
Dockerコンテナを停止・削除
↓
リセット
↓
作成
……の順でやればうまくいくと思います

「Dockerってなんじゃ」ってことなんですが以下の記事がわかりやすいです。
[Dockerとは何かを入門者向けに解説！基本コマンドも]
(https://udemy.benesse.co.jp/development/system/docker.html)

##Angualerを起動

GithubからデータをDLします
（GitのSSHをコピー→`$ git clone コピーしたやつ`）
↓
できたデータをVScodeで開く
↓
`$ng serve`でAngularデプロイ
（うまくいかん時は`$ npm install --save-dev @angular-devkit/build-angular`をやってデプロイに必要なツールを揃える、その後再び`$ng serve`）