1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

dockerで、react-nativeの環境を構築する(expoなし、nativeのreact-native)

Posted at

#はじめに
最近、友達と個人でreact-nativeを使ってアプリ開発をしています。そのときに環境の違いによって余計な時間がかかってしまったというのがあり、dockerを使うことにしました。存在自体は前から知っていたのですが、自分でDockerfileを作ったり、docker-compose.ymlをいじったりするのははじめてだったのでなかなか難儀しました。今回はandroidだけですが、iosでもできるように整備したいですね。

##この環境の強み
react native関係のパッケージ(yarn,npm,node,npx)やadbなどのandroid関係のパッケージがdocker内にほぼすべて入っているので、自分のノートパソコンの環境への依存性がかなり減ります。

##参考にしたgithub
いろいろgithubを見ていたのですが、最終的にreact-native-communityのレポジトリが頻繁に更新されていて使えそうだったのでこれを利用することにしました。(https://github.com/react-native-community/docker-android)

##Dockerfile

#基になるdocker image
FROM reactnativecommunity/react-native-android 

# watchmanとnmapをインストール(nmap は自分の好み)
RUN apt update -qq && apt install -qq -y --no-install-recommends watchman nmap

#work ディレクトリの作成
RUN mkdir /home/react-native
WORKDIR /home/react-native

#パッケージのインストール
#npm install ではなぜかstack over flowのようなエラーがでた
COPY . .
RUN yarn install

##docker-compose.yml

version: "3"
services:
  react-native:
    build: .
    privileged: true
    ports:
      - 8081:8081
    tty: true
    volumes:
      - ".:/home/react-native"
      - "node_modules:/home/react-native/node_modules"

volumes:
  node_modules: # ここでvolumeを定義
    driver: local

##docker-compose
react nativeのルートディレクトリで、docker-compose upをすれば立ち上がります。

#最後に
githubにコードをあげています。
https://github.com/taka1226/my_react_native_docker

1
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?