VS Code용 간단한 웹 서버 개발 컨테이너를 설정하는 방법

때로는 로컬 환경에 도구 체인을 설정하거나 웹 서버 소프트웨어(및 종속성)를 설치할 필요 없이 신속한 프로토타이핑 또는 정적 웹 페이지 구축을 위해 디렉토리 내용을 자동으로 제공하는 경량 개발 컨테이너가 있으면 좋습니다. 로컬 머신.

컨테이너 내부 개발을 위해 VS Code의 확장을 사용하는 경우 다음은 다음 세 가지 주요 속성을 포함하는 편안한 개발 설정을 위한 레시피입니다.

경량; 작은 이미지 풋프린트 및 최소 컨테이너 부팅 시간

자동; 컨테이너가 시작되면 다른 명령을 실행할 필요 없이 파일이 로컬 포트에서 제공됩니다

.

완료; 전체 개발 수명 주기에 대해 VS Code에 필요한 모든 종속성이 있습니다

.

이를 달성하기 위해 Alpine Linux 운영 체제를 개발 웹 서버로 사용합니다.

엔진엑스 1단계: Dockerfile에서 개발 컨테이너 정의

과 개발에 필요한 특정 도구를 포함합니다.
.devcontainer/Dockerfile :

# We'll base our dev container image on Alpine Linux.
FROM alpine:3.15

# Then we'll add the dependencies we need:
# - musl, libgcc, and libstdc++ are required by VS Code's server
# - git and gnupg are useful for remote development so that we
# can commit and sign commits from within the container
# - and of course nginx itself
RUN apk add \
  musl \
  libgcc \
  libstdc++ \
  git \
  gnupg \
  nginx

# Finally, we'll remove nginx's default content and replace it
# with a symlink to our source code.

RUN rm -rf /usr/share/nginx/html
RUN ln -s /workspaces/my-app /usr/share/nginx/html

주의

VS Code가 컨테이너 내부에 소스 코드를 마운트하는 디렉토리로 /workspaces/my-app를 바꾸고 싶을 것입니다.

VS Code의 원격 컨테이너 확장에 필요한 종속성 2단계: 이미지를 활용하도록 VS Code 구성

이미지 정의가 완료되면 VS Code에 실행하도록 지시하는 몇 가지 구성을 추가합니다.
.devcontainer/devcontainer.json :

{
  "name": "my-app",
  // Tell VS Code to build our dev container from our Dockerfile.
  "build": {
    "dockerfile": "./Dockerfile"
  },
  // Automatically expose port 8080 (mapped to container's port 80, nginx's default) for development
  "appPort": "8080:80",
  // Make sure our nginx container's default command runs, which starts up the web server in the background.
  "overrideCommand": false
}

3단계: 이익

이러한 파일이 있으면 VS Code는 내부에 탑재된 소스 코드로 개발 컨테이너를 가동하는 데 필요한 모든 것을 갖추고 있습니다. 일단 실행되면 포트8080에서 브라우저에서 프로젝트 파일을 로드할 수 있습니다(또는 VS Code의 내장 개발 브라우저를 사용해 보세요).



즐거운 프로토타이핑!