WSL2 Ubuntu 환경에서 Electron 설치하기 [오류 해결하기]

 

https://www.electronjs.org/docs/latest/tutorial/quick-start

Quick Start | Electron

yarn add --dev electron

 

elctron을 설치하는 것은 어렵지 않습니다.

 

문제는 WSL2 환경에서는 모니터가 없고 , 기본적으로 linux라면 깔려있어야 할 것들이 안깔려있어서 많은 오류를 만나게 되어 이 글을 작성하게 되었습니다.

 

[에러코드] 디스플레이가 없다.

[19615:19615:0219/152933.751028:ERROR:browser_main_loop.cc(1512)] Unable to open X display.

 

 

 

결과적으로는  이 글을 보고 많이 따라했습니다 그렇지만 한글로 제가 나중에 찾아보기 쉽도록 정리하는 중입니다.

 

 

https://gist.github.com/caseywatts/9700b402b6b51d1d6af9f0b206739770

Electron on WSL2.md

 

 

먼저 안깔려 있는 패키지들을 깔아주어야 합니다.

 

sudo apt install libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev

 

 

저는 중간에 크롬도 깔아주었습니다.

 

https://scottspence.com/posts/use-chrome-in-ubuntu-wsl

Use Google Chrome in Ubuntu on Windows Subsystem Linux · Scott Spence

 

크롬 설치

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb

 

 

모니터 출력을 연결해주는 프로그램 

 

https://sourceforge.net/projects/vcxsrv/

VcXsrv Windows X Server

깔고나서 다시 실행해서 설정해주어야 합니다.

 

실행

 

디스플레이 숫자는 0으로 고쳐야합니다.

 

그대로 진행

맨 밑 Disable access control 체크 후 밑의 -ac를 설정. -ac의 경우 설정 안해도 될수도 있지만 전 설정하고 잘 되었습니다.

save Configuration 설정 바탕화면 저장

 

꼭 모든 방화벽을 설정해주어야 합니다

 

 

모든 xlauncher 설정이 끝났습니다.

 

 

 

 

터미널 설정

export DISPLAY="`grep nameserver /etc/resolv.conf | sed 's/nameserver //'`:0"

 

이제 yarn start 하시면 될 것 입니다.

 

 

끝!