はじめに

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

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

VS Codeインストーラーのダウンロード

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

ダウンロードしたインストーラーを実行します。

「次へ」をクリックします。

「次へ」をクリックします。

「次へ」をクリックします。

「PATHへの追加(再起動後に使用可能)」にチェックが入っている状態で「次へ」をクリックします。
→Ubuntu上でcodeコマンドを使用することで、VS Codeで簡単にUbuntu上のディレクトリを開くことができるようになります。

「インストール」をクリックします。

「完了」をクリックします。

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

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

bash

code .

VS Codeのインストール時に、codeコマンドがWindows側にインストールされ、
UbuntuからWindowsのディレクトリをマウントしているため、
Ubuntu上からもcodeコマンドが実行可能になっています。

bash

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

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

下記コマンドを実行します。

bash

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

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

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

# VS Codeを起動
code .

Ubuntu上の/home/hiropon/helloディレクトリと接続した状態でVS Codeが起動します。
(hiroponは適宜ご自身のユーザー名に読み替えてください)

右クリック→「New File...」で新規ファイルを作成します。

ファイル名は「hello.bash」とします。

下記のコードを入力、保存します。

hello.bash

#!/bin/bash

echo "Hello World!"

Ubuntuのディレクトリを確認してみましょう。
ファイルが作成されていることがわかります。

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

bash

bash hello.bash

Ubuntu上で実行できました。

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

「Terminal」→「New Terminal」をクリックします。

VS Code上からディレクトリの状態確認やコード実行ができました。

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