Docker에서 Expo를 이동하고 싶어요!|React Native+Expo+Docker

본 보도의 내용

React Native는 iOS/Android 애플리케이션을 거의 같은 코드로 개발할 수 있는 프레임워크입니다.그리고 그것을 지탱하는 편리한 도구 체인 Expo.또한 Docker는 환경 구축의 고민과 스트레스를 쫓아낼 수 있다.
모든 기술이 너무 편리해서 나는 매우 좋아하지만, 이러한 것들을 조합하면 하나의 지령이 0에서 응용 소프트웨어를 개발하는 환경을 시작할 수 있겠지나는 이렇게 생각하고 한번 해 보았다!!(요구 사항이 있든 없든...)

샘플 코드

여기..
시도하려면 다음 명령을 순서대로 실행하세요.Expo Go를 전제로 한다.터미널은 호스트 PC와 동일한 네트워크 내에 있음)

git clone https://github.com/Hibagon1go/react_native_expo_docker_sample.git

cd react_native_expo_docker_sample

make expo_sample

expo init your_app_name

cd your_app_name

expo start

호스트 PC와 동일한 네트워크 내 터미널에서 Expo Go 어플리케이션에서 어플리케이션 시작

컨디션

Docker만 가입하면 됩니다!

코드 내용

https://qiita.com/wf-yamaday/items/2ad9f230ce0a230d88c0

https://qiita.com/hidenoritoki/items/9cd972ba102d12faec0e

기본적으로 상술한 두 편의 보도를 보고 좋은 성적을 거두었다.
나는 여기서 세 가지 요점을 소개하고 싶다.

1. IP 주소 설정

일반적으로 Expo에서 앱을 개발할 때 호스트 PC는 expo 서버를 시작하고 터미널의 Expo Go 앱 액세스 앱을 통해 앱을 시작한다.
접근 방법은 터미널이 자신과 같은 네트워크에서 expo 서버가 실행하는 호스트를 찾는 것이다.즉, 터미널과 expo 서버의 로컬 IP 주소(의 네트워크 부분)가 같아야 한다.
그러면 이번에는 expo 서버가 호스트 PC의 docker 용기에서 이동해서 터미널에서 접근하려고 합니다.물론 이번에는 터미널과 expo 서버도 같은 네트워크에 존재해야 한다.
그러나 아무것도 설정하지 않고 하면 터미널에서 expo 서버에 접속할 수 없다.컨테이너는 호스트 PC의 IP 주소를 모르고 컨테이너 자체의(호스트 PC와 무관한) IP 주소인 expo 서버로 운행하기 때문에 터미널과 expo 서버는 같은 네트워크에 있지 않다.

(↑컨테이너 자체 확인 IP주소는 172.22.0.2)

(↑↑아무것도 하지 않으면 컨테이너 자체의 IP 주소가 172.22.0.2이고 expo 서버가 실행 중임을 알 수 있다)
따라서 컨테이너 호스트 PC의 로컬 IP 주소를 알려주고 expo 서버를 그곳에서 운행하도록 한다.구체적으로 docker 용기에서 환경 변수REACT_NATIVE_PACKAGER_HOSTNAME로 호스트 PC의 로컬 IP 주소를 설정합니다.이 환경 변수는 .env 파일에 쓰면 docker-compose up 자동으로 읽힌다.
또 로컬 IP 주소가 이동 등으로 바뀌어 매번 조사 재작성이 어려워 로컬 IP 주소의 취득 처리조개각본에 적어 자동화했다.env 파일을 쓸 수 있다면 매우 편리할 것입니다.단, 참고문에 따르면 이것은 맥OS 의존 기술이니 주의하세요.
이렇게 되면 expo 서버는 호스트 PC의 로컬 IP(192.168.2.104)를 통해 안전하게 운행된다🎉

2. 포트 설정

다음은 포트 설정입니다.기본적으로 호스트와 용기 사이의 포트가 비치면 OK,docker-composie.yml 파일이렇게에 기술하면 됩니다.

ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"

그러나 참고한 글처럼 docker-compose builddocker-compose run 컨테이너에 들어가 expo 서버를 시작하고 터미널부터 방문하면 순조롭게 진행되지 않습니다.
왜 그런가 싶어요docker run 공식 문서와여기 기사.,docker-compose run를 읽었을 때docker-composie.나는 yml에 기술된 포트 정보가 반영되지 않을 것이라는 것을 알았다.(다른 컨테이너와의 포트 충돌 방지 등)
그래서 부모님 얼굴에서 보이는docker-compose up로 만들면이런 명령 예상대로 순조롭게 활동하게 됩니다.🎉

3. Makefile로 지령 1개 완성!!

마지막으로 하나의 지령으로 지금까지의 절차를 단숨에 완성할 수 있도록 Makefile을 제작한다.
Makefile

    expo_sample:
	    chmod +x ./get-local-ip-addr.sh
	    ./get-local-ip-addr.sh
	    docker-compose up -d
	    docker-compose exec expo_sample bash --login
	    

호스트 PC의 로컬 IP를 가져옵니다.엔비에 컨테이너 연결을 시작하는 느낌.make expo_sample에서 수행할 수 있습니다.
컨테이너에 넣은 후expo init your_app_nameexpo 응용의 모형을 제작cd your_app_name한 후expo startexpo 서버를 실행합니다!그런 다음 터미널에서 Expo Go 액세스를 사용하여 어플리케이션을 시작합니다.🎉

또한 로컬에서 파일을 마운트했기 때문에 로컬에서 코드를 바꾸면 프로그램도 다시 마운트됩니다!

신경 쓰이는 곳

컨테이너 안에서 서버를 운행하기 때문인지 expo init과expo start의 동작이 좀 무겁다.PC의 사양에 따라 달라질 수 있습니다.
또한 로컬 IP 주소에서 얻은 조개 스크립트를 MacOS 이외의 시스템에도 사용할 수 있다면 좋겠습니다()

총결산

Docker를 사용하면 기본적으로 명령을 내리지 않아도 expo의 개발 환경을 만들 수 있습니다!나는 수요가 있는지 모르겠지만, 반드시 참고할 수 있을 것이라고 생각한다.
또한, 기사 내용에 오류가 있거나 미비한 부분이 있다면 지적해 주시면 감사하겠습니다.🙇‍♂️

덤

당사는 현역 동대생의 가정교사가 쉽게 찾을 수 있는 가정교사 개인 계약 애플리케이션동대생을 개발하고 운영하고 있습니다.꼭 설치해 보세요!
만약 UIUX에 어떤 건의가 있다면 반드시 제출해 주십시오!