윈도우 WSL2 환경에서 GUI 띄우기

 

🚩문제: WSL에서 GUI가 필요해진 상황

puppeteer을 쓰는 과정에서, GUI를 띄워 눈으로 직접 화면을 확인해 가면서 코드 작업을 해야 하는 상황이 생겼습니다. 

headless: false로 설정해주고 적용하면 GUI를 띄워볼 수 있습니다.

작업을 마치면 headless:true로 다시 바꿔야겠죠.

const launchOptions = {
  headless: false,  //보이게 처리
  args: ['--no-sandbox', '--disable-setuid-sandbox']  // 실행 옵션
};

export async function crawls() {
  try {
  const browser = await puppeteer.launch(launchOptions);

 

하지만 정작 false로 두고 실행을 하자 아래와 같은 에러가 뜨기 시작했습니다. 

Error during crawling: Error: Failed to launch the browser process! undefined.

 

헤드리스 했을 때는 잘 불러오던 것이, 크롤링부터 막히고 있습니다. 브라우저 프로세스에 접근이 불가하다는 의미 같습니다. 관련 에러들을 검색해봤지만 의존성을 새로 설치해주거나 경로를 정확히 지정해주라는 게시글이 나오는 상황...

(제시된 해결법을 다 해봐도 영 풀리지 않는 상황이었습니다.)

 

이때 생각난 것이 제 컴퓨터 환경이었습니다. 제가 쓰는 메인 데스크탑은 Windows기반으로 동작하고, 현재는 WSL2를 깔아 우분투로 작업을 하고 있습니다. 혹시나 해서 알아보니 WSL 환경에서는 X 서버를 윈도우 측에 설치하고 실행시킨 뒤, 윈도우와 WSL2 간의 연결까지 해줘야 GUI를 띄울 수 있다고 합니다. 

 

💡WSL 환경에서 GUI 실행을 위한 조건

• X 서버 실행: WSL2 환경에서 GUI 애플리케이션을 실행하려면 윈도우 측에서 X 서버가 실행되어야 합니다.
• $DISPLAY 환경 변수 설정: WSL 환경에서 X 서버와 통신하려면 $DISPLAY 변수가 올바르게 설정되어 있어야 합니다.

X서버? : GUI 가 실행되는데에 필요한 그래픽 요소와, 윈도우 관리 기능을 제공합니다. 

 

 

---

🚩어떻게 X서버를 설치하고, 실행하고, 연결할 수 있을까?

1) VcXsrv 깔고 Windows에서 서버 돌리기

Windows에서 자주 쓰는 X서버로 VcXsrv를 추천받았습니다. VcXsrv 홈페이지에 들어가서 Windows X Server을 다운받은 뒤 실행시켜주면 됩니다. 설정도 어렵지 않았는데요. 아래 설명에 따라 단계별로 체크해주면 됩니다. 

 

Multiple windows 선택 -> start no client -> Disable access control까지 체크(체크하지 않으면 접근이 어렵다는 오류가 뜬다고 합니다. 실수로 체크하지 못했다면 다시 실행시켜서 설정하면 됩니다.) Additional parameters for Vcsrv에 '-ac'를 입력(이 역시 위 사항 체크와 유사한 기능이라고 합니다.) -> 마침을 눌러도 됩니다. 그러나 매 실행마다 같은 설정을 하기 귀찮다면, Save configuration을 선택해  Config 파일을 저장해주고 해당 파일을 내 문서의 shell:startup로 옮겨줍니다. 

 

이제 우측 하단에 현재 실행 중인 프로그램을 확인해보면 X 표시가 떠있을 겁니다. X서버가 윈도우에서 실행 중입니다.

 

 

2) $DISPLAY 변수 설정해서 연결하기

여기서 끝난 것이 아닙니다. 환경 변수 설정을 더 해줘야 하는데, Wsl shell(ex Ubuntu) 터미널을 열어 IPv4주소를 입력해줍니다. WSL2 터미널에서 하단의 명령어를 통해 IP를 찾을 수 있습니다.

IP는 환경마다 각각 다를 수 있기 때문에 직접 찾아 설정해줘야 합니다. 제 경우에는 172.23.224.6 였습니다.

user@DESKTOP-Q941PT4:~$ cat /etc/resolv.conf
# This file was automatically generated by WSL. To stop automatic generation of this file, 
add the following entry to /etc/wsl.conf:
# [network]
# generateResolvConf = false
nameserver 172.23.224.6 //이걸 복사한다.

 

DISPLAY 변수를 해당 컴퓨터 IP로 설정해줍니다. (💀주의: =의 앞 뒤를 띄어쓰면 실행되지 않고 오류가 뜹니다.)

export DISPLAY=172.23.224.6

 

이제 Wsl shell은 잠시 닫고 Powershell의 터미널을 열어줍니다. 

wsl --list --verbose //해당 코드로 실행중인 것들을 확인하고
wsl --shutdown Ubuntu //강제로 종료해줬습니다. 다시 시작하면 바꾼 설정이 반영됩니다.

---

 

마침내, 다시 처음의 코드로 돌아갑니다. headless:false인 것을 확인하고, puppeteer을 실행시켜봅니다. 만약 뭔가 뜨자마자 바로 꺼져버리면 코드에 브라우저를 닫는 await browser.close()가 있는 게 아닌지 확인해볼 필요가 있습니다. 

짜잔! 공식 트위터 계정 주소를 넣자 자동으로 GUI로 화면을 보여줍니다!

 

 

💡막간의 Error handling: 막상 화면을 열고 나니 한국어 텍스트가 다 깨져 나타나는 현상이 있었습니다. 찾아보니 이는 Linux 기반 시스템에서 한글 폰트가 설정되지 않았던 경우로, 아래와 같이 추가로 터미널에 입력해줍니다.

sudo apt update
sudo apt install fonts-nanum fonts-unfonts-core

이후 GUI 애플리케이션을 다시 실행합니다.

또는 터미널에 locale 명령어를 검색해서 LANG가 ko_KR.UTF-8로 되어 있는지 확인하는 방법이 있습니다. C.UTF-8로 되어 있어서 기본적으로 영어를 사용하고 있었는데, 이를 한국어 로케일로 설정 변경해주니 위와 같이 깔끔하게 GUI 한국어가 나오는 것을 확인할 수 있었습니다. 관련 키워드로 '로케일 변경'을 추천합니다.

 

 

🤔왜 VSCode에서는 크롬이 열렸을까?

여기까지 오고 나니 한시름 놓이면서, 동시에 의문이 듭니다. 이토록 GUI는 설정할 게 많은데 전에 VS Code에서 npm run start를 하면 어떻게 즉시 크롬 브라우저가 열렸던 걸까요?

VS Code에서 크롬을 실행하면, 이 동작이 자체적으로 윈도우 측에서 일어난다고 합니다. 한 마디로 WSL과 통합되어 있더라도 윈도우 애플리케이션이므로 크롬을 직접 실행할 수 있습니다. 이 경우 X 서버나 WSL 설정에 영향을 받지 않는다고 합니다.

 

 

한바탕 GUI와 X서버에 대해 알아가는 시간이었습니다. 한층 편안하게 크롤링 작업을 할 수 있을 것 같네요.