소개

타이틀대로, VSCode로 할 수 있는 것은 최대한 VSCode로 해 나갈 방침
눈치채는 점이라면 침묵 갱신할지도

환경

Windows 10 Pro

OS X나 Linux에서도 별로 문제 없다고 생각합니다.

설치

Visual Studio Code

확장 기능도 설치합니다.

Docker (식별자 : ms-azuretools.vscode-docker)

Remote - Containers (식별자 : ms-vscode-remote.remote-containers)

Docker for Windows

OS에 맞춘 Docker로 도우조

Docker 이미지 만들기

파일 준비

Dockerfile을 만듭니다.

Dockerfile

FROM node:lts-alpine

WORKDIR /usr/src/app
COPY vue.config.js .

RUN npm install -g npm @vue/cli

EXPOSE 8080

CMD ["/bin/sh"]

개발 서버의 부팅 포트를 고정하기 위해 vue.config.js도 만듭니다.

vue.config.js

module.exports = {
  devServer: {
    port: 8080,
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};

작성한 Dockerfile과 vue.config.js는 같은 폴더에 둡니다.

Docker 이미지 만들기

PowerShell 등으로 명령을 실행합니다.

> cd 'Dockerfile等を配置したフォルダ'
> docker build -t vuejs_dev .

vuejs_dev : Docker 이미지 이름

올바르게 작성되면 VSCode의 Docker IMAGE에 컨테이너 (node,vuejs_dev)가 추가됩니다.

Docker 컨테이너 만들기 (및 시작)

PowerShell 등으로 명령을 실행합니다.

> docker run -it -d -p 8081:8080 --name vuejs_dev_test0001 vuejs_dev

vuejs_dev : Docker 이미지 이름
vuejs_dev_test0001 : Docker 컨테이너 이름

올바르게 작성되면 VSCode Docker의 CONTAINERS에 컨테이너 (vuejs_dev_test0001)가 추가됩니다.

VSCode로 원격 연결

VSCode Docker의 CONTAINERS 이미지 (vuejs_dev_test0001)의 컨텍스트 메뉴에서
Attach Visual Studio Code를 선택합니다.



VSCode의 원격 탐색기에서 열 수도 있습니다.



원격 연결이 성공하면 왼쪽 하단에 표시됩니다.



VSCode 탐색기에서 폴더 열기를 선택합니다.



컨테이너의 경로를 선택합니다.



올바른 경로를 지정하면 파일이 표시됩니다.

Vue.js 프로젝트 만들기

원격으로 연결된 VSCode의 터미널에서 명령을 실행합니다.

/usr/src/app # vue create .

선택 사항은 선택 사항이지만 이번에는 패키지 관리자가 NPM을 선택합니다.

프로젝트를 만들 때 추가된 파일도 VSCode 탐색기에서 확인할 수 있습니다.

구현

좋아하는 도우조

실행 확인

원격으로 연결된 VSCode의 터미널에서 명령을 실행합니다.

/usr/src/app # npm run serve

브라우저에서 127.0.0.1:8081에 액세스하여 실행 중인지 확인했습니다.

기타

컨테이너 정지

VSCode Docker의 CONTAINERS 이미지 (vuejs_dev_test0001)의 컨텍스트 메뉴에서
Stop을 선택합니다.



컨테이너가 중지됩니다.

컨테이너 시작 (이미 컨테이너가있는 경우)

VSCode Docker CONTAINERS 컨테이너 (vuejs_dev_test0001)의 컨텍스트 메뉴에서
시작을 선택합니다.



컨테이너가 시작됩니다.

감상

생각보다 VSCode의 확장 기능이 제대로 하고 있었다.
Remote - Containers는 프리뷰판(2020/4/24 현재)이었으므로, 빨리 정식 릴리스 해 주었으면 한다.