VSCode의 Remote-Container로 React(Node.js+TypeScript) 환경을 빨리 구축한다.

환경 구축은 Docker로 만들고 싶다.

Docker에 익숙해지면 무엇이든 Docker를 사용하고 싶지 않습니까?
나는 그런 인간의 혼자서, PC를 바꾸어 Docker를 본격적으로 사용하기 시작하고 나서, 수중의 환경이 더러워지는 것이 싫어 환경 구축은 모두 Docker를 사용하고 있습니다. 결벽증입니까?

이번에는 VSCode에서 Docker를 쓰러뜨리는 신 확장 기능인 Remote-Containers를 사용하여 JavaScript 라이브러리의 React 개발 환경을 만들어 나갈 것입니다.

사전에 준비가 필요한 것

Docker

VSCode

Remote-Containers를 사용하여 환경 만들기

사전에 Docker가 설치되어 있다고 가정합니다.

확장 프로그램 Docker 및 Remote-Containers를 설치합니다.




적절한 폴더를 열고 명령 팔레트에서
Remote-Containers:Add Development Containers Configuration Files
선택.


설치하려는 환경의 샘플이 표시되므로 Show All Definitions를 선택하고,


최신판인 Node.js 14 & TypeScript를 선택.


그러면 .devcontainer 폴더가 생성되고 일부는 MS 사가 준비한 지정된 환경의 DockerFile과 추가 설정을 수행하는 devcontainer.json을 저장합니다.




React를 이용하려면 커맨드 라인 툴의 create-react-app를 사용하는 것이 락틴이므로, 이것을 npm로 설치하는 설정을 DockerFile에 추가해 둡니다.


또, 컨테이너측의 3000번 포트를 사용하게 되므로, devcontinaer.json 파일에 포워드 포트의 설정을 추기합니다.


마지막으로 이러한 파일을 기반으로 Docker 이미지와 컨테이너를 생성합니다. 확장에서 Remote-Containers:Rebuild and Reopen in Container 실행.
(또는 오른쪽 하단에 나올 팝업을 클릭)




화면이 한번 닫고, 다시 열린 후 조금 기다리면, VScode의 좌하가 컨테이너 안에 들어가 있는 것을 나타내는 상태로 바뀌고 있다고 생각합니다.


이것으로 React의 환경은 완성입니다. 간단!

실제로 움직여보세요

create-react-app를 실제로 사용하여 샘플 앱을 실행해 봅니다.

터미널을 열고,# npx create-react-app test
실행. 필요한 라이브러리 세트가 다운로드됩니다.


Happy hacking!의 문자가 나오면 완료입니다.
test 디렉토리가 작성되고, 그 중에는 React를 움직이기 위한 템플릿이 되는 파일이 생성되고 있습니다.


이 녀석을 움직여 보겠습니다.

# cd/test     //カレントディレクトリを移動
# npm start   //アプリを起動

앱을 시작하면 localhost:3000으로 이동합니다. 아래와 같은 화면이 표시되면 성공입니다!


컨테이너에서 나가려면 VSCode 화면을 닫는 것만으로 컨테이너 OK입니다.
다시 컨테이너에 들어가려면 VSCode Docker 옵션에서 원하는 컨테이너를 마우스 오른쪽 버튼으로 클릭하고 Start를 클릭하십시오.


그러면 컨테이너가 시작되므로 다시 마우스 오른쪽 버튼을 클릭하고 Attach Visual Studio Code를 클릭하여 완료합니다.


그럼, 좋은 Docker & React 생활을!