NHN Cloud
  • [NHN Cloud] NHN Cloud 교육 정보 공유
  • [NHN Recruitings] NHN 채용/취업/공고 사이트
  • [Naver Cloud Recruitings] nCloud 채용/취업/공고 사이트
  • [NHN Cloud] 행사/프로모션 정보 공유
  • [NHN Cloud] NHN Kubernetes Service(NKS) 활용법
  • [NHN Cloud] NHN Kubernetes Service(NKS) 관리용 OpenSource 설치 방법
  • TIPs. [NHN Cloud] NHN Kubernetes Service(NKS) 의 LoadBalancer 사용법
  • [NHN Cloud] NHN Kubernetes Service(NKS) 를 이용한 커뮤니티 블로그 구축 사례
  • [NHN Cloud] YouTube 사용자 가이드
  • [NHN Cloud] Dooray 사용자 가이드
  • NHN, AWS, Tencent, KT Cloud Calculator
  • [취업정보] 2022's Cloud Job Infomations
  • [NHN Cloud] 공식 블로그
  • [NHN Cloud] 공식 페이스북
  • [NHN Cloud] 공식 Youtube
  • [DataUs][NHN Cloud] 클라우드 입문자를 위한 보안 가이드
  • [KISA] 클라우드 취약점 점검 가이드
  • [KISA] 주요정보통신기반시설 기술적 취약점 분석ㆍ평가 방법 상세가이드
  • [KISA] NAS 보안 가이드라인
  • AI-NAS 오류코드 분석기
  • Docker 관리 UI Manager Tool
  • 빠른 개발을 위한 docker 활용법(5분 완성)
  • 시스템 별 도커(docker) 설치 방법
  • Docker Windows 컨테이너 실행 가이드
  • Lean Startup 을 위한 docker 사용법
  • Remote - Containers 를 사용한 Visual Studio Code 원격 개발 feat.Dockerfile
  • DockerFile 을 이용하여 나만의 Docker Image 만들기
  • DockerFile 을 이용하여 나만의 Docker Image [Tomcat+Jenkins] 만들기
  • Docker-Compose 를 이용하여 Yona 사용하기
  • Docker-Compse 를 이용하여 Rocket.Chat 사용하기
  • [DataUs] Open Data Quality - 공공데이터 품질 개선 도구 to GitHub
  • 베라크립트(VeraCrypt) 을 이용하여 암호화된 가상 디스크 만들기
  • 가비아 Apache SSL 보안인증서 to Tomcat SSL 보안인증서로 변경
  • NHN Cloud Guide Document
    • [NHN Cloud] 콘솔 보안 가이드
    • [NHN Cloud] 랜섬웨어 대응 가이드
    • [NHN Cloud] 컨테이너 보안 가이드
    • [NHN Cloud] 네트워크 보안 아키텍처
    • [NHN Cloud] 개인정보보호법 준수를 위한 개인정보 보호 조치
    • [NHN Cloud] 클라우드 보안 백서 신청 하기
  • Ransomware_Decryption_Tools
    • [KISA] 랜섬웨어 대응 가이드라인('23년 개정본)
    • [NoMoreRANSOM] 랜섬웨어 복구 프로그램 및 지원 사이트
    • [KISA] 랜섬웨어 복구도구 모음
  • 외부 링크
    • [외부 링크] 자료 모음 공유
    • [과학기술정보통신부][요약본] SW 공급망 보안 가이드라인
    • [KISA] 인터넷 브라우저를 더 안전하게!
    • 카카오엔터테인먼트 불법유통대응 3차백서
    • [KISA Insight 2023 Vol.03] ChatGPT(챗GPT) 보안 위협과 시사점
    • [이글루코퍼레이션/코스닥협회] Beginner를 위한 램섬웨어 예방 및 대응 가이드
    • [행정안전부·한국인터넷진흥원] 모바일 대민서비스 보안취약 점 점검 가이드
    • [SK쉴더스][보안 가이드] 2023 클라우드 보안 가이드 - AWS
    • [SK쉴더스][보안 가이드] 2023 클라우드 보안 가이드 - Azure
    • [SK쉴더스][보안 가이드] 2023 클라우드 보안 가이드 - GCP
    • [Microsoft-Ssecurity] 하이브리드 업무 환경을 위한 마이크로소프트의 보안 전략
    • [Microsoft-Ssecurity] 보안 담당자가 꼭 알아야 할 마이크로소프트 Zero Trust 전략편
    • [KISA] ISMS-P 인증기준 안내서(2023.11.23) [PDF]
    • [KISA] ISMS-P 인증기준 안내서 [PDF]
    • [KISA] ISMS-P 세부점검항목 공지(22.04.22) [xlsx]
    • [KISA] ISMS-P_인증제도_안내서(2021.7) [PDF]
    • [KISA] 정보보호_관리체계(ISMS)_인증제도_안내서(2017.04) [PDF]
    • [KISA] PIMS 인증제도 안내서(1권) - 제도운영편 [PDF]
    • [KISA] PIMS 인증제도 안내서(2권) - 인증기준편 [PDF]
    • [KISA] PIMS_인증기준_세부점검항목(2016.11.09) [xlsx]
    • [KT Cloud] KT Cloud 보안가이드
    • [과학기술정보통신부] 민간분야 주요정보통신기반시설 클라우드 이용 가이드라인
    • [nCloud] Naver Cloud Platform 보안가이드
    • [KT Cloud] KT Cloud 보안백서
    • [ADT캡스/Infosec] 클라우드보안가이드(컨테이너 보안)-Docker, Kubernetes
    • [ADT캡스/Infosec] 2021 클라우드 보안 가이드 GCP
    • [ADT캡스/Infosec] 2021 클라우드 보안 가이드 Azure
    • [ADT캡스/Infosec] 2021클라우드보안가이드 AWS
    • [KISA] 웹 에디터 보안 가이드
    • [NHN Cloud] NHN Cloud | On.1 2022 클라우드 트렌드
    • [NHN Cloud] NHN Cloud | On.2 Cloud by default, Cloud NATIVE by default
    • [NHN Cloud] NHN Cloud | On.3 Cloud, AI and Fashion
  • [KISA] 제로트러스트가이드라인
    • [KISA] 제로트러스트가이드
  • Naver Cloud Infomation
    • [nCloud] Ubuntu 20.04 불필요한 계정 삭제 방법
  • AWS References
    • AWS 아키텍처 센터
    • [PowerPoint용] AWS Icon
    • AWS Icons Asset Package
  • Best-Practices
    • 조직 및 운영 보안(OPS)
    • 시스템 보안 권장사항(SYSTEM)
    • 앱 보안 권장사항(APP)
    • 네트워크 보안 권장사항(NETWORK)
    • 하드웨어 보안 권장사항(HARDWARE)
    • 개인정보 보호/보안 권장사항(PRIVAY)
  • 기타정보
    • 피싱 사이트 확인 하는 방법
    • [KISA] 보이스피싱 대응 방법
    • 해킹 IP 공유
    • [KISA] 공동주택 홈네트워크 시스템 보안관리 안내서
    • [개인정보보호위원회] 가명정보 처리 가이드라인(2022.4.)
    • [개인정보보호위원회] 가명정보 활용 우수사례집
    • [금융감독원/DAXA] 가상자산 연계 투자사기 사례 7선
  • GitHub-Infomations
    • NHN-Github
    • Naver-Github
    • Kakao-Github
    • Samsung-Github
    • LG_Electronics-Github
    • SKTelecom-Github
    • FaceBook-Github
    • Google-Github
    • Microsoft-Github
    • Amazon-Github
  • Killing-Time
    • [클래스101] 23년 무료 취미테스트
    • 해커스잡 NCS&인적성 무료레벨테스트
    • 해커스토플 무료레벨테스트
    • 해커스중국어 무료레벨테스트
    • 탑툰-선생님의 노력[19금]
    • 탑툰-마니또[19금]
    • 탑툰-보스의 딸[19금]
    • 무툰 도시정벌9부
    • 탑툰 취화점
    • 무툰 열혈강호
    • 무툰 요쿠르트 아줌마[19금]
    • 탑툰-엄마야 누나야[19금]
    • 탑툰-내 맘대로 장모님[19금]
    • 탑툰-치킨클럽[19금]
    • 탑툰-여동생이랑 비밀 레슨[19금]
    • 탑툰-뺏는 남자[19금]
    • 무툰 최면으로 그녀들을 함락시키는 법[19금]
    • 무툰 그 남자의 공부법[19금]
    • 무툰 모비딕[19금]
    • 무툰 건물주 누나[19금]
    • 탑툰-나의 일러레님[19금]
    • 무툰 구멍가게 구멍열었습니다[19금]
    • 무툰 치한중독[19금]
  • TIPS
    • 소상공인지식배움터(Feat. 교보문고 무료 대여)
    • 노트북 AS 기간 확인 하기
    • AI Support Tools
    • AI ChatGPT Prompt Study
  • BOOKS
    • [쿠팡] [영진닷컴]그림으로 배우는 클라우드 2nd Edition
    • [쿠팡]그림으로 배우는 클라우드 인프라와 API의 구조
    • [쿠팡] 한눈에 보는 실전 클라우드 프로젝트:클라우드 기본과 프로세스 아키텍처 설계와 구현 보안 데브옵스까지 실증
    • [쿠팡] 아마존 웹 서비스 AWS Discovery Book:클라우드 서비스 개념을 이해하고 직접 구성해보기
    • [쿠팡] 클라우드 환경에서의 데브옵스 보안:안전한 클라우드 서비스를 위한 보안 기법과 데브옵스 실천법
    • [쿠팡] 쿠버네티스 쿡북:클라우드 네이티브 애플리케이션 구축
    • [쿠팡] 클라우드 엔지니어를 위한 97가지 조언 : 클라우드 엔지니어 86명의 통찰과 지식을 담은 현실적인 이야기
    • [쿠팡] 멀티 클라우드로의 전환:알맞은 멀티 클라우드 솔루션 찾아보기
    • [쿠팡] 클라우드 AWS 자격증으로 시작하기
  • Hobby
    • [Youtube] succulent
      • [Youtube] 다육이 키우는 중. #6
      • [Youtube] 다육이 키우는 중. #5
      • [Youtube] 다육이 키우는 중. #4
      • [Youtube] 다육이 키우는 중. #3
      • [Youtube] 다육이 키우는 중. #2
      • [Youtube] 다육이 키우는 중. #1
  • 심심할때 보는 기사
    • Enjoy News
  • TEST-1 Page
  • TEST Page
  • World_ip_addr
    • 2024 Year IP Addr List
    • 2023 Year IP Addr List
  • Startup Infomation
    • Startup 정보 공유
  • Security Collections
Powered by GitBook
On this page
  • 1. 먼저 알아 두기
  • 1.1 vscode 가 무엇인가?
  • 1.2 Visual Studio Code Remote - Containers 란 무엇인가?
  • 1.3 'Front-End' , 'Back-End' 란 무엇인가?
  • 1.4 dockerfile 이란 무엇인가?
  • 2. Visual Studio Code 의 Remote - Containers 를 사용하는 이유
  • 3. Visual Studio Code 다운로드 및 설치
  • 3.1 Visual Studio Code 다운로드 및 설치
  • 4. DockerFile 설정
  • 4.1 DockerFile 설정 파일 알아보자
  • 5. Visual Studio Code 의 devcontainer.json 알아보자
  • 6. Visual Studio Code 를 이용하여 Remote - Containers 를 실행 하자
  • 6.1 폴더 구성
  • 6.2 VSCode 에서 Remote - Containers 실행 하기
  • 7. Github Sample Code 로 테스트 해 보자
  • 7.1 Git Clone 또는 압축 파일 다운로드 하기
  • 7.2 Github Sample Code 를 VSCode 실행 하기

Was this helpful?

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

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

Last updated 3 years ago

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 를 사용하게 되면 동일한 개발 환경을 제공하게 됩니다.

자세한 #4.-visual-studio-code-devcontainer.json 에서 extensions, features 에 지정한 것들을 사용 할 수 있으며 필요한 프로그램이 있다면 등록하여 사용 하시기 바랍니다.

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

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

7.2 Github Sample Code 를 VSCode 실행 하기

Git 또는 압축 파일을 다운로드 받아서 압축 해제 후 #6.2-vscode-remote-containers

아래의 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"
  }
}

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

참고 :

참고 :

참고 :

다운로드 :

참고

먼저 #6.2-vscode-remote-containers 를 통해서 연결 한 후에 아래의 Git 주소로 Clone 또는 를 workspace 에 풀어서 실행

git clone semi-project

2022년 NHN Cloud 무료 교육일정 :

2022년 NHN Cloud 행사/프로모션 정보 공유 :

Visual Studio Code 나무위키
Front-End 해쉬넷
Back-End 해쉬넷
https://code.visualstudio.com/download
https://code.visualstudio.com/docs/remote/devcontainerjson-reference
압축 파일 다운로드
https://github.com/dalcon10028/vue3-tailwindcss-template.git
https://doc.skill.or.kr/2022-NHN-Cloud-Education
https://doc.skill.or.kr/2022-NHN-Cloud-Event-Promotion
https://doc.skill.or.kr/2022-NHN-Cloud-Education
https://doc.skill.or.kr/2022-NHN-Cloud-Event-Promotion
Pay trudYou using PayPal.MePayPal.Me
donation
Pay trudYou using PayPal.MePayPal.Me
donation
Logo
Logo
1KB
Dockerfile
DockerFile 파일
2KB
devcontainer.json
devcontainer.json 파일
2KB
vscode-remote-containers.zip
archive
설정 zip 파일
165KB
vue3-tailwindcss-template-master.zip
archive
압축 파일
1KB
devcontainer.json
변경된 사용자 및 yarn install devcontainer.json
그림. Visual Studio Code Web Site
그림. Visual Studio Code 실행 화면
그림. 파일>폴더열기> vscode-server1 Folder 선택
그림. 왼쪽 아래(원격 창 열기) 클릭 후 'Open Folder in Container...' 를 선택 하여 실행
그림. 원격 열기가 실행 되며 Dockerfile 과 devcontainer.json 의 설정 값을 실행 함
그림. Remote - Containers 로 실행 된 화면
그림. Git 주소()
그림. VSCode 의 Remote-Containers 로 연결하기
그림. Remote-Containers 에 연결 중
그림. yarn serve 실행
그림. localhost:8080 실행 완료
https://github.com/dalcon10028/vue3-tailwindcss-template