みなさん、こんにちは。イノベーションLABのハヤシです。
今回は私の開発環境をご紹介したいと思います。
ここで構築した環境を前提に、簡易的な API + SPA を SAM と AWS Amplify ライブラリを利用して構築する記事も書く予定です！
私は開発端末を Windows 一筋でやってきました。
とはいえ AWS 上の EC2 で操作をすることも多いので、 Linux コマンドをメインに使用したいと思っています。
WSL（Windows Subsystem for Linux）は出始めた時に試してはみたのですが、
まだ動作が安定していないこともあって相性がよくありませんでした。
その時に VSCode + Git Bash に出会って、それ以来の付き合いです。
今では WSL2 や Docker Desktop for Windows とも触れ合うことはありますが、メインは今回の構成です。
必要な部分だけでも、ぜひ参考にしてみてください。
1. 前提条件
1-1. 前提条件
OS - Windows 10 Pro （Home でも問題ありません）
1-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
2. 環境構築
2-1. VSCode
2-1-1. インストール
以下にアクセスして、 Windows のダウンロードボタンをクリックします。
https://code.visualstudio.com/download
ダウンロードされた exe ファイルをダブルクリックしてインストールを開始します。
「追加タスクの選択」では、「Codeで開く」コンテキストメニューを追加しておくと便利なので、チェックを入れておきましょう。
2-1-2. 日本語化
VSCode で作業します。
「Ctrl + Shift + p」を入力してコマンドパレットを開き、「Configure Display Language」と入力して選択します。
「日本語」を選択します。
再起動の確認ダイアログが出るので「Restart」をクリックします。
日本語化できました。
2-2. Git for Windows
2-2-1. インストール
以下にアクセスして、ダウンロードボタンをクリックします。
https://gitforwindows.org/
ダウンロードされた exe ファイルをダブルクリックしてインストールを開始します。
Git 操作のデフォルトエディタを VSCode にするため、「Choosing the default editor used by Git」は「Use Visual Studio Code as Git's default editor」とします。
※Vim 操作に慣れている方はデフォルトのままとしてください
デフォルトのブランチ名を変更することができますが、「Let Git decide」のままとします。
※この後の手順で、都度 master ブランチを main ブランチに変更します
「Choose a credential helper」では、「None」を指定します。
ここで None を選択しないと、 CodeCommit で接続時に 403 エラーになることがあります
参考: Git for Windows: Git for Windows をインストールしましたが、リポジトリへのアクセスが拒否されます (403)
View Release Notes のチェックをはずして、 Finish をクリックします。
2-2-2. VSCode のターミナルを Git Bash に設定
VSCode で作業します。
「Ctrl + ,」で設定画面を開き、「terminal.integrated.defaultProfile.windows」で検索します。
「Git Bash」を選択しておきましょう。
「Ctrl + Shift + @」でターミナルを開き、 Git Bash が開くことを確認しましょう。
※この後の手順は特に指示がない限り、エディタは VSCode でターミナルは Git Bash での操作となります
2-3. AWS
2-3-1. AWS CLI インストール
以下の「Windows」のインストール手順に従います。
docs.aws.amazon.com
以下にアクセスすると、インストーラー（msi）がダウンロードされます。
https://awscli.amazonaws.com/AWSCLIV2.msi
ダウンロードした msi ファイルをダブルクリックしてインストールを開始します。
VSCode を開きなおして、以下のコマンドでバージョンが表示されることを確認します。
aws --version
2-3-2. IAM ユーザ作成
AWS マネジメントコンソールで作業します。
※AWS アカウントがない場合は、以下を参考に作成しておいてください。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/create-and-activate-aws-account/
マネジメントコンソールで IAM ユーザの画面を開きます。
◆IAM -> ユーザー
「ユーザーを追加」をクリックします。
ユーザ名を入力し、「アクセスキー - プログラムによるアクセス」と「パスワード - AWS マネジメントコンソールへのアクセス」にチェックを入れて、「次のステップ：アクセス権限」をクリックします。
※今回は CLI でアクセスするため「アクセスキー」にチェックを入れましたが、セキュリティのベストプラクティスでは「パスワード」のみが理想です。
「既存のポリシーを直接アタッチ」を選択し、「AdministratorAccess」にチェックを入れて、「次のステップ：タグ」をクリックします。
※ここでは簡易的に AdministratorAccess を付与しましたが、なんでもできてしまうため、推奨されません。取り扱いには注意してください。
タグに以下を設定し、「次のステップ：確認」をクリックします。
キー： Name
値：設定したユーザ名
内容を確認して、「ユーザーの作成」をクリックします。
このタイミングでしかダウンロードできないので、必ず「.csvのダウンロード」で認証情報をダウンロードしてください。
ダウンロードしたファイルを開くと、以下の内容が記載されています。
※ダブルクリックして Excel で開くとパスワードなどがうまく開かないことがあるので、 VSCode などエディタで開くようにしてください
- ユーザ名
- マネジメントコンソールにログインする初回パスワード（初回アクセス時に変更します）
- アクセスキー
- シークレットアクセスキー
- ログインURL
一度マネジメントコンソールからログアウトし、あらためてログインURL にアクセスして、ユーザ名/パスワードでログインしておきましょう。
2-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
以下のコマンドを実行して出力されるアカウントが、自分のアカウント ID であることを確認しましょう。
aws sts get-caller-identity
アカウント ID はマネジメントコンソールの右上から確認できます。
今後、 aws コマンドやこの後インストールする sam コマンドを実行する場合は、このアカウントに対する操作となります。
※検証の場合は本番アカウントやお客様のアカウントなどでないことを十分確認してください
2-3-4. SAM CLI インストール
SAM（Serverless Application Model）というツールを利用して、 AWS 上での API 構築を簡易化します。
以下の URL を参照して進めていきます。
docs.aws.amazon.com
※Docker は今回は利用しないのでスキップします。
以下にアクセスすると、インストーラー（msi）がダウンロードされます。
https://github.com/aws/aws-sam-cli/releases/latest/download/AWS_SAM_CLI_64_PY3.msi
ダウンロードした msi ファイルをダブルクリックしてインストールを開始します。
インストールが完了しても、 Git Bash からコマンドが認識できるようになっていません。
設定ファイルに追記しておきます。VSCode のターミナルで以下のコマンドを実行してください。
echo "alias sam='sam.cmd'" >> ~/.bashrc source ~/.bashrc sam --version
バージョンが表示されれば完了です。
2-4. Node.js
今回はバックエンドは Node.js フロントエンドは React.js で進めていくので、 Node.js をインストールします。
2-4-1. nvm-windows インストール
Windows では Node のバージョン管理のため、「nvm-windows」を利用します。
これを利用すると、同じマシンで複数の Node.js のバージョンを切り替えて使用できるようになります。
以下の URL を参照して進めていきます。
github.com
以下にアクセスして、最新の「nvm-setup.exe」をダウンロードします。
https://github.com/coreybutler/nvm-windows/releases
ダウンロードされた exe ファイルをダブルクリックしてインストールを開始します。
「Set Node.js symlink」は、デフォルトでは「Program Files」ですが、インストールパスにスペースが含まれるとエラーになるため、「Programs」に変更しておきます。
※このタイミングで先に「C:\Programs」ディレクトリを作成しておきましょう
VSCode を開きなおして、以下のコマンドでバージョンが表示されることを確認します。
nvm version
2-4-2. Node.js インストール
VSCode のターミナルで作業します。
以下のコマンドで Node.js のインストールと利用設定をしておきます。
nvm install 16.16.0 nvm use 16.16.0 node --version
※最新の安定板を利用したい場合は以下でインストールできます
nvm insall lts
2-5. Python
普段私はバックエンドに Python を利用することが多いので、おまけとして Python の環境構築も進めていきます。
2-5-1. pyenv-win インストール
Windows での Python のバージョン管理のため、「pyenv-win」を利用します。
これを利用すると、同じマシンで複数の Python のバージョンを切り替えて使用できるようになります。
以下の URL を参照して進めていきます。
github.com
VSCode のターミナルで作業します。
以下のコマンドで pyenv をダウンロードします。
git clone https://github.com/pyenv-win/pyenv-win.git "$HOME/.pyenv"
ターミナルを PowerShell に切り替えてください。
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
以下のコマンドで、 pyenv のインストールリストをアップデートしておきましょう。
pyenv update
2-5-2. Python インストール
VSCode のターミナルで作業します。
以下コマンドでインストールできる Python のバージョンを確認します。
pyenv install --list
以下のコマンドで Python のインストールと利用設定をしておきます。
pyenv install 3.10.2 pyenv global 3.10.2
以下のコマンドでバージョンが表示されることを確認します。
python --version
うまくバージョンが表示されない場合は以下のコマンドを実行したり、 VSCode を開きなおしたりしてみてください。
pyenv rehash
特定のディレクトリのみバージョンを変更したい場合は、対象ディレクトリで以下のコマンドを実行してください。
pyenv local 3.10.2
以上で、環境構築は終わりです。お疲れ様でした。
3. 参考
3-1. VSCode
3-2. Git for Windows
Git for Windows
認証情報ヘルパーと への HTTPS 接続のトラブルシューティングAWS CodeCommit - AWS CodeCommit
3-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
