フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

DockerでReact Native環境を構築する

参考ページ

qiita.com

Dockerfile

FROM amazonlinux:latest

RUN yum update -y

## nodejs
RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash -
RUN yum install nodejs -y
RUN yum -y install wget
RUN wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
RUN yum -y install yarn

## ReactNative
RUN yarn global add expo-cli

WORKDIR /srv/frontend/app

Docker-compose.yaml

version: '3'
services:
  app:
    build: .
    container_name: app
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"
    privileged: true
    volumes:
      - ./frontend:/srv/frontend/app
    command: /sbin/init
    environment:
      TZ: Asia/Tokyo
      REACT_NATIVE_PACKAGER_HOSTNAME: <自分のPCのローカルIPアドレスを指定する>
    tty: true  

dockerビルトと起動

docker-compose build
docker-compose up -d

docker ログイン

docker exec -it app bash
  • expoがインストールされていることを確認する
# expo -V
4.1.3

react-nativeアプリケーションインストール

# expo init <アプリケーション名>
  • blankを指定する
? Choose a template: › - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
❯   blank                 a minimal app as clean as an empty canvas
    blank (TypeScript)    same as blank but with TypeScript configuration
    tabs (TypeScript)     several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal               bare and minimal, just the essentials to get you started
    minimal (TypeScript)  same as minimal but with TypeScript configuration
cd <アプリケーション名>
yarn android

※ yarn iosはエラーが出たので、androidで起動しました。

QRコードを読み込み

  • 初期画面が表示されるところまで確認できた。