Yesterday we briefly set up an environment on macOS, and this time we will set up a Docker environment that works with WSL on Windows 11. This will allow us to work with Visual Studio Code in the Windows environment while continuing development on Linux.
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3GdmeJnmri66kHPtNN6wYG%2F929facaa919b3add955c0b7044d19361%2Ffrank-mckenna-tjX_sniNzgQ-unsplash.jpg&w=3840&q=75)
Prerequisite
As a prerequisite for this project, we will create a development environment on Linux using WSL. Visual Studio Code, which can be used on Windows, is convenient from a work efficiency standpoint, so we will be able to make good use of it.
If you use WSL, you can also set up a Docker environment without using Hyper-V. This time, we will set up a Docker environment including Docker Desktop.
Setup
First, install Docker Desktop for Windows.
![dockerwindows06.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F62bJkIE4zY4gDNNDX8k23i%2F01d1c5e39c8f287ee6e44fc6d8c45f0e%2Fdockerwindows06.png&w=3840&q=75)
After installation is complete, right-click on the running icon and you will see the following screen: Switch to Windows Containers... is displayed, you can use Linux containers, so we will proceed as is.
![dockerwindows07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2FLoucVzHkyRLKW9rDmO4JN%2F89ef6c9e7ab298348ae555e8a918bb92%2Fdockerwindows07.png&w=3840&q=75)
Next, the Windows subsystem for Linux must be installed. The procedure is simple, and takes the form of executing the following command in a terminal environment.
wsl --install
This completes the installation. The next point is which distribution to use. To install this, also run the following command in the terminal.
wsl --install -d ubuntu-22.04
When the installation starts, the image will begin downloading and will boot when the download is complete.
![dockermacos04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1CSvYgX8Lskc0R51YScpEj%2F9a1d25da77be9793180afaec85ec1bae%2Fdockermacos04.png&w=3840&q=75)
Once started, the process of creating an account to be used in the Linux environment will begin. Simply reconfirming your user name, password, and password will complete the preparation of your Linux environment.
![dockerwindows02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2N1B4fu01YhFRPBQAniY2t%2F92b840da01043d1c623c7dacbe513652%2Fdockerwindows02.png&w=3840&q=75)
When completed, the following dialog box will appear in the lower right corner.
![dockerwindows08.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3UKrE1OMMOuYPlskdHcsZY%2F8d02b29dfd312ebbe59d3d3f99c1a3c9%2Fdockerwindows08.png&w=3840&q=75)
Now that Docker Desktop has recognized the Ubuntu environment, you will be prompted with a dialog asking if you want to restart. Please restart at this point.
When actually accessing the Ubuntu environment, Ubuntu 22.0.4.2 LTS will be displayed when selecting the environment you wish to use after launching the terminal.
![dockerwindows03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2juanoHKUeTAllV3ni81AH%2Fa3cad9f81bd33b1daad3bf04129050e4%2Fdockerwindows03.png&w=3840&q=75)
First, the Linux environment is ready.
Working with Visual Studio Code
Not only can you access Linux from the terminal, but you can also seamlessly connect Visual Studio Code. Next, we will proceed with the procedures for linking with Visual Studio Code.
First, to manage the repositories in Github, I have created a personal directory called github. After navigating to the directory, start Visual Studio Code from the command line with code . and start Visual Studio Code from the command line.
mkdir github
cd github
code .
For the first time, VS Code Server installation will run automatically.
![dockerwindows04.gif](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5klFRw4fmqgKtPzExQ2llz%2F7d78c416ffe4a3f778ec7f7449652348%2Fdockerwindows04.gif&w=3840&q=75)
The Visual Studio Code that has been launched shows that it is accessing the github directory where it was created, and in the lower left corner, it displays information that it is using Ubuntu-22.04.
![dockerwindows05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4CH2oXHoCK1Q9etZL3nMf6%2F243266f9339503c1471360ef350ccbd6%2Fdockerwindows05.png&w=3840&q=75)
Cloning a GitHub Repository
Visual Studio Code view - From the command palette, run the Git clone command.
![dockerwindows09.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6ly7GJ9TilhtXwgdv2yN8P%2Fab434a178a1035b271e006f66d00ae3f%2Fdockerwindows09.png&w=3840&q=75)
You have cloned the repository from the Visual Studio screen, and you can see that the destination is now on the Ubuntu side.
![dockerwindows10.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2FCqxutv0pm9Ry9poF5fDn6%2Fff6297376deec0b009bee1ba348ab782%2Fdockerwindows10.png&w=3840&q=75)
I actually ran docker compose build and the image was successfully built.
![dockerwindows11.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F44U2OkXV7NtbLzEFB0bNLp%2F65461c35223c76698f4599ff05473461%2Fdockerwindows11.png&w=3840&q=75)
Install the latest version of Node
In future blog posts, it will basically be typescript applications that will be run on Linux. For this reason, we would like to install Node.js, and since the version of node that can be easily installed on Ubuntu is 12, which is very old, we will use nvm (node version manager) to do the installation.
Execute the following command to install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
Once the installation is complete and nvm commands are enabled, run the following commands to install the LTS version.
nvm install --lts
At the time of this writing, 18.18.1 has been installed.
![dockerwindows12.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4CXi6bmpaEtB5EAP137V2S%2F782575c18b0f52540ff1dbd94c5711c9%2Fdockerwindows12.png&w=3840&q=75)
Summary
This time, we combined the Windows and WSL environments to prepare an environment that allows development on the Linux side. This enabled us to use Visual Studio Code on Windows, which we are familiar with, while preparing a development environment on Linux.