VSCODEとDockerを用いたExpoの開発

私は生産性のフリークです.私は自分のdev環境を最も予測しやすくしたいので、簡単に同僚と共有できます.VSCodeとDockerベースの開発環境を使っている記事を読むことができます.https://blog.mandraketech.in ). 以前のすべてのケースでは、サーバー側で動作しているので、nodejsは、主要なターゲットです.
私はまた、リモートコンテナベースの開発環境を作成するファンです.これにより、

私の古いインテルi 3プロセッサーでCPUを殺すことなく走る複数の環境を持ってください

私がデジタルオーシャン/AWS EC 2上でDockerホストを走らせるのを許します、そして、したがって、同僚

それで、私はNodeJSとVSCodeベースの環境で私の経験に基づいて、ゼロから始めました.
自分のためにディレクトリを作りましょう.ディレクトリの名前はDockerデスクトップダッシュボードで見たい名前でなければなりません.例えば、hello-app-devこの投稿からのすべてのコードをhttps://github.com/navneetkarnani/vscode-expo-starter

Dockerfileの作成

最初の段階は、我々が実行したいすべてのツールを持っているDockerイメージを作成することです.この場合、reactnative、EXPO CLI、NODEJS、typescriptとeslintがインストールされたイメージが欲しいです.そこで、ノード16から始めて、以下のようにしました.
ファイルを作成するDockerfile , 下記の内容で

# [Choice] Node.js version: 16, 14, 12
FROM node:16

# init for VS Code
RUN mkdir -p /root/workspace /root/.vscode-server/extensions 

# Install eslint typescript expo
RUN npm install -g npm@latest
RUN npm install -g eslint typescript expo-cli @expo/ngrok@^4.1.0
RUN node --version && npm --version

CMD /bin/sh -c "while sleep 86000; do :; done"

あなたは、私があることに気づくでしょう@expo/ngrok もインストール.なぜなら、私たちは2010年にエキスポを開始したいからですtunnel コマンドモードから直接モードではなく、LANモードで起動し、スイッチを入れます.ですから、今のところ無視してください.

Dockerの作成ファイルの作成

docker compose ストレージ/ボリュームおよびその他のカスタマイズを必要とする完全な環境を定義することができます.私の意図は完全にリモートで有効になった環境を構築することですので、我々はすべてのコードをDockerボリュームに保存します.このように、ホストへの参照はありません.
ファイルを作成するdocker-compose.yml , 以下の内容に従います.

services:
  expo-dev:
    build:
      dockerfile: ./Dockerfile
    volumes:
      - code:/root/workspace
volumes:
  code: {}

これにより、以下のコマンドを実行することができます.docker compose up -d環境の動作を確認します.しかし、我々はまだしていません.そうすればきれいにしてください.docker compose down --remove-orphans -v

Vistaのリモートコンテナを使用して

あなたがVSCode機能の詳細な理解に興味があるならば、タフでない必須の読書、ここで読んでください:https://code.visualstudio.com/docs/remote/create-dev-container
ファイルを作成する.devcontainer.json , 次のコンテンツを使用します.

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.191.0/containers/docker-existing-docker-compose
// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
{
    "name": "expo-dev",
    "dockerComposeFile": [
        "docker-compose.yml"
    ],
    "service": "expo-dev",
    "workspaceFolder": "/root/workspace",

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    "forwardPorts": [ 19000, 19001, 19002 ],
}

より詳細な設定については、より前の設定で、Git repo
私がここで呼ぶ1つの点、devcontainerの「転送ポート」の使用.の代わりにJSONdocker-compose.yml .
…の目的ports にdocker-compose.yml ポートをコンテナが動作しているホストにバインドすることです.に対してforwardPorts メカニズムはVSコードインフラストラクチャを使用してトラフィックを進めます.
違いは、コンテナがホスト上の指定されたポートをロックしていないことです.これは、複数の環境をサイドバイサイドで実行することができます.さらに、リモートDockerホストを使用するとき、ファイアウォールポートを開く必要はありません.

VSコード付きコンテナの起動

我々は今行く準備ができている.あなたのマシンにVSコードをインストールしてください Remote - Containers 拡張モジュールをインストールします.また、検索することができますms-vscode-remote.remote-containers 拡張.
さて、上記のファイルを含むフォルダをVSコードで開きます.タイプミスで端末からのどちらかcode . または、ちょうどあなたがそうしなければならないように、フォルダを開く.
コードは、それがあなたを見つけることをプロンプトDev Container configuration file . をクリックしてReopen in Container .

または、代わりに、あなたはCommand Palette 使用F1 キーと検索Reopen in Container . 上記のファイルのいずれかに変更を加える場合は、Rebuild and reopen in Container .

エキスポから始める

ご承知のようにcode ボリュームは/root/workspace フォルダ.それで、あなたはVSコードでそのフォルダを開く必要があります.与えられた.devcontainer.json ファイルをデフォルトで開く必要があります.
端末を起動し、同じフォルダにあることを確認します.
テスト用のスタータープロジェクトを生成しますhello .
ランexpo init hello 端末で.あなたの選択のテンプレートを選択します(私はタイプスクリプトのものを好みます).プロセスが完了するまで待つ.

ランニング・エキスポ

アプリを実行する前に、確認してください Expo Go application あなたの開発電話にインストールされます.
端末では、hello フォルダと実行expo start --tunnel . ブラウザはPackagerコンソールで開き、Tunnel 選択したモード.そうでなければ、何かが正しくない.メッセージ私と我々はそれを把握しようとします.
あなたは、ターミナルでだけでなく、ブラウザでQRコードが表示されます.それをスキャンし、エキスポGOを使用して開く必要があります.

総括

我々はこのポストで何を成し遂げましたか
マシン上のローカルコンポーネントとしてDocker CLIだけで、EXPOの開発環境を構築することができます.この環境はDockerデスクトップ、またはDockerホストがリモートで実行されているマシンで実行できます.オプションのロード.これはAWS Fargateフレンドリーです.
使用するVSコードRemote Docker host
Digital Ocean Running remote Docker host
AWS doc on running docker in EC2
このブログはもともとNavneet Karnaniによって出版されました[email protected] ) 彼のブログでhttps://blog.mandraketech.in/developing-on-expo-with-ios-using-vscode-and-docker