Remote - Containers 를 사용한 Visual Studio Code 원격 개발 feat.Dockerfile

[DataUs] Front-End 개발자를 위한 원격 개발. feat. vscode & Remote-Containers & Dockerfile

Pay trudYou using PayPal.MePayPal.Me

donation

2022년 NHN Cloud 무료 교육일정 : https://doc.skill.or.kr/2022-NHN-Cloud-Education

2022년 NHN Cloud 행사/프로모션 정보 공유 : https://doc.skill.or.kr/2022-NHN-Cloud-Event-Promotion

1. 먼저 알아 두기

1.1 vscode 가 무엇인가?

마이크로소프트에서 개발한 텍스트 에디터로, 2015년 4월 29일에 소개되고 2016년 4월 15일에 1.0.0 정식판이 발표되었다. Electron 프레임워크를 기반으로 만들었다. MS의 개발 툴 중 최초로 크로스 플랫폼을 지원하는 에디터이며 윈도우, macOS, 리눅스를 모두 지원한다. GitHub에서 배포되는 소스 코드는 MIT 라이선스하에 배포되는 오픈 소스지만, 실제로 공식 사이트에서 배포되는 릴리즈 바이너리는 마이크로소프트의 독자적 라이선스(EULA의 일종)하에 배포되는 것으로 오픈 소스가 아니다. 대부분 사용자들은 릴리즈 바이너리를 설치하므로 마이크로소프트의 독자적 라이선스 하에 VS Code를 사용하고 있다.

참고 : Visual Studio Code 나무위키

1.2 Visual Studio Code Remote - Containers 란 무엇인가?

Visual Studio Code 에서 Docker 컨테이너를 기반으로 개발 환경을 가져오고 만들고 구성합니다.

1.3 'Front-End' , 'Back-End' 란 무엇인가?

1.3.1 'Front-End' 란 무엇인가?

'Front-End' 는 컴퓨터와 사용자 사이의 인터페이스 (I/F) 부분을 말한다. '앞단', '뷰단'(view端) 또는 '사용자단' 이라고 부른다. 웹사이트의 디자인, 메뉴, 폰트, HTML, CSS, 자바스크립트 등이 있다.

참고 : Front-End 해쉬넷

1.3.2 'Back-End'란 무엇인가?

'Back-End' 는 컴퓨터와 응용 프로그램 또는 컴퓨터와 데이터베이스 사이의 인터페이스 (I/F) 부분을말한다. '뒷단' 또는 '백단'(back端) 이라고 부른다. 응용 프로그램, DBMS, 운영체제, 웹서버, WAS 드아이 있다.

참고 : Back-End 해쉬넷

1.4 dockerfile 이란 무엇인가?

DockerFile 은 코드의 형태로 인프라를 구성하는 방법을 텍스트 형식으로 저장해 놓은 파일이며 docker build 를 사용하여 자신만의 이미지를 만들 수 있다.

2. Visual Studio Code 의 Remote - Containers 를 사용하는 이유

언제, 어디서든, 개발 환경 및 구성을 동일하게 하기 위해 이 문서를 작성하게 되었습니다.

간단한 설정 방법과 쉽게 따라 할 수 있도록 구성 하였습니다.

3. Visual Studio Code 다운로드 및 설치

3.1 Visual Studio Code 다운로드 및 설치

Visual Studio Code 사이트에 접속하면 Windows/Linux/Mac 등 설치 파일이 있습니다.

다운로드 : https://code.visualstudio.com/download

그림. Visual Studio Code Web Site

4. DockerFile 설정

4.1 DockerFile 설정 파일 알아보자

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/javascript-node/.devcontainer/base.Dockerfile

# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

# 시간 및 날짜 설정
ENV TZ Asia/Seoul

RUN apt-get update && apt-get install -y locales
# 한국어 설정   
RUN locale-gen ko_KR.UTF-8
RUN export LC_ALL=ko_KR.UTF-8

# 테마 적용
RUN sed -i 's/codespaces/agnoster/' /home/node/.zshrc
RUN sed -i'' -r -e "/prompt_hg/a\  prompt_newline" /home/node/.oh-my-zsh/themes/agnoster.zsh-theme

# [Optional] Uncomment if you want to install an additional version of node using nvm
ARG EXTRA_NODE_VERSION=16.14.0
RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

# [Optional] Uncomment if you want to install more global node modules
RUN su node -c "npm install -g yarn @vue/cli parcel-bundler"

1KB

Dockerfile

Open

DockerFile 파일

5. Visual Studio Code 의 devcontainer.json 알아보자

Dockerfile 을 실행 하면서 devcontainer.json 에서 extensions, features 대한 설정 값을 지정 할 수 있습니다.

• extensions 목록

  • eslint

  • gitlens

  • jest

  • 한국어팩

  • liveserver

  • postcss

  • python

  • tailwindcss

  • rainbow-csv

• features 목록

  • git

  • sshd

  • homebrew

  • python

  • java

참고 https://code.visualstudio.com/docs/remote/devcontainerjson-reference

devcontainer.json

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/javascript-node
{
  "name": "DataUs Frontend",
  "build": {
    "dockerfile": "Dockerfile",
    // Update 'VARIANT' to pick a Node version: 16, 14, 12.
    // Append -bullseye or -buster to pin to an OS version.
    // Use -bullseye variants on local arm64/Apple Silicon.
    "args": { "VARIANT": "16-bullseye" }
  },

  // Set *default* container specific settings.json values on container create.
  "settings": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "eslint.workingDirectories": [{ "mode": "auto" }],
    "eslint.validate": ["javascript", "typescript"]
  },

  // Add the IDs of extensions you want installed when the container is created.
  "extensions": [
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens-insiders",
    "octref.vetur",
    "Orta.vscode-jest",
    "MS-CEINTL.vscode-language-pack-ko",
    "ritwickdey.LiveServer",
    "csstools.postcss",
    "ms-python.python",
    "bradlc.vscode-tailwindcss",
    "mechatroner.rainbow-csv"
  ],

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": [4231],

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",

  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
  "remoteUser": "node",
  "features": {
    "git": "latest",
    "sshd": "latest",
    "homebrew": "latest",
    "python": "latest",
    "java": "lts"
  }
}

2KB

devcontainer.json

Open

devcontainer.json 파일

6. Visual Studio Code 를 이용하여 Remote - Containers 를 실행 하자

6.1 폴더 구성

File	설명
Dockerfile	도커파일
devcontainer.json	VSCode 설정 파일 (extensions, features)

2KB

vscode-remote-containers.zip

archive

Open

설정 zip 파일

6.2 VSCode 에서 Remote - Containers 실행 하기

6.2.1 VSCode 실행 및 설정

그림. Visual Studio Code 실행 화면

그림. 파일>폴더열기> vscode-server1 Folder 선택

위의 그림에서 폴더는 Remote - Containers 를 사용한 Visual Studio Code 원격 개발 feat.Dockerfile에서 다운로드(vscode-remote-containers.zip) 받아서 압축을 해제

아래의 그림 처럼 실행.

그림. 왼쪽 아래(원격 창 열기) 클릭 후 'Open Folder in Container...' 를 선택 하여 실행

그림. 원격 열기가 실행 되며 Dockerfile 과 devcontainer.json 의 설정 값을 실행 함

그림. Remote - Containers 로 실행 된 화면

이 환경 설정 값을 통해 Remote - Containers 를 사용하게 되면 동일한 개발 환경을 제공하게 됩니다.

자세한 Remote - Containers 를 사용한 Visual Studio Code 원격 개발 feat.Dockerfile 에서 extensions, features 에 지정한 것들을 사용 할 수 있으며 필요한 프로그램이 있다면 등록하여 사용 하시기 바랍니다.

7. Github Sample Code 로 테스트 해 보자

7.1 Git Clone 또는 압축 파일 다운로드 하기

먼저 Remote - Containers 를 사용한 Visual Studio Code 원격 개발 feat.Dockerfile 를 통해서 연결 한 후에 아래의 Git 주소로 Clone 또는 압축 파일 다운로드를 workspace 에 풀어서 실행

git clone https://github.com/dalcon10028/vue3-tailwindcss-template.git semi-project

165KB

vue3-tailwindcss-template-master.zip

archive

Open

압축 파일

그림. Git 주소(https://github.com/dalcon10028/vue3-tailwindcss-template)

7.2 Github Sample Code 를 VSCode 실행 하기

Git 또는 압축 파일을 다운로드 받아서 압축 해제 후 Remote - Containers 를 사용한 Visual Studio Code 원격 개발 feat.Dockerfile

아래의 Sample Code 는 Yarn 으로 실행 하기 위해 devcontainer.json 파일을 아래와 같이 수정 하여야 함.

** git clone 또는 다운로드 받은 파일은 수정 할 필요가 없음.

devcontainer.json

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/javascript-node
{
  "name": "DataUs Frontend",
  "build": {
    "dockerfile": "Dockerfile",
    "args": { "VARIANT": "16-bullseye" }
  },

  "settings": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "eslint.workingDirectories": [{ "mode": "auto" }],
    "eslint.validate": ["javascript", "typescript"],
    "terminal.integrated.defaultProfile.linux": "/bin/zsh"
  },

  "extensions": [
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens-insiders",
    "octref.vetur",
    "Orta.vscode-jest",
    "MS-CEINTL.vscode-language-pack-ko",
    "ritwickdey.LiveServer",
    "csstools.postcss",
    "ms-python.python",
    "bradlc.vscode-tailwindcss",
    "mechatroner.rainbow-csv"
  ],

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": [3000, 8080, 80, 443],

  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "yarn install",   ### yarn install 

  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
  "remoteUser": "root",     ### 사용자를 node -> root  
  "features": {
    "git": "latest",
    "sshd": "latest",
    "homebrew": "latest",
    "python": "latest",
    "java": "lts"
  }
}

1KB

devcontainer.json

Open

변경된 사용자 및 yarn install devcontainer.json

그림. VSCode 의 Remote-Containers 로 연결하기

그림. Remote-Containers 에 연결 중

Visual Studio Code 에 Remote-Containers 로 연결 완료 된 후 터미널 -> yarn serve실행

그림. yarn serve 실행

그림. localhost:8080 실행 완료

2022년 NHN Cloud 무료 교육일정 : https://doc.skill.or.kr/2022-NHN-Cloud-Education

2022년 NHN Cloud 행사/프로모션 정보 공유 : https://doc.skill.or.kr/2022-NHN-Cloud-Event-Promotion

Pay trudYou using PayPal.MePayPal.Me

donation