Dockerを思い出す
Dockerについて思い出すために、とりあえず動かしてみました。
参考サイト：Dockerコンテナに依存関係は全て閉じ込めてWebStormで開発 ~ローカルを汚さずにReactやFirebaseの環境構築を簡単に~
前提
- Dockerをインストールしている – Install Docker Engine
Dockerデスクトップアプリで設定を完了するとdockerコマンドが使えるようになりました。
目的
- ローカルPCとDockerコンテナを接続する。
- ローカルPCのコードエディター（今回WebStorm）でDockerコンテナ内のファイルを編集できるようになる
Dockerの設定と起動：docker run
docker run：Dockerイメージに書かれている設定をもとに、仮想サーバー（Dockerコンテナ）をローカルPCに立ち上げる
Ctrl ＋ p -> Ctrl ＋ qで接続したコンテナから抜けることができる
[LOCAL]$ docker run \
-it \
-p 13000:3000 \
-v /Users/hoge/workspaces/docker:/app \
--name node20.18-docker \
-w /app \
node:20.18-bullseye-slimdocker run時に聞かれること
Docs » docker run – Docker-docs-ja
- （-p）ローカルPCで使うポート：Dockerで使うポート
- （-v）同期させるディレクトリのパス
- （–name）コンテナ名。任意の名前でOK
- （-w）コンテナ内でコマンドを実行するディレクトリ（コンテナ内になければ作成される）
- 使用するDockerイメージ：下記の記事を見てnode:16.17.0-bullseye-slimを使うことにしました。→後々の工程でnode20以上が必要だとエラーが出たので、「node:20.18-bullseye-slim」のイメージで作り直しました。
最適な Node.js Docker イメージを選択する – snyk
Vite + TypeScript + React – Zenn
「- it」とは？
公式サイトの説明から「疑似 TTY（pseudo-TTY）」で検索すると色々記事がヒットしましたが、Unixの操作が絡んでいて思ったより難しい話でした。
ttyはUnixのコマンドであること、「-it」は
-i,-tというオプションをセットで使っていることはとりあえず分かりました。以下2点は、DockerのTTYって何? – Zenn と言う記事を見て学んだことです。
docker-compose.ymlにtty:trueと設定をすると/dev/ptsに仮想端末が追加される（ということだと考えられる）- 仮想端末を置いてフォアグラウンドで実行しているプロセスを用意してあげることによって、コンテナが正常終了するのを防ぐ
フォアグラウンドとはバックグラウンドの対となる言葉で、表（画面の1番前）で稼働しているものを指すそうです。
また、コンテナが正常終了すると、コンテナの中に入ってサーバーを立てることができないそうです。
色々書きましたが要約すると、Dockerコンテナは、コンテナを起動させ続けるためのプロセスが存在しないと終了してしまうので、仮想端末（pts）を表で起動していることにさせている…ということだと理解しました。
node:20.18-bullseye-slim
Unable to find image 'node:20.18-bullseye-slim' locally
20.18-bullseye-slim: Pulling from library/node
2a00695bb87a: Download complete
fa0650a893c2: Download complete
bcb9bf7f2545: Download complete
094fc5e5eb8e: Download complete
2df65b02f59c: Download complete
Digest: sha256:c121fcd9656dde8ca373d1aa0b596f95af1764e0b7e6d4a212cbc78775c74c97
Status: Downloaded newer image for node:20.18-bullseye-slim
Welcome to Node.js v20.18.0.
Type ".help" for more information.
> docker runを実行した結果、うまく起動したようです。
プロジェクト作成
新規ターミナルで「docker ps」で起動しているか確認します。
[LOCAL]% docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
84bcd8b341a6 node:16.17.0-bullseye-slim "docker-entrypoint.s…" 3 minutes ago Up 3 minutes 0.0.0.0:13000->3000/tcp node-docker設定通りに起動しているようなので、「docker exec」でコンテナへ接続します。
[LOCAL]$ docker exec -it node20.18-docker /bin/sh
#ここからはDockerコンテナ内でコマンドを実行していることになります。
フレームワーク選び：Expo
参考サイト通りにReactをインストールしようと思っていたのですが、「React フレームワークからひとつを選ぶことをおすすめします。」と案内していたので選ぶことにしました。
Learn React > インストール > React プロジェクトを始める
Next.js、Remix、Gatsby 、、と並んで「Expo（ネイティブアプリ向け）」というのを発見。
最近スマホアプリを作りたいと思っていたので、Expoを使ってみることにしました。
（使う前に「Expo」で検索してみて、おすすめしている方がいることを確認しました。Expoを使うべきか？私の5年間の開発経験からの洞察）
Expoを起動
「node –version」でバージョンを確認し、
「npx create-expo-app@latest [プロジェクト名]」でプロジェクトの雛形を作成します。
# node --version
v20.18.0
# npx create-expo-app@latest quiz
...
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd quiz
- npm run android
- npm run ios # you need to use macOS to build the iOS project - use the Expo app if you need to do iOS development without a Mac
- npm run web
「cd [プロジェクト名]」でプロジェクトフォルダへ移動し、「pwd」でちゃんと移動できているか確認します。
「npx expo start」を実行すると、QRコードが発行されます！すごい。
# pwd
/app/quiz
# npx expo start
...
Starting project at /app/quiz
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █ ██▀▀ ▀▄██ ▄▄▄▄▄ █
█ █ █ █ ▀█ ▀█▄▄█ █ █ █
█ █▄▄▄█ █▀ █▄▀▀▄██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ ▀▄█▄█ █▄▄▄▄▄▄▄█
█▄▄██ ▄▄▀▀█▄█▄▀▄ ▄██ ▀▄▄ ▄█
█▀ ▄█▀ ▄▄▄ ▄█▀█▀ ▀▀ ▄ ▀██
█▀█▀▀▀█▄▄ ▀▀▄▀▄ ▀▄▀▄▀▀▄ ▀██
███▀▄█ ▄ ▀▀ ▄ ▄▄▄ ██▄ ▀███
█▄▄█▄▄▄▄█ █ █▄ ▀▄ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀▀ █▀█▀▀ █▄█ ▀▀▀██
█ █ █ █▄▀▀▄▀▄▄█▄▄ ▄▄▀ █
█ █▄▄▄█ █▀█▀ ▄ ▄▄▄▄ ▀█▀▀ ██
█▄▄▄▄▄▄▄█▄█▄█▄▄█████▄▄▄▄▄▄█
› Metro waiting on exp://127.0.0.1:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Web is waiting on http://localhost:8081
接続できない問題！IPアドレスの設定をする
せっかくQRコードが出たものの、スマホで読み取ると接続エラー、、
ExpoをDocker上で動かしたい！ | React Native+Expo+Docker – Zenn
次回、こちらのサイトを参考に設定していきたいと思います。
DockerFileとかdocker-compose.ymlが登場してきそうです。