初期設定の覚書 git + Angular8 + AWS Amplify


要旨

タイトルのとおりです!

git + Angular 8 + AWS Amplify の環境構築に毎回悩むので自分用メモです。

適用順番

忘れないように、適宜 commit しながら。
それぞれ、インターネットから大量のファイルをダウンロードするので、やり直すのがめんどくさいです。

0. 初期設定

コマンド類 ng とか amplify が使えるようになっている想定です。
ng コマンドがインストールされていないとかは自分で解決を。

1. git Repository の作成

まずは、Repository を Web から作成します。

注意
README.md.gitignore ファイルは、後で Angularによって作成されるので、ここでは作成しない。

2. git clone

git clone https://github.com/****.git コマンドで、ローカルリポジトリを作成して、ディレクトリに移動します。

README.md.gitignore がある場合、削除しておきます。

3. Angular 8

ng new コマンドで、 Angular を 初期設定します。

自分自身のディレクトリにインストールするため
ng new your-project-name --directory ./ でインストールします。

See also
https://angular.io/cli/new
https://github.com/angular/angular-cli/issues/5431

メモ
VS code の管理ファイルで .editorconfig ファイルが作成されますが、 .gitignore にないので追加。

4. AWS Amplify

AWS Amplify の 初期化を行います。

See also
https://aws-amplify.github.io/docs/cli-toolchain/quickstart#environments-and-teams

『Environments and Teams』を見る限り、 Amplify の environment name は git の branch 名と合わせるのが良さそう。

この段階で、 develop ブランチにチェックアウトしておきます。

git checkout -b develop

amplify init

完了後、 amplify 関係の .gitignore が追加されています。

なので、 .gitignore の更新。

注意
The file will have its original line endings in your working directory
どうやら、Amplify の追加する改行コードが不一致するみたいなので、改行コードを CRLF -> LF と修正することで、LFに統一。

git add .gitignore
git commit

備考:AWS を GitHubで安全に使うために。

github経由でシークレットキーを漏洩しないために、 git-secrets をインストールしておきます。

See also
https://github.com/awslabs/git-secrets
https://qiita.com/jqtype/items/9196e047eddb53d07a91

Windows でも問題なく動作します。
注意点としては、PATHを通すために、インストール後に再起動が必要。

使い方は、
git secrets --install
git secrets --register-aws

以上