Remote - Containers 를 사용한 Visual Studio Code 원격 개발 feat.Dockerfile
[DataUs] Front-End 개발자를 위한 원격 개발. feat. vscode & Remote-Containers & Dockerfile
Last updated
Was this helpful?
2022년 NHN Cloud 무료 교육일정 :
2022년 NHN Cloud 행사/프로모션 정보 공유 :
1. 먼저 알아 두기
1.1 vscode 가 무엇인가?
마이크로소프트에서 개발한 텍스트 에디터로, 2015년 4월 29일에 소개되고 2016년 4월 15일에 1.0.0 정식판이 발표되었다. Electron 프레임워크를 기반으로 만들었다. MS의 개발 툴 중 최초로 크로스 플랫폼을 지원하는 에디터이며 윈도우, macOS, 리눅스를 모두 지원한다. GitHub에서 배포되는 소스 코드는 MIT 라이선스하에 배포되는 오픈 소스지만, 실제로 공식 사이트에서 배포되는 릴리즈 바이너리는 마이크로소프트의 독자적 라이선스(EULA의 일종)하에 배포되는 것으로 오픈 소스가 아니다. 대부분 사용자들은 릴리즈 바이너리를 설치하므로 마이크로소프트의 독자적 라이선스 하에 VS 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, 자바스크립트 등이 있다.
1.3.2 'Back-End'란 무엇인가?
'Back-End' 는 컴퓨터와 응용 프로그램 또는 컴퓨터와 데이터베이스 사이의 인터페이스 (I/F) 부분을말한다. '뒷단' 또는 '백단'(back端) 이라고 부른다. 응용 프로그램, DBMS, 운영체제, 웹서버, WAS 드아이 있다.
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 등 설치 파일이 있습니다.
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"
5. Visual Studio Code 의 devcontainer.json 알아보자
Dockerfile 을 실행 하면서 devcontainer.json 에서 extensions, features 대한 설정 값을 지정 할 수 있습니다.
extensions 목록
features 목록
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"
}
}
6. Visual Studio Code 를 이용하여 Remote - Containers 를 실행 하자
6.1 폴더 구성
File
설명
Dockerfile
도커파일
devcontainer.json
VSCode 설정 파일 (extensions, features)
6.2 VSCode 에서 Remote - Containers 실행 하기
6.2.1 VSCode 실행 및 설정
위의 그림에서 폴더는 #5.1에서 다운로드(vscode-remote-containers.zip) 받아서 압축을 해제
아래의 그림 처럼 실행.
이 환경 설정 값을 통해 Remote - Containers 를 사용하게 되면 동일한 개발 환경을 제공하게 됩니다.
