Open9

Docker ContainerでReact環境を作る

Teru roomTeru room

前提

  • H/W : Mac mini 2023 / Apple M2 Pro
  • OS : macOS Sonoma
  • Docker : Docker version 24.0.6, build ed223bc インストール済
Teru roomTeru room

ディレクトリを作成する

  • sharl@macMini ~ %
mkdir /Users/sharl/Public/docker-react;cd /Users/sharl/Public/docker-react
  • sharl@macMini docker-react %
mkdir app
Teru roomTeru room

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
Teru roomTeru room

イメージをビルドする

  • 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
Teru roomTeru room

プロジェクトを作成する

  • 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
Teru roomTeru room

コンテナを起動する

  • 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>
Teru roomTeru room

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
Teru roomTeru room

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
Teru roomTeru room

プルしたイメージを実行する

  • (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