Visual Studio CodeのインストールとUbuntu on WSL2への接続

## はじめに
Windows11Pro+WSL2+Ubuntu+Docker環境を構築し、
VS CodeからUbuntuに接続しプログラム作成、コンテナイメージ作成、
AWSのECRへプッシュ、ECSへのデプロイ・接続確認までを行います。

1. [WSL2のインストール](https://qiita.com/hiropon1839/items/126de61987a0daa8267d)
2. **[Visual Studio CodeのインストールとUbuntu on WSL2への接続](https://qiita.com/hiropon1839/items/0f48d85733ad0c85b3b1) (今回の記事)**
3. [Docker Desktopのインストール、Dockerfile作成、コンテナビルドと修正](https://qiita.com/hiropon1839/items/2af467975fb31bbb2819)
4. [AWS CLIインストール、IAMユーザー作成、アクセスキー作成、AWSリソースへのアクセス](https://qiita.com/hiropon1839/items/cd9d1e049ac5d0c07a64)
5. [AWS ECRリポジトリ作成、Ubuntu on WSL2からECRへのプッシュ](https://qiita.com/hiropon1839/items/52442eb55a58c0b409a0)
6. [AWS ECSのタスク定義、クラスタ作成、サービス作成](https://qiita.com/hiropon1839/items/d443d0073f12819f1a88)

:::note warn
以降では「WSL2上のUbuntu」を単に「Ubuntu」と表現します。
:::


## VS Codeインストーラーのダウンロード
VS Codeダウンロードページにアクセスし、インストーラーをダウンロードします。
https://code.visualstudio.com/download

## VS Codeのインストール
ダウンロードしたインストーラーを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/c288506a-8ff4-1590-912e-4e2e1b5a71fb.png)

「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/056a086d-4eef-3aad-b766-aa6068841ac9.png)

「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/f8d60a86-f392-ac0f-9b2f-6719dbcca739.png)

「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/7967748f-8a03-6a78-b920-f27993dd8573.png)

「PATHへの追加(再起動後に使用可能)」にチェックが入っている状態で「次へ」をクリックします。
→Ubuntu上で`code`コマンドを使用することで、VS Codeで簡単にUbuntu上のディレクトリを開くことができるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/184b2ba9-681e-94fb-29b4-5f3e48fcdf56.png)

「インストール」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/b836d4d0-7bc2-d9ec-8f6f-999c458f9a7d.png)

「完了」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/c81b3a92-f36f-6732-e579-46ae1f510bc1.png)

これでVS Codeのインストールが完了しました。
Windowsを再起動します。

## UbuntuからVS Codeを起動
Windowsの再起動後、Ubuntu上で下記コマンドを実行することでUbuntuと接続した状態で、VS Codeが起動できます。

```bash:bash
code .
```

:::note info
VS Codeのインストール時に、`code`コマンドがWindows側にインストールされ、
UbuntuからWindowsのディレクトリをマウントしているため、
Ubuntu上からも`code`コマンドが実行可能になっています。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/3ff5c4d1-c246-1a9c-9609-b0028f4386b3.png)

```bash:bash
hiropon@um560xt:~$ which code
/mnt/c/Users/hiropon/AppData/Local/Programs/Microsoft VS Code/bin/code
```



## VS Codeでコードを作成、Ubuntu上で実行
VS Codeでコードを作成し、Ubuntu上で実行してみます。

### Ubuntu側の準備
下記コマンドを実行します。

```bash:bash
# hello ディレクトリを作成
mkdir hello

# hello ディレクトリに移動
cd hello

# カレントディレクトリを確認
pwd

# VS Codeを起動
code .
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/5a5f050a-24f5-2206-31ef-f999bd75d81a.png)

Ubuntu上の`/home/hiropon/hello`ディレクトリと接続した状態でVS Codeが起動します。
(hiroponは適宜ご自身のユーザー名に読み替えてください)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/4e1c007c-d7f8-305c-3a18-800346678077.png)

### 新規ファイルの作成

右クリック→「New File...」で新規ファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/e57acb41-fee1-09dd-2139-f5bf67ba85ac.png)
ファイル名は「hello.bash」とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/bae408d3-d197-d4a9-985c-becc4bcbae35.png)

下記のコードを入力、保存します。
```bash:hello.bash
#!/bin/bash

echo "Hello World!"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/ad95118e-ed96-9512-a57b-101546f26c48.png)

Ubuntuのディレクトリを確認してみましょう。
ファイルが作成されていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/9983e024-875c-7290-8746-8d99176b2341.png)

下記コマンドで`hello.bash`を実行すると、「Hello World!」と出力されます。
```bash:bash
bash hello.bash
```
Ubuntu上で実行できました。


## VS Codeからプログラムを実行
Windowsターミナルを開かなくても、VS Codeの画面上でUbuntuに接続し、コードを実行することができます。
コードを修正→実行結果確認→コードを修正 というサイクルがスムーズに行えます。

「Terminal」→「New Terminal」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/601f3b5e-bc58-ee2e-131a-7aa86dabf125.png)
VS Code上からディレクトリの状態確認やコード実行ができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/4a6d6100-13d6-afb0-c263-790e76ca191a.png)

## さいごに
VS Codeのインストール、VS CodeからUbuntuへの接続、プログラム作成が完了しました。
次回はDocker Desktopをインストールし、コンテナのビルドと修正までやってみます。

- [Docker Desktopのインストール、Dockerfile作成、コンテナビルドと修正](https://qiita.com/hiropon1839/items/2af467975fb31bbb2819)

## 参考ページ
- [Linux 用 Windows サブシステムで Visual Studio Code の使用を開始する](https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode) (Microsoft)