소개

Progate Advent Calendar 2017 16일째의 기사가 됩니다!

Progate 에서는, 환경 구축하지 않고 브라우저상에서 코드를 실행할 수가 있습니다.
그 코드 실행 환경을 어떻게 실현하고 있는지에 관한 기사가 되고 있습니다.
꽤 거칠게 썼습니다!

전제

Progate의 연습은 구멍 채우기 형식이 아닙니다.
구멍 채우기 형식이라면, 정해진 코드가 입력되었을 때만 미리 준비해 둔 실행 결과를 표시하는 등이라고 할 수 있을 것 같습니다만, Progate에서는 유저가 자유롭게 코드를 기술·실행할 수 있으므로, 자신 로컬에서 코드를 실행하는 것과 같이 어느 정도 자유로운 환경이어야합니다.

주제

결론에서 말하면 도커을 사용하여 실행 환경을 실현하고 있습니다.
Docker 컨테이너를 사용하면 사용자별로 독립적인 환경을 제공할 수 있으며 사용자가 자유롭게 사용할 수 있습니다.
이하, 구체적으로 설명해 갑니다.

사용자가 브라우저로 액세스하면 Progate 본체 서버에 요청이 날아갑니다.

Progate 본문 서버는 코드 실행 서버에 Docker 컨테이너 생성을 요청합니다.

코드 실행 서버는 컨테이너를 만들고 컨테이너에 연결하기 위한 정보(예: 컨테이너 ID)를 응답으로 반환합니다.

4. 컨테이너에 연결하기위한 정보를 사용하여 브라우저에서 컨테이너로 Websocket을 연결합니다.

나머지는 Websocket을 사용하여

편집기에 입력 된 코드를 컨테이너에 보내기

코드 실행 요청

실행 결과 송수신

등이 이루어집니다.

Websocket을 이용하는 것으로, 리얼타임으로의 코드의 실행 결과의 취득, 인터랙티브한 코드(Ruby의 gets 메소드등)의 실행등이 가능해지고 있습니다.

보충

진짜는 로드 밸런서나 오토스케일링 그룹, Websocket의 리퀘스트를 배분하기 위한 리버스 프록시, Docker Swarm등 여러가지 것을 이용하고 있습니다만, 이 근처는 또 기회에 쓰고 싶습니다!