VSCode + Git + githubでAzure開発環境整備(on Windows11)

# 背景と目的
VSCodeもGitもAzureもほとんど触ったことがなかった自分のような人が高速で環境整備できるようにドキュメントをまとめました。これを読めば研修前の30分で環境が整う！（はず！）
## おことわり
* Windows11環境です。
* Github Enterprise Server環境です。

# VSCode + Git + Node.jsインストール
　のっけから他所のご案内となりますが:sweat:、ここでまとめるより非常に手順が整理されているWebページ（[【VSCode + Git Bash】Windows に Node.js や AWS CLI の環境を構築する方法](https://blog.css-net.co.jp/entry/dev-environment-windows)）を紹介いただきました。そちらを参照しながらの説明となります。

## VScodeのインストール
[上述Webページ](https://blog.css-net.co.jp/entry/dev-environment-windows) 内 ＞  [2. 環境構築 ＞ 2-1 VSCode](https://blog.css-net.co.jp/entry/dev-environment-windows#2-1-VSCode) を参照して、**VSコードのインストール**および**日本語化**を実施。

## VSCode拡張機能のインストール
インストールを推奨する拡張機能は以下の通り。VSCodeの拡張機能(Ctrl+Shift+X)から「インストール」を押下してインストールできる。
### Node.js modules
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/cf1b651f-95ad-0069-4bc6-d82b7c105cc5.png)
### ESLint
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/126368d6-c7e6-647c-e9cf-9c49b788adc2.png)
### Azure Tools
(スクリーンショットはインストール済みのもの。)
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/99e18c93-32f2-5e09-78fa-2afa82d46106.png)



## Gitのインストール
[上述Webページ](https://blog.css-net.co.jp/entry/dev-environment-windows) 内 ＞ [2. 環境構築 ＞ 2-2 Git](https://blog.css-net.co.jp/entry/dev-environment-windows#2-2-Git-for-Windows)を参照して、**Gitのインストール**および**VSCode のターミナルをGit Bashに設定**。

## Node.jsのインストール
[上述Webページ](https://blog.css-net.co.jp/entry/dev-environment-windows) 内 ＞ [2-4. Node.js](https://blog.css-net.co.jp/entry/dev-environment-windows#2-4-Nodejs) を参照して**nvm-windowsのインストール**および**Node.jsのインストール**を実施。
### 補足1：インストールパス
>「Set Node.js symlink」は、デフォルトでは「Program Files」ですが、インストールパスにスペースが含まれるとエラーになるため、「Programs」に変更しておきます。

とありますが、自分の環境ではインストールパスにスペースが含まれていてもエラーは発生しないため、最新の状況では対応不要かもしれません。
### 補足2：インストールバージョン
2023/5時点でAzure App Serviceとのバージョンの整合性を取るため、インストールバージョンは**18.16.0を推奨**。
インストールコマンドは`nvm install 18.16.0` `nvm use 18.16.0`。


## (余裕があれば)Pythonのインストール
[上述Webページ](https://blog.css-net.co.jp/entry/dev-environment-windows) 内 ＞ [2-5. Python](https://blog.css-net.co.jp/entry/dev-environment-windows#2-5-Python) を参照して**pyenv-winのインストール**および**pythonのインストール**を実施。



# Github(Github Enterprise)との連携
Github Enterprise上で提供するリポジトリをクローンします。
**前提**：クローン対象のリポジトリはすでに提供されている。

## Github Enterpriseアカウント作成
（省略:hugging:）

## リポジトリのクローン（初回のみ）
* 提供されたGithubのリポジトリ「Code」からHTTPSのURLをコピー。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/892d230e-9eb4-7c75-a177-51179c031dea.png)
* VSCodeを起動し 「新しいウィンドウ」(`Ctrl+Shift+N`)を立ち上げ
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/01115296-90ff-621c-dc57-4971f2efce9b.png)

* メニュー ターミナル＞新しいターミナル( `Ctrl+Shift+@` ) で新しいターミナルを起動
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/7bf4dbd0-2fc3-7f0c-0052-f1beaeabd2d1.png)

* ターミナルでリポジトリをダウンロードするディレクトリ（ここでは`git`）に移動 （ `cd git` )
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/8470e23c-01bd-f586-a7cd-1a48775eb37f.png)

* リポジトリをクローンする `git clone https://xxxxx.xxxxx.com/xxxxxx/sample-repo.git`

* サインインのセッション用のウィンドウが起動するので「Sign in with your browser」を押下
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/b690d113-e42e-b1d2-827d-dcf45387dde0.png)

* ウィンドウが遷移するので「Authorise github-enterprise」を押下。その後、ステータスが進捗。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/d23c20d7-41f4-5a3c-ad92-6a0ca1a2ee48.png)
![10b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/5c4cff35-18b2-629b-68bb-5eab466797bb.png)

## クローンしたリポジトリを開く

* VSCodeを起動し「ソース管理」のアイコンを押下して「フォルダを開く」を押下
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/af0c1d47-201f-e66b-10f5-0b335927cf1d.png)

* 「git」フォルダ＞リポジトリ名のフォルダを選択（ここではcljn-trial-1）
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/2a0d28c0-2d57-61d3-3504-d4b2a14dde05.png)
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/63d4f225-6566-bf81-b994-0a39d9227811.png)

* Cloneしたリポジトリが起動
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/923c9137-885c-e3e1-7e67-688ac4067514.png)

## リポジトリのクローン（2回目以降）
* 「ソース管理」のアイコンから「リポジトリのクローン」を押下
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/74a69955-a97b-2d1d-7529-dfcb06b88301.png)

* リポジトリのURLを入力
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/645df66e-cc27-46f2-ef08-c93925a405a0.png)

* リポジトリを保管するフォルダを選択（ここでは「git」フォルダを指定）
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/2a0d28c0-2d57-61d3-3504-d4b2a14dde05.png)

* クローンしたリポジトリを開く
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/508e1b0e-37b7-3175-2076-8d458aa23cba.png)
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/1597c34c-053c-3b4c-62df-7cb55b31b516.png)

## 補足：「新しいウィンドウで開く」で開いたウィンドウのメニューが英語で、日本語に戻したい場合
* View->Command Palette を選択
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/9a1bd175-640b-946a-d6a8-3bef3fec1198.png)

* Configure Display Language と入力
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/eb2b037d-15c4-43ee-c2b3-ca5263698de2.png)

* ja を選択→ 再起動
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/20ee8da4-7e30-25b4-02fa-fe5a221845da.png)

これで直らない場合は、Configure Display Languageを一度「English」で選択して再起動ののち、同様の操作をしてみる。

## 補足：VSCodeで作成したソースコードを自分のリポジトリに反映（コミット）する
**注**：複数名で管理するリポジトリをコミットする場合はブランチの考え方、プルリクエストの考え方を踏まえて操作を行う必要があるため、他の記事（例：[Visual Studio Code と Git Hub を連携させてみる](https://www.yrl.com/column/devops_07.html)）などを参照のうえ注意して行うこと。


* ソースの変更・保存を行うと「ソース管理」アイコンにバッジが点灯する
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/c633b9b1-237f-34d9-53c4-e04f1a09c945.png)

* コメントを追加して「コミット/コミットしてプッシュ/コミットして同期」いずれかを選択（ここでは「コミット」を選択）
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/e0b803b3-5f24-d5ea-9418-e9970ebb419c.png)

* "There are no staged changes to commit."の警告が出るので今回は「はい」を選択
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/02b241e5-c30f-af7f-e62d-0a922f289e11.png)

* 「変更の同期」を押下　～　OKを押下
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/36995f71-2eb6-3884-bc89-ced185b5f87f.png)
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/fc4e7446-5153-9ab3-bf04-c73042ec5b6f.png)

* Githubのリポジトリに変更が反映されたことを確認
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3375055/332d785d-4041-7fee-3e42-fedcb4b4a224.png)