VS Code devcontainer로 laravel 개발환경 구성하기

devcontainer 란

VS Code에는 Remote - container 라는 확장이 있다.
그 확장을 설치하고 구성을 하면 Docker container 내부에서 vscode를 실행시켜 코드 수정과 명령들을 실행할 수 있다.

Remote development tutorial

이전에 설치한 Laravel Sail도 개발 가능한 환경을 구성해주지만 Remote - container를 이용한 개발환경을 구성해보려고 한다.

docker-compose v1.28+ 부터는 환경설정파일(.env)이 docker-compose.yml 파일과 같은 위치에 있어야 되는것 같다.
docker-compose environment

Laravel Sail의 Docker 구성 가져오기

아래 명령을 사용하면 구성파일이 프로젝트에 루트 디렉토리에 배치가 된다.

~/example-app$ sail artisan sail:publish

devcontainer 구성 순서

1. 프로젝트 루트 디렉토리에 .devcontainer 디렉토리를 생성.
2. Sail에서 가져온 Docker 구성을 .devcontainer 에 복사 후 편집
3. docker-compose.extend.yml 을 .devcontainer 에 생성
4. devcontainer.json 파일 생성

복사와 편집 작업은 VSCode에서 하면 된다.

아래처럼 구성하면 된다.

Dockerfile 수정

...

RUN groupadd --force -g $WWWGROUP sail
RUN useradd -ms /bin/bash --no-user-group -g $WWWGROUP -u 1000 sail
RUN mkdir -p /home/sail/.ssh \
    && mkdir -p /home/sail/.vscode-server \ 
    && mkdir -p /home/sail/.composer \
    && chown -R sail:sail /home/sail/

...

WSL에 사용자 uid와 동일하게 설정했다
그리고 .vscode-server 디렉토리를 생성하고 소유자 설정을 추가했다.
.ssh, .composer 등은 필요한 경우에 추가해도 된다

docker-compose.extend.yml 작성

기존의 docker-compose.yml 에서 수정할 내용만 작성한다.

laravel.test:
    build:
        context: .devcontainer/app
        dockerfile: Dockerfile
        args:
            WWWGROUP: '${WWWGROUP:-1000}'
    volumes:
        - 'vs-code:/home/sail/.vscode-server'
volumes:
    vs-code:
        driver: local

context 경로를 .devcontainer/app 로 변경하고
volumes 에 /var/www/html을 상위 디렉토리로 변경했다.
그리고 vs-code volume 을 추가해서 vscode 설정이 유지되도록 했다.

devcontainer.json 파일 작성

{
    "dockerComposeFile": ["../docker-compose.yml", "docker-compose.extend.yml"],
    "service": "laravel.test",
    "workspaceFolder": "/var/www/html",
    "remoteUser": "sail",
    "settings": {
        "terminal.integrated.profile.linux": "/bin/bash",
    },
    "extensions": [
        "felixfbecker.php-debug",
        "felixfbecker.php-intellisense",
    ]
}

프로젝트 디렉토리의 docker-compose.yml에 .devcontainer/docker-compose.extend.yml을 override 해서 사용한다.

이제 VSCode를 열고 명령팔레트(F1)에서 Remote-Containers: Open Folder in Container 명령 실행

최종적으로 아래처럼 컨테이너들이 생성되고

VSCode 터미널에서 mysql 접속

VSCode 터미널에서 php artisan migrate

자세한건 아래의 링크 참조
quick start devcontainer

소스 코드 링크 https://github.com/wlgns5376/laravel-example-app