让我们使用Docker和docker-compose来创建一个React容器吧！

1 年 ago

2 minutes

首先

.gitignore

创建了。
目录结构如下。

tree
.
├── .gitignore
├── Dockerfile
└── docker-compose.yml

创建必要的文件。

建立所需的文件。

生成所需的文件。

Dockerfile（镜像文件）

这次将使用NodeJS 16.17.0的Docker镜像创建。这次的工作目录将设置为/code。

FROM node:16.17.0-bullseye
WORKDIR /code
# 先にpackage.jsonとpackage-lock.jsonをマウントさせる
COPY ./app/package*.json /code
RUN npm install

docker-compose.yml 文件

version: '3.8'
services:
  # サービス名はfront
  front:
    # コンテナ名はフロント
    container_name: front
    # ビルドコンテキストはカレントディレクトリ
    build:
      context: .
      dockerfile: Dockerfile
    # カレントディレクトリ内の`/app`のファイル・フォルダをコンテナにマウントします
    volumes:
      - ./app:/code
      # mode_modules用の永続化Volumeを作成して2回目以降のnode_modulesの呼び出しを高速化
      - node_modules_volume:/app/node_modules
    # npmを使って起動する
    command: sh -c "npm start"
    ports:
      # デフォルトの3000ポートを使う
      - "3000:3000"
    # ホットリロードを有効化
    environment:
      - CHOKIDAR_USEPOLLING=true
volumes:
  node_modules_volume:

.gitignore

我会从下面粘贴复制NodeJS的.gitignore。

我们来实际尝试制作一下吧！

今回はappという新しいアプリケーションを作成します
その際はサービス名(front)を指定する必要があります
npx create-react-appコマンドを使うと作成できます
後ろに作成するアプリケーション名(今回はapp)を指定します

docker-compose run --rm front sh -c "npx create-react-app app"

少なくとも3,4分は作成に時間がかかるので気長に待ちましょう

npx: installed 67 in 7.283s
# コンテナの/code/app内にReactのアプリケーションが作成されます
Creating a new React app in /code/app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

アプリケーションの作成に成功すると以下のようなファイル構成になるかと思います

tree
.
├── .gitignore
├── Dockerfile
├── README.md
├── app
│   ├── .gitignore
│   ├── README.md
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   └── src
└── docker-compose.yml

このようなログが出ますが、docker-compose.ymlのcommandにすでに記載されているのでdocker-compose up -dを実行すれば下記のコマンドは実行されます

We suggest that you begin by typing:

  cd react-sample
  npm start

Happy hacking!

让它启动起来！

docker-compose up -d

执行这个命令来启动React容器。

front | 
front | > app@0.1.0 start /code/app
front | > react-scripts start
front | 
front | (node:25) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
front | (Use `node --trace-deprecation ...` to show where the warning was created)
front | (node:25) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
front | Starting the development server...
front | 
front | Compiled successfully!
front | 
front | You can now view app in the browser.
front | 
front |   Local:            http://localhost:3000
front |   On Your Network:  http://192.168.16.2:3000
front | 
front | Note that the development build is not optimized.
front | To create a production build, use npm run build.
front | 
front | webpack compiled successfully

首先

创建必要的文件。

Dockerfile（镜像文件）

docker-compose.yml 文件

.gitignore

我们来实际尝试制作一下吧！

让它启动起来！

请参考