Version differences are common.
And above all, installation is troublesome. And node and maven are steadily squeezing the local environment.
And the problem of environmental difference between Mac and Windows that occurs.
Ultimately, a different version will be used due to an env setting error.
devcontainer is a technology for building a development environment on Docker and performing all development there.
It's also the core technology when using GitHub codespaces (Visual Studio codespaces).
To put it simply, we will create a virtual machine for development inside, so
It is a little unsuitable for developing GUI apps such as Window App and mobile, but This is basically enough for the Web system.
So if you want to run something like node, Ruby, Python with VS Code, you can do it with devcontainer.
This time, it is assumed to use nodejs + Express + mongodb as an example. However, I will only set up mongo and will not actually access it.
Create a directory called .devcontainer and store information about devcontainer.json and docker container in it.
Root Directory
├ .devcontainer
│ ├ devcontainer.json
│ ├ docker-compose.yml
│ └ Dockerfile
└ Each source
Contains information about the container and the VS Code that runs there.
json:.devcontainer/devcontainer.json
{
//Container name
"name": "Express Sample",
// docker-compose filename
"dockerComposeFile": "docker-compose.yml",
//The root directory of the project attached to the container
"workspaceFolder": "/work",
// docker-If compose is multiple containers
//Specify which container to enter
"service": "app",
//Port to connect from the outside(Open port)Specify
"appPort": 3000,
//Set extensions to install
"extensions": [
"VisualStudioExptTeam.vscodeintellicode",
"dbaeumer.vscode-eslint",
"stevencl.addDocComments",
"eg2.tslint"
]
}
The extensions listed here will be installed in a different area than VS Code on the host.
Therefore, even if you switch to a different language / platform, you can avoid the VS Code becoming crappy.
Create a Dockerfile and docker-compose.yml. Regardless of the dev container, it is possible to use the one used for development as it is.
.devcontainer/Dockerfile
FROM node:15.2.0-alpine3.10
EXPOSE 3000
:.devcontainer/docker-compose.yml
version: '3'
services:
app:
build: .
ports:
- 3000:3000
volumes:
- ../:/work
tty: true
db:
image: mongo:3.6.20-xenial
#Normally, a port and volume attach are required.
Does it reopen when the screen is reloaded? Is asked, so select "Reopen in Container"
After that, the screen will be reloaded, and you can expand the image and generate the container. VSCode related installations will also run, so be patient.
After booting successfully, make sure the node is running.
At this point, VS Code's terminal points to the docker container's terminal, so Basically, please use this terminal in VS Code.
npm init and create package.json.
# npm init -y
# nom install -S express
Next, write the following code.
index.js
'use strict'
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.get('/', (req, resp) => {
resp.send('Hello, JS WORLD!');
})
app.listen(port, () =>{
console.log(`Example app listening on Port ${port}`);
});
I will try it.
# node index.js
node index.js
Example app listening on Port 3000
Let's connect from the host in this state.
If it is displayed well, it is complete.
After that, you can proceed with development in the same way as normal VS Code.
Even if you deploy it to other developers, you can easily build it as long as you create a dev container.
All you need is VS Code and an extension for remote development.
This time I did it with node.js, but the basic usage is the same for Python, Ruby, and Java.
Basically, if you pay attention only to the following two points, you will not be in trouble.
--Container base image --Extensions to install
Since the environment and version can be separated for each container, It is safer to solve version problems than using xEnv.
Also, if you are using Docker as your development environment, you only need to write a simple json.
If you are using VS Code, why not use devcontainer to simplify your environment construction?
Recommended Posts