質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Reactのライブラリでインポートエラーが出てしまう

senseIY
senseIY

総合スコア277

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0リアクション

0クリップ

278閲覧

投稿2022/08/28 23:44

編集2022/08/29 00:32

前提

こちらの記事を参考にディレクトリ構造を書き換えて、docker comopse upしたところ、全てのライブラリでインポートエラーが出てしまいました。ですが、コンポーネントをインポートする際にはエラーが出ていないので、恐らくですが、package.jsonが何らかの理由で読み込まれていないことが原因かと予想していますが、どうすれば対処できるのか分かりません。

ディレクトリ構造

イメージ説明

Dockerfile(Rails)

Docker

FROM ruby:3.1.2-buster RUN apt-get update && apt-get install -y curl apt-transport-https wget && \ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs default-mysql-client yarn ENV APP_PATH /myapp RUN mkdir $APP_PATH WORKDIR $APP_PATH COPY Gemfile $APP_PATH/Gemfile COPY Gemfile.lock $APP_PATH/Gemfile.lock RUN bundle config set force_ruby_platform true RUN gem install bundler RUN bundle install VOLUME /tmp # Add a script to be executed every time the container starts. COPY entrypoint.sh /usr/bin/ RUN chmod +x /usr/bin/entrypoint.sh ENTRYPOINT ["entrypoint.sh"] CMD ["rails", "server"]

Dockerfile(frontend nginx)

Docker

FROM node:16-alpine as build WORKDIR /home/node/app COPY ./app /home/node/app RUN yarn RUN yarn run build FROM nginx:alpine RUN rm -f /etc/nginx/conf.d/* COPY --from=build /home/node/app/build /var/www ADD ./nginx.conf /etc/nginx/conf.d/ CMD /usr/sbin/nginx -g 'daemon off;' -c /etc/nginx/nginx.conf

docker-compose.production.yml

yml

version: '3.3' services: db: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: password ports: - '3306:3306' command: --default-authentication-plugin=mysql_native_password volumes: - db-data:/var/lib/mysql api: build: context: ./backend/ dockerfile: Dockerfile volumes: - ./backend:/myapp - bundle:/usr/local/bundle depends_on: - db frontend: build: context: ./backend/frontend/ dockerfile: Dockerfile ports: - "3000:80" volumes_from: - api depends_on: - api volumes: db-data: bundle:

nginx.conf

j

upstream api { server unix:/myapp/tmp/sockets/puma.sock; } server { listen 80; server_name localhost:3000; charset utf-8; root /var/www/; index index.html index.htm; location / { try_files $uri /index.html; } location /api/v1 { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_pass http://api; } error_page 500 502 503 504 /500.html; client_max_body_size 4G; keepalive_timeout 10; }

package.json

json

{ "name": "app", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", "@material-ui/lab": "^4.0.0-alpha.61", "@material-ui/styled-engine": "^5.0.0-alpha.11", "@mui/icons-material": "^5.8.4", "@mui/material": "^5.10.0", "@mui/styles": "^5.9.3", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "@types/axios": "^0.14.0", "@types/jest": "^28.1.7", "@types/js-cookie": "^3.0.2", "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@types/react-router-dom": "^5.3.3", "@types/styled-components": "^5.1.26", "@types/wavesurfer.js": "^6.0.3", "add": "^2.0.6", "axios": "^0.27.2", "axios-case-converter": "^0.9.0", "intro.js": "^6.0.0", "intro.js-react": "^0.6.0", "js-cookie": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-select": "^5.4.0", "rooks": "^6.4.2", "styled-components": "^5.3.5", "typescript": "^4.4.2", "wavesurfer.js": "^6.2.0", "web-vitals": "^2.1.0", "yarn": "^1.22.19" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "jest", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@babel/core": "^7.18.10", "@babel/preset-env": "^7.18.10", "@babel/preset-typescript": "^7.18.6", "babel-jest": "^28.1.3", "jest": "^28.1.3", "jest-environment-jsdom": "^28.1.3", "ts-jest": "^28.0.8" } }

考察など

・package.jsonにインポートするライブラリは入っています。
・ディレクトリ構造を書き換える前(nginxを使っておらず、backend frontendが同じディレクトリに存在していた時)
・検索すると、コンポーネントのエラーについてはヒットするが、ライブラリのインポートについてのエラーで参加になりそうなものはまだ見つけられていない
・開発環境で起こっている(*本番環境もこれでデプロイ)
・何かしらアドバイスがあればよろしくお願いいたします。不備があれば追記いたします。

追記

今気づきましたが、node_moduleがないみたいです。なのでインストールしようと思ったのですが、

$ docker compose -f docker-compose.production.yml exec frontend yarn OCI runtime exec failed: exec failed: unable to start container process: exec: "yarn": executable file not found in $PATH: unknown

このようなエラーが出てしまいました。現在デバッグ中です

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2022/08/29 03:23

参考にした記事には、Dockerfile(フロントエンド) について、 > ここでのポイントはマルチステージビルドを行なっていることです。 > 1〜5行目でローカルのReactのソースコードをビルド。ここで生成されたものをnginxコンテナの/var/wwwにコピーすることで、Nginx上でReactを動かすことができるようになります。 とあるように、React に関してはビルドした結果しか残らないので、frontend イメージには yarn も node_modules も存在しないのだと思います。
senseIY

2022/08/29 04:07

追記ありがとうございます。 確かにその通りですね。気が付きませんでした。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。