web-dev-qa-db-ja.com

"React App"をDockerで作成する

誰かがdockerでcreate-react-appを使用した経験があるかどうか疑問に思っていました。私はそれを次のようなDockerfileでセットアップすることができました：

from node
RUN mkdir /src
WORKDIR /src
ADD package.json /src/package.json
RUN npm install
EXPOSE  3000
CMD [ "npm", "start" ]

そして、次のようなdocker-composeファイルを使用しました：

app:
  volumes:
    - "./app:/src"
  ports:
    - "3000:3000"
    - "35729:35729"
  build: ./app

これにより、コンテナーを起動してアプリを表示できました。ただし、マウントされたボリュームにファイルを保存するときにlivereloadが機能せず、webpackがsrcディレクトリにいくつかの.json.gzipファイルを作成しました。

これを正しく機能させるための提案はありますか？

reactjsdockerwebpackdocker-composelivereload
15
john_ryan

ええ、aholbreichが言ったように、私は自分のマシンでローカルにnpm install/npm startを開発のために使用します。それはとても簡単だからです。おそらくdocker-compose、ボリュームのマウントなどでも可能ですが、セットアップするのは少し面倒かもしれません。

デプロイメントの場合、Dockerfileを非常に簡単に使用できます。これが私が使用しているDockerfileの例です：

FROM node:6.9

# Create app directory
RUN mkdir -p /src/app
WORKDIR /src/app

# to make npm test run only once non-interactively
ENV CI=true

# Install app dependencies
COPY package.json /src/app/
RUN npm install && \
    npm install -g pushstate-server

# Bundle app source
COPY . /src/app

# Build and optimize react app
RUN npm run build

EXPOSE 9000

# defined in package.json
CMD [ "npm", "run", "start:prod" ]

package.jsonにstart:prodオプションを追加する必要があります：

"scripts": {
  "start": "react-scripts start",
  "start:prod": "pushstate-server build",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

CIサービスでテストを実行するには、次のようにします。

docker run <image> npm test

物事が期待どおりに機能することを確認するために、このdockerコンテナーをローカルで実行することを妨げるものは何もありません。

9
metakermit

私は最近、hello-docker-reactという小さなプロジェクトを作成しました。

これは、docker-compose、create-react-app、yarn、ノードイメージ、および小さなエントリポイントスクリプトで作成されています。

ライブリロードは問題なく動作し、問題はまだ発見されていません。

https://github.com/lopezator/hello-docker-react

6
sh4

ここにこれのための良いガイドがあります https://mherman.org/blog/dockerizing-a-react-app/

開発用

# base image
FROM node:9.6.1

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent

# start app
CMD ["npm", "start"]

生産用

# build environment
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.13.9-Alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
2
Ryabchenko Alexander

Create-react-appを使用した開発でdockerを使用しているときに、.envファイルにCHOKIDAR_USEPOLLING=1を追加することでwebpackDevServer構成をオーバーライドできることがわかりました。これにより、ファイル監視が再び機能します。ホストのブラウザページも更新されます。私が発見した唯一のことは、それが自動的にウェブページを開かないことです。

tty: trueをサービスに追加して、元のコンソール出力をターミナルに戻すこともできます。ログ内のコンテナ名のプレフィックスを削除するには、docker-compose up -dを実行した後、次のように実行できます。

docker-compose logs -f --tail=100 client | cut -f2 -d \"|\""
1
Donny Verduijn