Reactjs - docker-compose の糸の問題
私が使用している Docker Compose 環境は、まったく異なる動作をしています。
セットアップは次のとおりです:
docker-compose.prod.yaml front_end:
image: front-end-build
build:
context: ./front_end
dockerfile: front_end.build.dockerfile
nginx:
build:
context: ./front_end
dockerfile: front_end.prod.dockerfile
ports:
- 80:80
- 5000:5000
environment:
- CHOKIDAR_USEPOLLING=true
stdin_open: true
tty: true
depends_on:
- front_end
FROM node:13.12.0-alpine
COPY package.json ./
WORKDIR /srv
RUN yarn install
RUN yarn global add react-scripts
COPY . /srv
RUN yarn build
FROM nginx
EXPOSE 80
COPY --from=front-end-build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d
docker-compose down && docker-compose -f docker-compose.prod.yml up --build --remove-orphans nginx
さまざまな実行でさまざまな理由により、機能しません。
さまざまなエラーの後、Docker システムのプルーンを開始します。これにより、少なくとも「リセット」されます。問題を初期状態に戻します。
次のようなさまざまな問題があります。
糸のインストールには情報が表示されます。ネットワーク接続に問題があるようです。再試行中ですが、続行してさまざまな非推奨/非互換性の警告を吐き出し、最終的に「完了」に到達します。 この後、「中間 c を削除しています」と表示されるまでに通常 60 秒以上かかります。オンテイナー」そして、dockerfile の次のステップに進みます。 場合によっては、ネットワーク エラーだけが発生し、yarn のインストールが失敗してプロセス全体が停止してしまうことがあります。 Yarn install ではネットワーク エラーが表示されない場合がありますが、「パッケージの解決」と「パッケージの解決」の間にさまざまな警告が表示されます。そして「パッケージの取得」ですが、これは正常なことかもしれませんが、意味がないようです。 Yarn install は、このプロセスのどの時点 (インストール完了後、インストール中、さらには Yarn ビルド中も含む) で、スペースが不足していることを報告する可能性があります: エラー 予期しないエラーが発生しました: "ENOSPC: no space left onデバイス、mkdir '/node_modules/fast-glob/package/out/providers/filters'。または同様のもの。私たちが達成できる最も遠いところは、糸のビルドです:
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack-dev-server": "3.11.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:
/node_modules/webpack-dev-server (version: 3.10.3)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack-dev-server" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /node_modules/webpack-dev-server is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls webpack-dev-server in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack-dev-server.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
webpack-dev-server実際には package.json ファイルのどこにも表示されないため、そこを変更する必要はありませんが、それ以外の場合は、これらの 4 つの手順を試しました。そして次に実行すると、「スペースが残っていません」というメッセージが表示されます。エラー。
これとはほぼ別に、何らかの理由で、yarn ビルドの出力がまったくなく、「キャッシュの使用」さえも実行されない場合を除いて、すべてのステップが実行される場合があることも述べておきます。そしてもちろん、これにより、nginx コンテナーはビルド ファイルを取得しようとして失敗します。とか、正直、久しぶりです。しかし、nginx に進むと何が起こるかというと、「Building nginx」と表示されることです。 nginx dockerfile の最初のステップに到達するまでに、数分という途方もない時間がかかります。
しかし問題はフロントエンドのビルドが非常に大きいため、nginx のことは基本的に別の問題になります。
私が経験しているのと同じようなことを経験した (そして解決した) 人はいますか?
------------------------
ここで試行しているのは、Docker 17.05 より前の古いスタイルを使用したマルチステージ ビルドです。
本番の Dockerfile はフロントエンド ビルド イメージに依存しているため、「Building nginx」というメッセージが表示されます。画像の準備ができるまで。
これで、両方の dockerfile を 1 つに圧縮できます。
Dockerfile
FROM node:13.12.0-alpine AS front-end-build
WORKDIR /srv
COPY package.json ./
RUN yarn install
RUN yarn global add react-scripts
COPY . /srv
RUN yarn build
FROM nginx
EXPOSE 80
COPY --from=front-end-build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d
docker-compose.yml
nginx:
build: front_end/
ports:
- 80:80
- 5000:5000
environment:
- CHOKIDAR_USEPOLLING=true
stdin_open: true
tty: true
奇妙な動作に関しては、package.json を /package にコピーしていることを確認してください。json を開き、WORKDIR を /srv (空) に切り替えて、yarn install を実行した直後に行います。
COPY オーダーを WORKDIR の後に移動してみてください。
WORKDIR /srv
COPY package.json ./
https://docs.docker.com/develop/develop-images/multistage-build/
4
ありがとう、素晴らしい答えですね。ただし、実際にはそれらを別のコンテナーとして使用したいと考えています。実際には、フロントエンドのビルド作業をすべてスキップしたいのですが、yaml 内の fe-build に対する nginx の依存関係をコメント アウトし、nginx dockerfile 内の COPY --from 行をコメント化します。考えは？あなたが言及したことを考慮すると、これは単に悪い考えなのでしょうか?
– ジョナサン・タズマン2020 年 9 月 4 日 20:12
しかし、それを行うと、アプリケーション コードのないバニラの nginx コンテナだけが得られます。
– MGP2020 年 9 月 4 日 21:01
そのような場合、私が望むのはこれです。時々、フラスコのバックエンドをホストするために nginx が必要ですが、実行されていますローカル開発サーバー上で反応フロントエンドを実行しているため、すべてのフロントエンドの構築に時間をかけたくない
– ジョナサン・タズマン2020 年 9 月 4 日 21:04
その場合、各コンテナに 1 つの責任を割り当て、それに応じて 1 つのコンテナを Flask バックエンド用に、もう 1 つのコンテナをフロントエンド用に使用し、現時点で必要なコンテナを起動します。環境変数を使用すると、コンテナ間の疎結合を実現し、実行中のコンテナをローカル サーバーにフックできます。
– MGP2020 年 9 月 5 日7:46