Docker + VSCode + Remote - Containers
VisualStudio Code와 Docker 이미지를 이용해서 외부에서 php와 npm을 설치하지 않고, Docker 내부에서 개발할 수 있도록 설정하는 방법을 기록합니다.
Windows에서 Docker for Windows 같은 것으로 DockerEngine을 설치하지 않고 별도로 구축된 리눅스의 Docker Container를 붙는 상황을 가정합니다.
Docker-compose로 컨테이너 생성
잘 생성합니다.
www-data 작업 준비
기본적으로는 www-data에 sam 폴더 이하 권한이 주어져 있습니다.
이번 시나리오에서는 www-data가 정식 유저가 되는 방향으로 시도합니다.
docker-compose exec app /bin/bash
apt update
apt install busybox nano zsh
busybox --install
nano /etc/passwd #www-data의 shell을 /usr/bin/zsh 로 변경(필요하지 않다면 그냥 /bin/bash도 괜찮음)
su www-data -s /usr/bin/zsh #이후 기본 세팅. powerlevel10k 세팅을 여기서
ssh-keygen -t ed25519 -C docker_container_vscode
docker-compose restart app
생성된 키는 알아서 등록,
git config --global user.name UserName
git config --global user.email UserEmail@Domain 이런것도 알아서.
VSCode + Container
VSCode를 설치하고 Plugin으로 Docker, Remote - Containers 두개 설치
choco 설치, choco install docker-cli로 docker-cli 설치. choco 싫거나, 아니면 다른 조건이면 아무튼 요령껏 docker-cli는 쓸 수 있게 세팅
Connect to remote Docker over SSH에 따라 Docker over SSH 설정
imageConfigs에 사용할 json 파일은 다음처럼 설정 가능
{
"workspaceFolder": "/var/www/html/sam",
"remoteUser": "www-data",
"extensions": [
"bmewburn.vscode-intelephense-client",
"dbaeumer.vscode-eslint",
"donjayamanne.githistory",
"eamodio.gitlens",
"eg2.vscode-npm-script",
"esbenp.prettier-vscode",
"Gruntfuggly.todo-tree",
"MS-CEINTL.vscode-language-pack-ko",
"johnsoncodehk.volar",
"VisualStudioExptTeam.vscodeintellicode"
]
}
workspaceFoler와 remoteUser가 핵심
container가 붙는지 확인하고, terminal이 붙는지 확인하고, npm install 해보고, php --version 해보고, git push --dry-run 해보자
끝!
내부에서는 npm run watchProd로 빌드하는게 이쁘더라.
부록 - 설정
WSL: Ubuntu-20.04에 설치된 확장:
alefragnani.Bookmarks
bmewburn.vscode-intelephense-client
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
donjayamanne.githistory
dtsvet.vscode-wasm
eamodio.gitlens
eg2.vscode-npm-script
esbenp.prettier-vscode
Gruntfuggly.todo-tree
HookyQR.beautify
johnsoncodehk.volar
mrmlnc.vscode-scss
ms-azuretools.vscode-docker
MS-CEINTL.vscode-language-pack-ko
ms-python.python
ms-python.vscode-pylance
rifi2k.format-html-in-php
TysonAndre.php-phan
VisualStudioExptTeam.vscodeintellicode
xdebug.php-debug
yzhang.markdown-all-in-one