[Flutter] 아이패드에서 플러터 코딩하기 with Code-Server

개요

---

서버용 라즈베리파이에 Code-Server를 설치한 후 코딩에 대한 제약 사항이 많이 개선되었다.

아이패드에서 내 개인 Code-Server로 접속하여 NodeJS API 구현을 하는 등, 개발 취미에 대한 자유도가 많이 높아졌다. (디스코드 봇도 code-server를 통해 성공적으로 구현 완료). Code-Server 만세!!!!

요즘에 Flutter Web을 통해 이런저런 실험을 진행하고 있는데, Flutter Web도 Headless-server를 근본으로 포트를 구성하여 Chrome이나 기타 브라우저에서 디버그가 가능하게 구현이 되어있는 듯했다.

근데 이 녀석, 만약 외부에 접근할 수 있는 환경이라면, Code-Server를 통해서도 충분히 Flutter 개발이 가능하다면 어떨까?라는 생각이 들어, 나는 바로 실험을 진행해 봤다.

 

구성

---

- Flutter정도는 무난하게 실행할 수 있는 PC사양
- Code-Server가 설치된 환경
- Flutter가 설치된 환경

만약 서버에 Code-Server를 설치해야 된다면, 아래 글을 참고.

https://cajava.tistory.com/33

진행

---

 

내가 이전에 Code-Server를 설치해 둔 PC는 라즈베리파이 4B 8GB RAM 모델이었다. 
하지만 플러터를 원활하게 돌릴 정도의 사양은 아니었기 때문에 이번에는 맥미니에서 테스트를 진행하였다. 어차피 맥미니도 24시간 켜두기 때문에 접속 문제는 없다.


우선 Web-Server로 호스팅을 원하는 플러터 프로젝트로 이동하자.

그리고 플러터를 실행하는데 조건을 다르게 작성하여 실행하도록 한다.

fvm flutter run -d web-server --web-hostname=0.0.0.0 --web-port 1818

- web-server : 플랫폼을 Web server로 호스팅 하도록 한다.
- --web-hostname=0.0.0.0 : 외부에서 해당 PC로 접속했을 때 모든 아이피가 접근하게끔 한다.
- --web-port 1818 : 서버IP:1818을 통해 플러터 앱으로 접속하다.


아래와 같이 서버가 실행된다.

중간에 소스코드 수정이 이뤄진다면 r을 눌러 리로드를 하면 되고,
프로젝트를 종료하고 싶다면 q를 누르면 된다.

이제 서버용 PC에서 접속을 한다면 localhost:1818을 브라우저에 입력하면 되고 로컬 네트워크 내에 다른 PC에서 접속을 하려면 서버아이피:1818을 웹브라우저에 입력하면 아래처럼 접속이 된다.

여기까지 플러터를 웹서버로 구동하기 위한 준비과정을 마쳤고.
나는 카페나 공원 어디서든 아이패드로 플러터 코딩을 하기 위해 약간의 작업을 더 진행했다.

바로 포트포워딩!
아이패드에 Code-server로 접속을 하기 위해 특정 포트로 구성을 해두었고,
Flutter WebServer 접근을 위한 포트 1818로 포워딩을 해둔 상태이다.

이제 접속을 해보자.

코드서버에서 코드가 컴파일되고 호스팅이 된 후, 서버IP:1818 주소로 들어가면 내 플러터 프로젝트가 로드된다.

근데 내 아이패드는 10.9인치 정도밖에 안 돼서 이 상태로 화면 분할하여 코딩을 하기엔 조금 불편함이 따른다.

따라서 내 아이폰과 아이패드를 동시에 사용하는 쪽으로 방향을 선택했다.

후련하다.

Dev Tools로 디버그를 진행하려면
Code-Server 커맨드 옵션에서 DevTools를 이용하면 된다.

근데 아직 내 맥미니 Code-Server에는 SSL을 적용하지 않아 브라우저 로딩이 되지가 않는 것 같았다. 
만약 SSL 적용 후 DevTools까지 이용하게 된다면 플러터 퍼포먼스, 로깅, 위젯트리 등 다양한 Flutter 기능들을 사용할 수 있을 것 같다.

 

결론

---

아이패드로 플러터를 개발하는 게 초반에는 조금 어렵겠지만, 사실 아이패드 자체가 배터리도 적게 먹고 (플러터도 홈서버에서 돌아가서 브라우저만 사용하니 배터리 효율 UP UP UP), 무게도 훨씬 가볍기 때문에 개인적으로는 나는 아이패드를 휴대하는 것이 더 편하다.

그리고 노트북은 잃어버리면 돈도 돈이지만.. 작업물을 커밋하지 않았다면.. 너무 끔찍하다. 행여나 누가 내 소스코드를 훔쳐가기라도 한다면? 너무 싫다.

다소 과한 상상이긴 하지만. 현재까지 Code-Server만으로 API, Bot 등 다양한 시스템을 구축해 본 전적이 있었다. 
그리고 이제는 Front-End도 Code-Server만을 이용해 언제 어디서든 (카페에서 아이패드로 하거나, PC방에서 PC방컴으로 하거나) 코딩이 가능해졌다.