iPad + Raspberry Pi 기반 개발환경 구축 #2. iPad에서 VSCode 사용하기

서론

Raspberry Pi를 개발환경으로 구축하는 하는 가장 큰 목적은 iPad를 개발환경으로 만드는 것이다. MacBook Pro M4 16인치를 사용하여 연구하고 개발하고 있지만 무게 때문에 쉽게 들고 다닐수 없다. 그래서 iPad Pro 11인치를 이동용 개발 환경으로 만들기 위해 라즈베리파이를 활용한다.

라즈베리파이 운영체제는 데비안 리눅스 계열이다. 그래서 iPad와 Raspberry Pi를 들고 다닌다면 항상 리눅스 개발환경으로 연구와 개발을 할 수 있게 된다.

"iPad + 라즈베리파이 기반 개발환경 구축" 첫 번째 글에서 macOS에서 모니터 없이 라즈베리파이를 설치하는 글을 소개했다. 이 글에서 wifi를 설정하여 macOS 와 Raspberry Pi 가 같은 네트워크에 존재하기 때문에 SSH 접속으로 라즈베리파이 운영체제에 접속할 수 있는 것을 확인했다. 이번 글에서는 iPad를 이용하여 Raspberry Pi 에 SSH 로 접속하고 Visual Studio Code Remote 개발 환경을 구축하는 방법을 소개한다.

iPad 에 Raspberry Pi 연결하여 전원 공급

Raspberry Pi 4는 USB-C 케이블만 있으면 iPad에 연결해서 따로 전원 어댑터 없이 사용 가능하다. 이 부분 때문에 라즈베리파이 4를 선택했다. 단 iPad 전원 포트가 USB-C 타입만 가능하고 라이트닝 포트를 가진 아이패드는 이런 구성을 만들 수 없다. 이 구성만 있으면 아이패드와 라즈베리파이만 가지고 어디서든지 리눅스 개발 환경을 가질 수 있게 된다.

iPad SSH 앱 Blink Shell 설치

iPad에서 SSH를 사용할 때 사용하는 SSH 클라이언트 앱 종류가 많이 있다. 그 중에서 Blink 앱은 VSCode를 내장하고 있고, 원격 서버에 code-server 를 이용하여 VS Code Remote 개발 환경을 사용할 수 있다.

Blink 앱을 설치했으면 실행해서 SSH로 Raspberry Pi로 접속해보자.

Blink 앱의 호스트 설정

우선 무선공유기에 Raspberry Pi의 IP를 확인한다.

라즈베리파이의 IP를 확인했으면 Blank 앱을 열어서 Settings 을 연다. 키보드를 사용하고 있으면 cmd + , 를 사용해서 열수도 있고 Blank 앱의 프롬프트에서 config 를 입력하고 엔터를 친다.

Settins가 열리면 Hosts를 선택한다.

Hosts 설정 화면이 나오면 Add new Host 를 선택해서 공유기에서 확인한 Raspberry Pi의 IP 를 입력한다. IP 부분은 개인마다 다르기 때문에 자신이 라즈베리파이 디바이스의 IP를 등록하도록 한다. HostName에 IP 정보를 넣고 Alias에 호스트 이름 raspberrypi를 입력한다.

라즈베리파이를 새로운 호스트로 등록했으면 이제 blink 프롬프트에서 SSH를 사용하여 Raspberry Pi로 접속이 가능하다.

ssh pi@raspberrypi

Blink 에서 VSCode 열기

Blink를 사용하는 가장 큰 이유는 Blink에서 VSCode 사용할 수 있기 때문이다. blink 프롬프트에서 code 라고 입력하고 엔터를 치면 VSCode 가 열리게 된다. (데스크탑에서 사용하는 VSCode 같이 보이지만 사실은 오픈소스 VSCode Web 버전인 code-server 이다.)

Blink 앱 내부에서 VSCode를 사용할 수 있다는 말은 iPad에서 VSCode로 개발이 가능하다는 말이 된다. 지금가지 iPad를 데스크탑 대신해서 사용하려고 해도 IDE툴이 제대로 지원되지 않아서 절대 데스크탑을 대신할 수 없었는데, 이젠 iPad만 있으면 언제 어디서 바로 개발을 할 수 있다.

실제 Visual Studio Code 프로젝트에서 Windows, macOS, Linux 용으로 VSCode IDE를다운 받을 수 있고, 웹 버전인 https://vscode.dev 에 접속해서 웹에서 VSCode를 사용할 수 있다. iPad 에서 웹 브라우저를 열어 VSCode 웹 버전을 통해 개발이 가능하다. 물론 VSCode 웹 버전은 데스크탑의 모든 기능을 사용할 수 없지만 대부분의 기능을 사용할 수 있다.

Blink에서 code 명령어로 VSCode를 열어서 코딩은 가능하지만 VSCode에서 코드를 실행하거나 터미널을 기능을 사용할 수 없다. 에디터와 터미널 기능을 함께 사용하기 위해서는 code-server를 서버에 설치해서 사용해야한다.

Raspberry Pi에 code-server 설치

라즈베리파이에 code-server를 설치하기 위해서 라즈베리파이에 SSH로 접속해서 실행한다. blink 앱을 열고 blink 프롬프트에서 ssh pi@raspberrypi 로 접속한다.

ssh pi@raspberrpi

code-server는node.js가 필요하다. 프로젝트 개발할 때 node.js를 사용하여 개발을 많이 하고 있는데 이 때 다양한 버전의 node.js가 필요하여 nvm 을 설치하고 최신 LTS 버전 node.js를 설치한다.

nvm 설치

nvm 자세한 설치 방법은 공식 문서를 참조해서 설치하면 된다. SSH로 라즈베리파이에 접해한 상태에서 다음 명령어를 실행한다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash

위 명령어를 입력하고 실행하면 nvm 소스를 받아서 라즈베리파이에 설치한다. 그리고 $HOME/.bashrc 파일안에 다음 내용을 자동으로 저장하게 되는데 파일을 확인해보고 없으면 코드를 추가한다.

vi $HOME/.bashrc

$HOME/.bashrc 파일에 다음 내용이 하단에 있어야 한다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

nvm 설치가 완료되면 nvm으로 node.js LTS 버전을 설치한다. 현재 가장 최근의 LTS 버전을 확인해보자. nvm 에서 설치 가능한 node.js의 모든 버전을 확인하는 명령어는 ls-remote 이다.

nvm ls-remote

현재 가장 최근의 LTS버전은 v22.14.0 으로 확인된다. nvm install 명령어를 사용하여 설치한다.

nvm install 22.14.0

code-server 설치

VSCode 의 공식 웹 버전은 https://vscode.dev/ 인데, 여기에 사용된 VSCode Server 버전은 오픈소스가 아니라 공개되지 않았다. 대신 code-server 라는 VSCode Server 버전은 오픈소스이다. code-sever를 라즈베리파이에 설치한다.

curl -fsSL https://code-server.dev/install.sh | sh

code-server가 설치되면 debian계열 리눅스에서 사용하는 systemctl 을 이용하여 부팅이나 재부팅시 자동으로 code-server 가 실행될 수 있도록 다음 명령어를 입력한다.

sudo systemctl enable --now code-server@$USER

config.yaml 수정

code-server를 설치하면 code-server 설정 파일이 $HOME/.config/code-server/config.yml 경로에 저장된다. 이 파일을 열어서 다음과 같이 수정한다.

기본 값은 bind-addr이 127.0.0.1:8080 으로 되어 있고, cert는 true로 되어 있다. bind-addr을 127.0.0.1 에서 0.0.0.0 으로 하는 이유는 로컬호스트가 아니라 iPad 에서 code-server에 요청하기 위해서이다. 그리고 https를 사용할때는 cert를 true로 설해하지만 지금은 https설정은 소개하지 않는다. 이 부분은 따로 정리해서 포스팅을 할 예정이다.

bind-addr: 0.0.0.0:8080
auth: password
password: abcdefg1234566890
cert: false

이제 code-server의 모든 설정이 끝났다. config.yaml 수정사항을 적용하기 위해서 다음 명령어로 code-server 재시작 한다.

sudo systemctl restart code-server@$USER

iPad에서 웹 브라우저를 실행해서 https://raspberrypi:8080/를 열어보자.

비밀번호는 $HOME/.config/code-server/config.yaml 파일에 있는 passsword 항목 값을 입력하면 된다. 비밀번호 인증후 웹에서 동작하는 VSCode를 브라우저에서 확인할 수 있다.

우리가 데스크탑에서 사용하는 VSCode 테마는 Dark 테마가 기본인데 웹 버전에서는 Lite 버전이 기본이다. Choose your theme에서 Browse Color Themes 버튼을 누르면 테마를 선택할 수 있다. Dark(Visual Studio Dark) 테마를 선택하면 우리가 흔히 보던 VSCode와 같은 컬러테마가 적용된다.

Blink 에서 VSCode remote 사용하기

위 code-server를 설치한 후 브라우저에서 접속했는데 Blink에 내장되어 있는 VSCode를 사용하여 VSCode remote 환경으로 code-server를 사용할 수 있다.

iPad에서 Blink-FS를 이용하여 Raspberry Pi와 파일 공유

우선 Blink 프롬프트에서 code 라고 명령어를 실행해서 Blink의 VSCode를 실행한다. Blink의 VSVode 가 실행되면 왼쪽 네비게이션에서 Extensions 메뉴를 선택한다. 그리고 Blink-FS 라는 VSCode Extension을 설치한다. 이 엑스텐션은 iPad의 Files 앱에 Blink 앱을 통해 Raspberry Pi 디바이스에 물리적으로 마운트하여 iPad와 Raspberry Pi 디바이스간 서로 파일을 쉽게 공유할 수 있다.

Blink 앱에서 config 명령어를 사용하여 호스트의 설정 창을 열어서 등록해둔 raspberrypi 호스트 설정을 연다. 설정 화면 가장 아래에 보면 Files.APP 항목이 있다. Add Location 을 선택한다.

Files.app 에서 Add Location을 선택하면 rasberrypi 라는 호스트명과 같은 항목이 생기고 ~ 표시가 생기는데 이 항목을 선택하면 상세 화면으로 이동된다.

이제 Raspberry Pi에서 공유하고 싶은 디렉토리 경로를 Path에 넣어준다. 나는 pi 의 홈디렉토리 경로를 넣어줬다. 그리고 가장 아래 Validate Connection 을 눌러 정상적으로 커넥션이 문제가 없는지 확인한다. 혹시 커넥션이 문제가 발생하면 경로 또는 사용자 인증 문제가 있으니 호스트 설정의 username 과 password를 다시 확인해본다.

이제 iPad의 Files 앱을 열어보면 Blink 항목이 생겨있고, 이 항목을 눌서서 확인하면 Blink-FS설정으로 Raspberry Pi 와 디렉토리가 공유되고 있는 것을 확인할 수 있다.

이제 라즈베리파이로 코드 또는 파일을 쉽게 전송해서 VSCode Remote 기능을 사용해서 리눅스 환경에서 코드를 실행할 수 있게 되었다.

Blink 에서 VSCode Server remote 사가하기

이젠 모든 설정이 끝났다. 마지막으로 Blink에서 VSCode를 실행할 때 우리가 Raspberry Pi에 설치한 code-server를 실행하도록 하겠다. Blink 프롬프트에서 code http://raspberrypi:8080 을 입력하여 실행한다.

code http://raspberrypi:8080

우리는 code-server 의 설정파일 config.yaml 파일에서 비밀번호 인증을 사용한다고 정의했기 때문에 비밀번호 항목이 나온다. 이 부분은 이후 https 설정과 함께 비밀번호 인증을 생략하도록 설정하면 된다. config.yaml 에 설정되어 있는 passwor를 입력한다.

비밀번호 인증을 통과하면 Raspberry Pi 의 code-server가 Blink VSCode 에서 동작하는 것을 확인할 수 있다.

iPad와 Raspberry Pi의 파일 공유 테스트

실제 코드를 테스트 해보자.

1. iPad 에서 Files 앱으로 Raspberry Pi 디바이스에 Workspces라는 디렉토리를 만든다.
2. VSCode 에서 iPad에서 만든 Worspaces 디렉토리로 접근해서 디렉토리 안에 test.js 파일을 만든다.
3. VSCode 에서 test.js 파일을 실행해본다.

먼저 iPad에서 Files앱을 사용하여 Raspberry Pi 디렉토리 안에 Workspaces 디렉토리를 생성한다.

다음은 Blink 프롬프트에서 code https://raspberrypi:8080 으로 VSCode Sever Remote로 라즈베리파이 디바이스 환경에서 VSCode를 연다.

그리고 iPad 에서 생성한 Workspaces 디렉토리를 연다. VSCode에서 /home/pi/Workspaces 경로의 폴더를 연다.

test.js 파일을 열어서 다음 내용을 입력하고 저장한다.

console.log('Hello Raspberry Pi, VSCode Sever Remote from iPad')
console.log(process.env)

VSCode 터미널을 열어서 node.js 를 이용하여 코드를 실행한다.

nvm use 22.14.10
node test.js