본고는 최초로 2020년 10월 13일에 나의 블로그https://blog.mandraketech.in/vscode-devcontainers에 발표되었다.
NodeJS와 ExpressJS를 사용하기 시작했을 때, 교육과 블로그에서 본 것은 NodeJS를 설치할 때의 설명입니다.자질구레하지만 기업 응용 프로그램 개발 분야에서 기업 응용 프로그램 개발 분야에서 고객에게 배치하고 정확한 환경을 다시 만들 수 있는 것이 중요하다. 이 작업 흐름에 Docker의 응용 프로그램이 있는지 알고 싶다.
Docker와 Docker Compose를 탐색할 때 NodeJS와 Express를 사용하는 설명이 있으면 시작점이 더 쉬워질 것입니다.그러나, 내가 계속 탐색할 때, 나는 내가 VS 코드를 설정하는 방법을 안내할 수 있는 어떤 방법도 찾지 못했다. VS 코드는 내가 선택한 편집기로서 나의 응용 프로그램을 개발하는 데 사용되고, 동시에 단점을 사용한다. 마치 내가 나의 기계에서 로컬로 개발한 응용 프로그램과 같다.
이것이 바로 어떤 것이 작용하고 다른 사람이 쉽게 사용할 수 있도록 하는 사냥이 시작되는 곳이다.여러 가지 선택을 탐색한 후에 나는 업무 흐름을 확대했다. 이것은 나로 하여금 곧 시작하게 할 것이다.생활 속의 모든 것처럼, 일을 좀 해야 한다.그럼 시작합시다.
다음은 저희가 이 블로그에서 할 일입니다.

Express 어플리케이션 만들기

Docker 및 Docker Compose 환경 만들기

VS 코드

에서 실행 및 디버깅
추가 읽기 전제 조건은 다음과 같습니다.

데스크톱 Docker 설치됨https://www.docker.com/products/docker-desktop

Visual Studio 코드가 설치되어 있음

NodeJS가 설치되어 있습니다. (네! 알고 있습니다. 단지 응용 프로그램을 만들기 위해 더 이상 없습니다.)

인터넷 연결

이 글에서, 나는 Docker에 대해 아무런 이해가 없다고 가정하고, 이 절차들이 어떻게 작동하는지 설명하는 모든 시도를 건너뛸 것이다.이 점에 대한 상세한 정보는 후속 내용으로 삼을 것이다. 왜냐하면 이것은 본고의 의도에서 초점을 벗어날 수 있기 때문이다.
이 단계의 마지막에는 Express 템플릿, Dockerised 및 디버깅 응용 프로그램에 사용할 VS 코드 환경이 생성됩니다.
나는 이 응용 프로그램의 생산에서 Docker를 사용하는 것을 상세하게 소개하지 않고 개발만 했다.
Github 지원 코드 및 후속 제출 내역 제공

ExpressJS 애플리케이션 생성

Docker의 장점은 로컬에 도구를 설치할 필요가 없다는 것입니다.풍자적인 것은 내가 곧 프레젠테이션을 하는 과정에서 첫 번째 단계는 NodeJ를 설치해야 한다는 것이다.하지만 이번이 처음이야.그 이후로 너는 영원히 그것을 필요로 하지 않는다.
Express 응용 프로그램을 생성하려면 다음 명령을 실행합니다.

npx express-generator 

다음과 같은 출력이 표시됩니다.

너는 어떤 일도 할 필요가 없다npm install.이것이 바로 왜 네가 풍자해야 하는가

로컬 Git 리셋 생성

최선의 실천으로서, 이 점까지 굴러갈 필요가 없도록 로컬git 저장소를 초기화하는 것을 권장합니다.다음 단계는 다음과 같습니다.

git init .
git add .
git commit -m "new express app (generated)"

VS 코드 구성

다음 명령을 실행하여 선택한 디렉토리에서 VS 코드를 시작합니다.code .VS 코드의 Extensions 탭으로 전환하고 다음 확장이 설치되어 있는지 확인합니다(Microsoft에서 발표).

Docker(ms-azuretools.vscode-Docker)

원격 컨테이너(ms-vscode-Remote.Remote-Containers)

VS 코드 환경에서는 최소한 이 소프트웨어를 설치해야 합니다. 실제로 우리가 오늘 한 작업 후에 당신은 여기에 어떤 소프트웨어도 설치할 필요가 없습니다.우리가 진보함에 따라 너는 원인을 발견할 수 있을 것이다.

VS 코드 확장으로 마력 발휘

Cmd+Shift+P(Windows의 Ctrl+Shift+P)를 사용하거나 보기 메뉴

에서 VS 코드의 명령 팔레트를 시작합니다.

작업공간에 Docker: Docker 파일 추가라는 작업을 호출합니다

다음 프롬프트는 기본값을 사용합니다.
- 애플리케이션 플랫폼: Node JS
- 애플리케이션 스누핑 포트: 3000
- Docker Compose 파일(옵션) 포함: 예

VSCode에 있는git 탭은 6개의 파일을 만들어서 git에 추가할 수 있음을 알려 줍니다.

여기로 다시 굴러갈 필요가 없도록 파일을 다시 제출합니다.따라서 VS 코드를 사용하여 파일을 추가하고 주석을 사용하여 생성된 Docker 파일 추가 제출

원격 컨테이너 시작

보시다시피 우리는 아직 마법 명령을 실행하지 않았습니다npm install근데 조금만 더 버텨.
파일을 편집하기 전에 마지막 파일을 생성합니다.따라서'명령 팔레트'로 돌아가서'원격 용기: 개발 용기 프로필 추가'명령을 실행합니다.
다음 프롬프트의 경우How would you like to create your container configuration?다음 값을 사용합니다.From docker-compose.debug.yml
용기에서 개발하기 위해 다시 열라는 알림을 볼 수 있지만, 아직 없습니다.수동 절차가 좀 필요합니다.
그러나 우리가 시작하기 전에git에 파일을 추가하고 "addgenerated devcontainer config"주석을 첨부합니다

정리하다

첫 번째 단계는 디렉터리와 내용을 삭제하는 것이다.이러한 파일은 Docker 확장자를 통해 생성됩니다.우리는 그들을 필요로 하지 않는다. 우리는 우리의 임무에 전념하기를 바란다.만약 당신이 그것들을 필요로 한다면, 그것들은git 역사에 나타날 것이다.
삭제하고 커밋합니다.

Dev Dockerfile 업데이트

다음 절차를 따르십시오.

생성.vscode된 사본 및 이름Dockerfile

편집Dockerfile.debug 및 다음을 수행합니다.
- 첫 번째 행에서 제거Dockerfile.debug.우리는 완전한 디버깅 환경이 필요하다
- 회선 변경

-alpine... 에 이르다RUN npm install --production --silent && mv node_modules ../파일은 다음과 같습니다.

FROM node:12.18
ENV NODE_ENV production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

RUN npm install 명령에서 Node 버전을 변경하고 FROM 에서도 일관성을 유지하도록 할 수 있습니다.
다시 한 번, 이 글에서 이 응용 프로그램의 생산과 사용에 들어가지 마세요.

node_모듈 덮어쓰지 않기

용기에서 사용Dockerfile 배후의 생각은 이 환경에서 정확한 모듈 바이너리 파일을 사용할 수 있도록 하는 것이다.우리는 그곳에서 당신의 로컬 기계를 위해 node_모듈을 사용하고 싶지 않습니다.따라서 파일을 업데이트해야 합니다 npm install.
나는 여기에 온전한 줄을 붙였다.docker-compose.debug.yml 부분을 변경했고 build 를 추가했습니다.git는 변경된 줄을 표시합니다.YAML 파일은 들여쓰기에 민감하기 때문에 왜 작동하지 않는지 찾아내는 데 몇 시간이 걸리지 않습니다.

version: '3.4'

services:
  sample:
    image: sample
    build:
      context: .
      dockerfile: Dockerfile.debug
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
      - 9229:9229
    volumes: 
      - /usr/src/app/node_modules  
    command: ["node", "--inspect=0.0.0.0:9229", "./bin/www"]

VS 코드가 올바른 위치에 있는지 확인합니다.

보시다시피, 우리가 이미 처리한 파일 중, 특히 volumes 과 Dockerfile.debug 에는 용기에 있는 원본의 위치를 가리키는 특정한 인용이 있습니다.( docker-compose.debug.yml ). 따라서 VS Code가 작업 위치로 인식되도록 해야 합니다.우리 이렇게 합시다.

열기/usr/src/app 파일

찾기.devcontainer/devcontainer.json 및 값workspaceFolder에서 /workspace로 변경

또한 로컬 소스가 설치될 위치를 업데이트해야 합니다.

열기/usr/src/app 파일

찾기.devcontainer/docker-compose.yml 섹션

그곳의 평론은 명확하게 다음과 같이 지적했다. volumes

따라서 Update this to wherever you want VS Code to mount the folder of your project 을(를) /workspace 로 변경합니다.

다음은 파일 변경입니다.

예전과 같이git에 힘쓰다.

그리고 하나 더...

아니오, 그런 신기한 말은 할 줄 몰라요.우리 끝났어.VS 코드 창의 왼쪽 아래 모서리에 있는 녹색 아이콘을 클릭하거나 명령 팔레트 및 컨테이너에서 다시 열 수 있습니다.
관심 있는 경우 배포 중에 표시되는 메시지의 적절한 링크를 클릭하면 VS 코드가 로그를 표시하는 데 도움이 됩니다.
너는 지금 출발할 준비가 되어 있다.
네, 그리고 하나 더 있어요./usr/src/app를 변경한 경우 업데이트package.json가 필요하고 일부 이유로 도움이 되지 않으면 node_modules 를 열고 용기에서 다시 열기 를 실행할 수 있습니다.

디테일

VS 코드에 사용하고 싶은 확장자가 있다면, 이 확장자를 Command Palette 파일의'extensions'속성에 추가할 수 있습니다.
네가 알고 있는 바와 같이, 너는 소포를 열 수 있다.json, 적절한 위치에서 프로그램을 디버깅할 수 있도록'디버깅'알림을 보십시오.
즐겁게 놀다
작성자 정보:
Navneet Karnani는 경험이 풍부한 Ployglot의 베테랑이다. 그는 기술을 탐색하여 위대한 제품을 구축하고 그가 사용하는 도구에서 더욱 높은 생산력을 얻으려고 노력한다.