Open9
Docker ContainerでReact環境を作る
前提
- H/W : Mac mini 2023 / Apple M2 Pro
- OS : macOS Sonoma
- Docker : Docker version 24.0.6, build ed223bc インストール済
ディレクトリを作成する
- sharl@macMini ~ %
mkdir /Users/sharl/Public/docker-react;cd /Users/sharl/Public/docker-react
- sharl@macMini docker-react %
mkdir app
Dockerfileとdocker-compose.ymlを作成する
- sharl@macMini docker-react %
vim Dockerfile
FROM node:lts
WORKDIR /usr/src/app
- sharl@macMini docker-react %
vim docker-compose.yml
version: "3.9"
services:
app:
container_name: app
build:
context: .
dockerfile: Dockerfile
volumes:
- type: bind
source: ./app
target: /usr/src/app
command: sh -c "cd react-app && yarn start"
ports:
- 3000:3000
stdin_open: true
- sharl@macMini docker-react %
tree
.
├── Dockerfile
├── app
└── docker-compose.yml
2 directories, 2 files
イメージをビルドする
- sharl@macMini docker-react %
docker-compose build
実行結果
[+] Building 44.8s (7/7) FINISHED docker:desktop-linux
=> [app internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 73B 0.0s
=> [app internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [app internal] load metadata for docker.io/library/node:lts 3.2s
=> [app auth] library/node:pull token for registry-1.docker.io 0.0s
=> [app 1/2] FROM docker.io/library/node:lts@sha256:5f21943fe97b24ae1740da6d7b9c56ac43fe3495acb47c1b232b0a352b02a25c 41.3s
=> => resolve docker.io/library/node:lts@sha256:5f21943fe97b24ae1740da6d7b9c56ac43fe3495acb47c1b232b0a352b02a25c 0.0s
=> => sha256:8024d4fb53b2455f66d49b7ee72eb3cad5074043578238b796a9879955946a88 49.61MB / 49.61MB 16.8s
=> => sha256:3d826ee8aa65e56e167f0e27fa65cfc065687a7ac6c360787d5940d8b51f0cf1 23.58MB / 23.58MB 5.6s
=> => sha256:5f21943fe97b24ae1740da6d7b9c56ac43fe3495acb47c1b232b0a352b02a25c 1.21kB / 1.21kB 0.0s
=> => sha256:58e9faee79d67089d736b69181651dad9940ec4dd88c0c4ba43723a39baf47fc 2.00kB / 2.00kB 0.0s
=> => sha256:f4181ec70f8cf1f61abfe31b6eb9dedef2169aa7751fc39950c1d72e4f9b0c28 7.54kB / 7.54kB 0.0s
=> => sha256:198068495d09b6865e75ce28d5d5d5de39897b8325ada63ba80eca884ad5666b 63.99MB / 63.99MB 16.2s
=> => sha256:509db9a897ae5a94cad05bcf48605637fbf3f79733e8bf8c317b6babe3de1dbd 202.45MB / 202.45MB 35.0s
=> => sha256:cd10c9e0405af451c4f2040ed1c64667d33b6a2fd82142b7f2a419e9ffc7a09e 3.37kB / 3.37kB 16.8s
=> => extracting sha256:8024d4fb53b2455f66d49b7ee72eb3cad5074043578238b796a9879955946a88 1.6s
=> => sha256:b52ed1aec99041edd396c35830cfb92b0a01b8299b19d5a60763ce42faaf1644 2.21MB / 2.21MB 18.0s
=> => sha256:a0814fa8cc5cc5b9a2d3e4fde982b6e1aa82c68c45444cffed5985e8c80ab034 47.83MB / 47.83MB 25.8s
=> => sha256:e5c38fed57f35d2682d3e179ec24acb6644ec49536b1a20fa24d5e4506c7fc31 451B / 451B 18.4s
=> => extracting sha256:3d826ee8aa65e56e167f0e27fa65cfc065687a7ac6c360787d5940d8b51f0cf1 0.4s
=> => extracting sha256:198068495d09b6865e75ce28d5d5d5de39897b8325ada63ba80eca884ad5666b 1.8s
=> => extracting sha256:509db9a897ae5a94cad05bcf48605637fbf3f79733e8bf8c317b6babe3de1dbd 4.4s
=> => extracting sha256:cd10c9e0405af451c4f2040ed1c64667d33b6a2fd82142b7f2a419e9ffc7a09e 0.0s
=> => extracting sha256:a0814fa8cc5cc5b9a2d3e4fde982b6e1aa82c68c45444cffed5985e8c80ab034 1.5s
=> => extracting sha256:b52ed1aec99041edd396c35830cfb92b0a01b8299b19d5a60763ce42faaf1644 0.0s
=> => extracting sha256:e5c38fed57f35d2682d3e179ec24acb6644ec49536b1a20fa24d5e4506c7fc31 0.0s
=> [app 2/2] WORKDIR /usr/src/app 0.2s
=> [app] exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:1448d54993fd004aed67f91a9b257d50ce67951e537fdc9a25289faab64d4441 0.0s
=> => naming to docker.io/library/docker-react-app
- sharl@macMini docker-react %
docker images docker-react-app
REPOSITORY TAG IMAGE ID CREATED SIZE
docker-react-app latest 1448d54993fd 24 minutes ago 1.1GB
プロジェクトを作成する
- sharl@macMini docker-react %
docker-compose run --rm app sh -c 'npx create-react-app react-app --template typescript'
実行結果
[+] Building 0.0s (0/0) docker:desktop-linux
[+] Creating 1/0
✔ Network docker-react_default Created 0.0s
[+] Building 0.0s (0/0) docker:desktop-linux
Need to install the following packages:
create-react-app@5.0.1
- Ok to proceed? (y)
y
実行結果
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Creating a new React app in /usr/src/app/react-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
added 1461 packages in 2m
242 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 47 packages, removed 1 package, and changed 2 packages in 7s
246 packages are looking for funding
run `npm fund` for details
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
Removing template package using npm...
removed 1 package, and audited 1507 packages in 1s
246 packages are looking for funding
run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
at checkExecSyncError (node:child_process:890:11)
at execSync (node:child_process:962:15)
at tryGitCommit (/usr/src/app/react-app/node_modules/react-scripts/scripts/init.js:62:5)
at module.exports (/usr/src/app/react-app/node_modules/react-scripts/scripts/init.js:350:25)
at [eval]:3:14
at Script.runInThisContext (node:vm:122:12)
at Object.runInThisContext (node:vm:296:38)
at node:internal/process/execution:83:21
at [eval]-wrapper:6:24 {
status: 128,
signal: null,
output: [ null, null, null ],
pid: 434,
stdout: null,
stderr: null
}
Removing .git directory...
Success! Created react-app at /usr/src/app/react-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd react-app
npm start
Happy hacking!
npm notice
npm notice New minor version of npm available! 10.1.0 -> 10.2.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.3
npm notice Run npm install -g npm@10.2.3 to update!
npm notice
- sharl@macMini docker-react %
tree -L 2
.
├── Dockerfile
├── app
│ └── react-app
└── docker-compose.yml
3 directories, 2 files
コンテナを起動する
- sharl@macMini docker-react %
docker-compose up -d
[+] Building 0.0s (0/0) docker:desktop-linux
[+] Running 1/1
✔ Container app Started
- sharl@macMini docker-react %
docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
2267f367c177 docker-react-app "docker-entrypoint.s…" 7 minutes ago Up 7 minutes 0.0.0.0:3000->3000/tcp app
- sharl@macMini docker-react %
curl http://localhost:3000
実行結果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script defer src="/static/js/bundle.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
- Webブラウザ : http://localhost:3000
Docker Hubにプッシュする
- sharl@macMini docker-react %
docker login -u teruroomuser
- Password:
himitsu
Login Succeeded
- ssharl@macMini docker-react %
docker tag docker-react-app teruroomuser/docker-react-app:v1.0
- sharl@macMini docker-react %
docker push teruroomuser/docker-react-app:v1.0
実行結果
The push refers to repository [docker.io/teruroom11/docker-react-app]
47003a59c8dd: Pushed
3983a69aa132: Mounted from library/node
820b399e25de: Mounted from library/node
0ae8079b1dde: Mounted from library/node
fc5a58d69c68: Mounted from library/node
b136eed5154e: Mounted from library/node
1ba9edd144f8: Mounted from library/node
6584cfb23706: Mounted from library/node
40d80559c6a4: Mounted from library/node
v1.0: digest: sha256:8439b1ec75cd1f570bd3816129e04f740ccfef5d198d4644eec3c028046f8f0c size: 2211
Docker Hubからプルする
- 端末 : MacBook Pro 2017
- OS : Ventura 13.4.1
- (base) macpro:~ sharland$
/Users/sharland/Public/docker-react;cd /Users/sharland/Public/docker-react
- (base) macpro:docker-react sharland$
open -a Docker
- (base) macpro:docker-react sharland$
docker pull teruroomuser/docker-react-app:v1.0
実行結果
v1.0: Pulling from teruroomuser/docker-react-app
8024d4fb53b2: Pull complete
3d826ee8aa65: Pull complete
198068495d09: Pull complete
509db9a897ae: Pull complete
cd10c9e0405a: Pull complete
a0814fa8cc5c: Pull complete
b52ed1aec990: Pull complete
e5c38fed57f3: Pull complete
7a94e36e3aa4: Pull complete
Digest: sha256:8439b1ec75cd1f570bd3816129e04f740ccfef5d198d4644eec3c028046f8f0c
Status: Downloaded newer image for teruroom11/docker-react-app:v1.0
docker.io/teruroom11/docker-react-app:v1.0
- (base) macpro:docker-react sharland$
docker images teruroomuser/docker-react-app
REPOSITORY TAG IMAGE ID CREATED SIZE
teruroomuser/docker-react-app v1.0 1448d54993fd 2 hours ago 1.1GB
プルしたイメージを実行する
- (base) macpro:docker-react sharland$
docker run teruroomuser/docker-react-app:v1.0
WARNING: The requested image's platform (linux/arm64/v8) does not match the detected host platform (linux/amd64) and no specific platform was requested