TL;DR
Docker Desktop （docker デーモン）を起動させておいて…
zsh
% git clone git@github.com:sprout2000/cra.git
% cd cra
% docker-compose up cra
localhost:3000 を開きましょう。これだけです。
手順
1. Docker のインストール
公式ドキュメントに従ってインストールしましょう。
Windows 版のほうはちょっとややこしいですね。
macOS 版は Apple Silicon 向けも用意されてます。
2. React + TypeScript アプリを作成
おなじみ create-react-app を利用します。
zsh
% npx create-react-app myapp --template typescript --use-npm
npx: 67個のパッケージを3.091秒でインストールしました。
Creating a new React app in /Users/qiita/Downloads/myapp.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
# ~ 省略 ~
We suggest that you begin by typing:
cd myapp
npm start
Happy hacking!
% cd myapp
3. docker-compose.yml の作成
プロジェクトフォルダ (myapp) 直下に docker-compose.yml を作成します。
docker-compose.yml
version: '3.8' #1
services: #2
myapp: #3
container_name: myapp #4
image: node:lts #5
volumes: #6
- ./:/usr/src/app
working_dir: /usr/src/app #7
command: bash -c 'npm install && npm start' #8
ports:
- '3000:3000' #9
#1: docker-compose.yml のシンタックスバージョンを指定します。
#2: このエントリ以下が1つのサービス (Node.js サーバ) となります。
#3: このエントリ以下がコンテナ myapp の内容となります。
#4: コンテナの名前です。
#5: コンテナを作成するベース（ここでは nodejs の安定版）を指定します。バージョンの一覧はこちら。
#6: ローカル側のパス ./ をコンテナ側のパス /usr/src/app にマウントします。
#7: コンテナ実行時のカレントディレクトリです。通常は #6 のコンテナ側パスと同じです。
#8: 上記のカレントディレクトリで実行するコマンドを指定します。
#9: ローカル側のポート 3000 へ、コンテナ側のポート 3000 (create-react-app の出力先) を晒します。
4. .dockerignore の作成
とりあえず、ここでは node_modules のみを指定しておきます。
.dockerignore
node_modules
5. NPM スクリプトのアップデート
このままでは ERR_EMPTY_RESPONSE となってしまうため、NPMスクリプトの start をアップデートします。
package.json
"scripts": {
- "start": "react-scripts start",
+ "start": "HOST='0.0.0.0' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
create-react-app を使用していない場合の例
package.json
"scripts": {
"start": "cross-env NODE_ENV=\"development\" webpack serve --host 0.0.0.0",
}
6. docker-compose の実行
では、さっそくコンテナを作成しましょう。
zsh
% docker-compose up myapp
Creating network "myapp_default" with the default driver
Creating myapp ... done
Attaching to myapp
# ~ 中略 ~
myapp |
myapp | ℹ ｢wds｣: Project is running at http://172.30.0.2/
myapp | ℹ ｢wds｣: webpack output is served from
myapp | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
myapp | ℹ ｢wds｣: 404s will fallback to /
myapp | Starting the development server...
myapp |
myapp | Compiled successfully!
myapp |
myapp | You can now view myapp in the browser.
myapp |
myapp | Local: http://localhost:3000
myapp | On Your Network: http://172.30.0.2:3000
myapp |
myapp | Note that the development build is not optimized.
myapp | To create a production build, use npm run build.
myapp |
Compiled successfully! と表示されたので、http://localhost:3000 をブラウザで開きます。
ちなみにダッシュボード (GUI) から見るとこんな感じです。
7. コンテナを停止する
ターミナルから Ctrl+C を入力して React プロジェクトが停止するのを待ちます。
zsh
^C # C-c を打鍵
Gracefully stopping... (press Ctrl+C again to force)
Stopping myapp ... done
docker-compose down によりコンテナも停止します。
bash
% docker-compose down
Removing myapp ... done
Removing network myapp_default
% docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
%
8. Docker イメージの作成
Dockerfile の作成
プロジェクトフォルダ直下に Dockerfile を作成します。
Dockerfile
FROM node:lts
ENV NODE_ENV=development
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "./"]
RUN npm install
COPY . .
CMD [ "npm", "start" ]
Docker イメージのビルド
-t オプションでイメージ名を指定してカレントディレクトリ（プロジェクトフォルダ直下）をイメージにビルドします。
zsh
% docker build -t your_Docker_ID/react-typescript .
[+] Building 2.4s (11/11) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 37B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 35B 0.0s
=> [internal] load metadata for docker.io/library/node:lts 2.3s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load build context 0.0s
=> => transferring context: 4.89kB 0.0s
=> [1/5] FROM docker.io/library/node:lts@sha256:cd98882c1093f758d09cf6821dc8f96b241073b38e8e 0.0s
=> CACHED [2/5] WORKDIR /usr/src/app 0.0s
=> CACHED [3/5] COPY [package.json, package-lock.json*, ./] 0.0s
=> CACHED [4/5] RUN npm install 0.0s
=> CACHED [5/5] COPY . . 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:6bf1e123420057bb0d7bed5975292bfeee86afc79421f21be06a111d72f0dab5 0.0s
=> => naming to docker.io/your_Docker_ID/react-typescript 0.0s
docker images コマンドで結果を確認しましょう。
zsh
% docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
your_Docker_ID/react-typescript latest 6bf1e1234200 About an hour ago 1.15GB
node lts e56173de674c 7 days ago 891MB
9. Docker Hub へプッシュする
コンテナの作成
上でビルドした Docker イメージからコンテナを作成・起動します。ここではコンテナ名をとりあえず tmp としました。
zsh
% docker run --name tmp -it react-typescript
ここでは Ctrl-C の打鍵でコンテナを停止し、docker ps コマンドでコンテナリストを確認します。
zsh
^C # C-c を打鍵
% docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
695a27478d59 your_Docker_ID/react-typescript "docker-entrypoint.s…" 17 seconds ago Exited (0) 2 seconds ago tmp
コミット＆プッシュする
上の tmp コンテナをコミットします。
zsh
% docker commit tmp your_Docker_ID/react-typescript
sha256:8bff0f5c9c92f860325851ac34833805a8b73d3181f1475aa11c56284920c161
Docker Hub へプッシュします。
zsh
% docker push your_Docker_ID/react-typescript
Using default tag: latest
The push refers to repository [docker.io/your_Docker_ID/react-typescript]
3aa1e566a740: Pushed
77f2fe7e8652: Pushed
87d5881168b3: Pushed
8748979a9069: Pushed
9669ad6bcaf1: Pushed
1bf2951bb822: Pushed
7c4f55699c53: Pushed
c7489ce81cd6: Pushed
256a3537bce4: Pushed
d045ade65a18: Pushed
4ec3e914cc11: Pushed
1389148f1f70: Pushed
4b38ea7a29a5: Pushed
af83471d3f6a: Pushed
latest: digest: sha256:f80e2a14c368c92b82f0c11d186628c0123b7b3e41dd6bed9792b9656d44f52c size: 3265
ダッシュボードからもリモートにプッシュされたイメージを確認できると思います。
10. コンテナやイメージの削除
もしローカルに残ったコンテナやイメージが不要な場合は削除します。
zsh
# コンテナの削除
% docker rm tmp
tmp
# 確認
% docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
# イメージの削除
% docker rmi your_Docker_ID/react-typescript
Untagged: your_Docker_ID/react-typescript:latest
Untagged: your_Docker_ID/react-typescript@sha256:f80e2a14c368c92b82f0c11d186628c0123b7b3e41dd6bed9792b9656d44f52c
Deleted: sha256:dee220131dc2abeb6b0f0942ce4e66125e5ab78e61ec8168718990d169a840ce
Deleted: sha256:84e543788cc5d438f6fe3e324c45c5aecb8a9bf5c20d034b8d059f261cc2c770
Deleted: sha256:6bf1e123420057bb0d7bed5975292bfeee86afc79421f21be06a111d72f0dab5
# 確認
% docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
node lts e56173de674c 7 days ago 891MB
参考にさせていただきました
↧