50th Anniversary
お役立ち資料
無料Web相談
お問い合わせ

2022.8.9

【VSCode + Git Bash】Windows に Node.js や AWS CLI の環境を構築する方法

ブログ「【VSCode + Git Bash】Windows に Node.js や AWS CLI の環境を構築する方法」サムネイル

みなさん、こんにちは。イノベーションLABのハヤシです。

今回は私の開発環境をご紹介したいと思います。
ここで構築した環境を前提に、簡易的な API + SPA を SAM と AWS Amplify ライブラリを利用して構築する記事も書く予定です！

私は開発端末を Windows 一筋でやってきました。
とはいえ AWS 上の EC2 で操作をすることも多いので、 Linux コマンドをメインに使用したいと思っています。
WSL（Windows Subsystem for Linux）は出始めた時に試してはみたのですが、
まだ動作が安定していないこともあって相性がよくありませんでした。
その時に VSCode + Git Bash に出会って、それ以来の付き合いです。

今では WSL2 や Docker Desktop for Windows とも触れ合うことはありますが、メインは今回の構成です。

必要な部分だけでも、ぜひ参考にしてみてください。

前提条件

1. 前提条件

OS - Windows 10 Pro （Home でも問題ありません）

2. この手順でインストールするもの

  • VSCode - 1.69.1

  • Git - 2.37.1.windows.1

  • AWS CLI - 2.7.14

  • SAM CLI - 1.53.0

  • nvm-windows - 1.1.9

  • Node.js - 16.16.0

  • pyenv-win - 2.64.3

  • Python - 3.10.2

環境構築

1. VSCode

1-1. インストール

以下にアクセスして、 Windows のダウンロードボタンをクリックします。

https://code.visualstudio.com/download

20220714112316

ダウンロードされた exe ファイルをダブルクリックしてインストールを開始します。 20220714112501

2022071411294320220714112958

「追加タスクの選択」では、「Codeで開く」コンテキストメニューを追加しておくと便利なので、チェックを入れておきましょう。

202207141131172022071411313420220714113147

1-2. 日本語化

VSCode で作業します。

「Ctrl + Shift + p」を入力してコマンドパレットを開き、「Configure Display Language」と入力して選択します。

20220714113422

「日本語」を選択します。

20220714113436

再起動の確認ダイアログが出るので「Restart」をクリックします。 20220714113451 

日本語化できました。

20220714113522

2. Git for Windows

2-1. インストール

以下にアクセスして、ダウンロードボタンをクリックします。

https://gitforwindows.org/

20220714113759

ダウンロードされた exe ファイルをダブルクリックしてインストールを開始します。 

20220714113821202207141138412022071411390120220714113919

Git 操作のデフォルトエディタを VSCode にするため、「Choosing the default editor used by Git」は「Use Visual Studio Code as Git's default editor」とします。
※Vim 操作に慣れている方はデフォルトのままとしてください20220714114006

デフォルトのブランチ名を変更することができますが、「Let Git decide」のままとします。
※この後の手順で、都度 master ブランチを main ブランチに変更します 20220714114049202207141141262022071411414920220714114208202207141142272022071411430420220714114319

「Choose a credential helper」では、「None」を指定します。
ここで None を選択しないと、 CodeCommit で接続時に 403 エラーになることがあります
参考:Git for Windows: Git for Windows をインストールしましたが、リポジトリへのアクセスが拒否されます (403)202207141147062022071411471920220714114733

View Release Notes のチェックをはずして、 Finish をクリックします。 20220714114800

2-2. VSCode のターミナルを Git Bash に設定

VSCode で作業します。

「Ctrl + ,」で設定画面を開き、「terminal.integrated.defaultProfile.windows」で検索します。
「Git Bash」を選択しておきましょう。20220714115020

「Ctrl + Shift + @」でターミナルを開き、 Git Bash が開くことを確認しましょう。 20220714115041

※この後の手順は特に指示がない限り、エディタは VSCode でターミナルは Git Bash での操作となります

3. AWS

3-1. AWS CLI インストール

以下の「Windows」のインストール手順に従います。 

AWS CLI の最新バージョンのインストールまたは更新 - AWS Command Line Interface

 

以下にアクセスすると、インストーラー（msi）がダウンロードされます。

https://awscli.amazonaws.com/AWSCLIV2.msi

ダウンロードした msi ファイルをダブルクリックしてインストールを開始します。 20220714115322 20220714115334 20220714115344 20220714115357 20220714115410

VSCode を開きなおして、以下のコマンドでバージョンが表示されることを確認します。 

aws --version

20220714132328

3-2. IAM ユーザ作成

AWS マネジメントコンソールで作業します
 ※AWS アカウントがない場合は、以下を参考に作成しておいてください。

https://aws.amazon.com/jp/premiumsupport/knowledge-center/create-and-activate-aws-account/

 

マネジメントコンソールで IAM ユーザの画面を開きます。
◆IAM -> ユーザー
「ユーザーを追加」をクリックします。

20220714132516

ユーザ名を入力し、「アクセスキー - プログラムによるアクセス」と「パスワード - AWS マネジメントコンソールへのアクセス」にチェックを入れて、「次のステップ：アクセス権限」をクリックします。
※今回は CLI でアクセスするため「アクセスキー」にチェックを入れましたが、セキュリティのベストプラクティスでは「パスワード」のみが理想です。

20220714132638

「既存のポリシーを直接アタッチ」を選択し、「AdministratorAccess」にチェックを入れて、「次のステップ：タグ」をクリックします。
 ※ここでは簡易的に AdministratorAccess を付与しましたが、なんでもできてしまうため、推奨されません。取り扱いには注意してください。

20220714132733

タグに以下を設定し、「次のステップ：確認」をクリックします。
キー： Name
値：設定したユーザ名

20220714133130

内容を確認して、「ユーザーの作成」をクリックします。 20220714133155

このタイミングでしかダウンロードできないので、必ず「.csvのダウンロード」で認証情報をダウンロードしてください。

20220714133248

ダウンロードしたファイルを開くと、以下の内容が記載されています。
※ダブルクリックして Excel で開くとパスワードなどがうまく開かないことがあるので、 VSCode などエディタで開くようにしてください

  • ユーザ名

  • マネジメントコンソールにログインする初回パスワード（初回アクセス時に変更します）

  • アクセスキー

  • シークレットアクセスキー

  • ログインURL

20220714133326

一度マネジメントコンソールからログアウトし、あらためてログインURL にアクセスして、ユーザ名/パスワードでログインしておきましょう。

3-3. AWS アクセス設定

VSCode のターミナルで作業します。
CLI で AWS を操作する設定を行います。
ターミナルで、以下のコマンドを実行します。

aws configure  # すでに他の AWS アカウントでの設定をしていて上書きしたくない場合 # aws configure --profile ＜プロファイル名＞

 それぞれ以下の内容を設定します。

  • AWS Access Key ID [None]:
    • DL した csv ファイルの「Access key ID」の値
  • AWS Secret Access Key [None]:
    • DL した csv ファイルの「Secret access key」の値
  • Default region name [None]:
    • ap-northeast-1
  • Default output format [None]:
    • json

20220714133729

以下のコマンドを実行して出力されるアカウントが、自分のアカウント ID であることを確認しましょう。

aws sts get-caller-identity

20220714133825

アカウント ID はマネジメントコンソールの右上から確認できます。 20220714134257

今後、 aws コマンドやこの後インストールする sam コマンドを実行する場合は、このアカウントに対する操作となります。 ※検証の場合は本番アカウントやお客様のアカウントなどでないことを十分確認してください

3-4. SAM CLI インストール

SAM（Serverless Application Model）というツールを利用して、 AWS 上での API 構築を簡易化します。
以下の URL を参照して進めていきます。

https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install-windows.html

※Docker は今回は利用しないのでスキップします。

 

以下にアクセスすると、インストーラー（msi）がダウンロードされます。

https://github.com/aws/aws-sam-cli/releases/latest/download/AWS_SAM_CLI_64_PY3.msi

ダウンロードした msi ファイルをダブルクリックしてインストールを開始します。 20220714134614 20220714134625 20220714134638 20220714134653 20220714134703

インストールが完了しても、 Git Bash からコマンドが認識できるようになっていません。 設定ファイルに追記しておきます。
VSCode のターミナルで以下のコマンドを実行してください

echo "alias sam='sam.cmd'" >> ~/.bashrc source ~/.bashrc  sam --version

 バージョンが表示されれば完了です。

20220714134913

4. Node.js

今回はバックエンドは Node.js フロントエンドは React.js で進めていくので、 Node.js をインストールします。

4-1. nvm-windows インストール

Windows では Node のバージョン管理のため、「nvm-windows」を利用します。
これを利用すると、同じマシンで複数の Node.js のバージョンを切り替えて使用できるようになります。
以下の URL を参照して進めていきます。
https://github.com/coreybutler/nvm-windows

 

以下にアクセスして、最新の「nvm-setup.exe」をダウンロードします

https://github.com/coreybutler/nvm-windows/releases

20220714135117

ダウンロードされた exe ファイルをダブルクリックしてインストールを開始します。

20220714135135 20220714135217 20220714135227 20220714135238 20220714135249

「Set Node.js symlink」は、デフォルトでは「Program Files」ですが、インストールパスにスペースが含まれるとエラーになるため、「Programs」に変更しておきます
※このタイミングで先に「C:\Programs」ディレクトリを作成しておきましょう 20220714135322

VSCode を開きなおして、以下のコマンドでバージョンが表示されることを確認します。 

nvm version

20220714135408

4-2. Node.js インストール

VSCode のターミナルで作業します。
以下のコマンドで Node.js のインストールと利用設定をしておきます。

nvm install 16.16.0 nvm use 16.16.0  node --version

20220714135446

20220714135458

※最新の安定板を利用したい場合は以下でインストールできます

nvm insall lts

5. Python

普段私はバックエンドに Python を利用することが多いので、おまけとして Python の環境構築も進めていきます。

5-1. pyenv-win インストール

Windows での Python のバージョン管理のため、「pyenv-win」を利用します。
これを利用すると、同じマシンで複数の Python のバージョンを切り替えて使用できるようになります。

以下の URL を参照して進めていきます。
https://github.com/pyenv-win/pyenv-win:embed

 

VSCode のターミナルで作業します。

 

以下のコマンドで pyenv をダウンロードします。

git clone https://github.com/pyenv-win/pyenv-win.git "$HOME/.pyenv"

20220714145550

ターミナルを PowerShell に切り替えてください。 20220714145609

PowerShell のターミナルで以下のコマンドを実行します。

[System.Environment]::SetEnvironmentVariable('PYENV',$env:USERPROFILE + "\.pyenv\pyenv-win\","User") [System.Environment]::SetEnvironmentVariable('PYENV_HOME',$env:USERPROFILE + "\.pyenv\pyenv-win\","User") [System.Environment]::SetEnvironmentVariable('path', $env:USERPROFILE + "\.pyenv\pyenv-win\bin;" + $env:USERPROFILE + "\.pyenv\pyenv-win\shims;" + [System.Environment]::GetEnvironmentVariable('path', "User"),"User")

 VSCode を開きなおして、以下のコマンドでバージョンが表示されることを確認します。
※ターミナルは bash（Git Bash）で OK

pyenv --version

20220714145647

以下のコマンドで、 pyenv のインストールリストをアップデートしておきましょう。

pyenv update

20220714145702

5-2. Python インストール

VSCode のターミナルで作業します。
以下コマンドでインストールできる Python のバージョンを確認します。

pyenv install --list

以下のコマンドで Python のインストールと利用設定をしておきます。

pyenv install 3.10.2 pyenv global 3.10.2

以下のコマンドでバージョンが表示されることを確認します。

python --version

20220714154928

うまくバージョンが表示されない場合は以下のコマンドを実行したり、 VSCode を開きなおしたりしてみてください。

pyenv rehash

特定のディレクトリのみバージョンを変更したい場合は、対象ディレクトリで以下のコマンドを実行してください。

pyenv local 3.10.2

 以上で、環境構築は終わりです。お疲れ様でした。

参考

1. VSCode

Visual Studio Code - Code Editing. Redefined

2. Git for Windows

Git for Windows

認証情報ヘルパーと への HTTPS 接続のトラブルシューティングAWS CodeCommit - AWS CodeCommit

Integrated Terminal in Visual Studio Code

3. AWS

AWS アカウントの作成とアクティブ化

 AWS CLI の最新バージョンをインストールまたは更新します。 - AWS Command Line Interface

Windows への AWS SAM CLI のインストール - AWS Serverless Application Model

 

Add "sam" script for bash on windows · Issue #3589 · aws/aws-sam-cli · GitHub

4. Node.js

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

5. Python

GitHub - pyenv-win/pyenv-win: pyenv for Windows. pyenv is a simple python version management tool. It lets you easily switch between multiple versions of Python. It's simple, unobtrusive, and follows the UNIX tradition of single-purpose tools that do one thing well.