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

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

新規登録して質問してみよう
ただいま回答率
85.42%
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ライブラリです。

Q&A

解決済

2回答

1383閲覧

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

senseIY

総合スコア281

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ライブラリです。

0グッド

0クリップ

投稿2022/08/28 23:44

編集2022/08/29 00:32

前提

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

ディレクトリ構造

イメージ説明

Dockerfile(Rails)

Docker

1FROM ruby:3.1.2-buster 2 3RUN apt-get update && apt-get install -y curl apt-transport-https wget && \ 4 curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ 5 echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ 6 apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs default-mysql-client yarn 7 8ENV APP_PATH /myapp 9 10RUN mkdir $APP_PATH 11WORKDIR $APP_PATH 12 13COPY Gemfile $APP_PATH/Gemfile 14COPY Gemfile.lock $APP_PATH/Gemfile.lock 15 16RUN bundle config set force_ruby_platform true 17 18RUN gem install bundler 19RUN bundle install 20 21VOLUME /tmp 22# Add a script to be executed every time the container starts. 23COPY entrypoint.sh /usr/bin/ 24RUN chmod +x /usr/bin/entrypoint.sh 25ENTRYPOINT ["entrypoint.sh"] 26CMD ["rails", "server"] 27

Dockerfile(frontend nginx)

Docker

1FROM node:16-alpine as build 2WORKDIR /home/node/app 3COPY ./app /home/node/app 4RUN yarn 5RUN yarn run build 6 7FROM nginx:alpine 8RUN rm -f /etc/nginx/conf.d/* 9COPY --from=build /home/node/app/build /var/www 10ADD ./nginx.conf /etc/nginx/conf.d/ 11CMD /usr/sbin/nginx -g 'daemon off;' -c /etc/nginx/nginx.conf

docker-compose.production.yml

yml

1version: '3.3' 2 3services: 4 db: 5 image: mysql:8.0 6 environment: 7 MYSQL_ROOT_PASSWORD: password 8 ports: 9 - '3306:3306' 10 command: --default-authentication-plugin=mysql_native_password 11 volumes: 12 - db-data:/var/lib/mysql 13 api: 14 build: 15 context: ./backend/ 16 dockerfile: Dockerfile 17 volumes: 18 - ./backend:/myapp 19 - bundle:/usr/local/bundle 20 depends_on: 21 - db 22 frontend: 23 build: 24 context: ./backend/frontend/ 25 dockerfile: Dockerfile 26 ports: 27 - "3000:80" 28 volumes_from: 29 - api 30 depends_on: 31 - api 32 33volumes: 34 db-data: 35 bundle:

nginx.conf

j

1upstream api { 2 server unix:/myapp/tmp/sockets/puma.sock; 3} 4server { 5 listen 80; 6 server_name localhost:3000; 7 charset utf-8; 8 9 root /var/www/; 10 index index.html index.htm; 11 12 location / { 13 try_files $uri /index.html; 14 } 15 16 location /api/v1 { 17 proxy_set_header X-Real-IP $remote_addr; 18 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 19 proxy_set_header Host $http_host; 20 proxy_pass http://api; 21 } 22 23 error_page 500 502 503 504 /500.html; 24 client_max_body_size 4G; 25 keepalive_timeout 10; 26 27}

package.json

json

1{ 2 "name": "app", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "@emotion/react": "^11.10.0", 7 "@emotion/styled": "^11.10.0", 8 "@material-ui/core": "^4.12.4", 9 "@material-ui/icons": "^4.11.3", 10 "@material-ui/lab": "^4.0.0-alpha.61", 11 "@material-ui/styled-engine": "^5.0.0-alpha.11", 12 "@mui/icons-material": "^5.8.4", 13 "@mui/material": "^5.10.0", 14 "@mui/styles": "^5.9.3", 15 "@testing-library/jest-dom": "^5.14.1", 16 "@testing-library/react": "^13.0.0", 17 "@testing-library/user-event": "^13.2.1", 18 "@types/axios": "^0.14.0", 19 "@types/jest": "^28.1.7", 20 "@types/js-cookie": "^3.0.2", 21 "@types/node": "^16.7.13", 22 "@types/react": "^18.0.0", 23 "@types/react-dom": "^18.0.0", 24 "@types/react-router-dom": "^5.3.3", 25 "@types/styled-components": "^5.1.26", 26 "@types/wavesurfer.js": "^6.0.3", 27 "add": "^2.0.6", 28 "axios": "^0.27.2", 29 "axios-case-converter": "^0.9.0", 30 "intro.js": "^6.0.0", 31 "intro.js-react": "^0.6.0", 32 "js-cookie": "^3.0.1", 33 "react": "^18.2.0", 34 "react-dom": "^18.2.0", 35 "react-router-dom": "^6.3.0", 36 "react-scripts": "5.0.1", 37 "react-select": "^5.4.0", 38 "rooks": "^6.4.2", 39 "styled-components": "^5.3.5", 40 "typescript": "^4.4.2", 41 "wavesurfer.js": "^6.2.0", 42 "web-vitals": "^2.1.0", 43 "yarn": "^1.22.19" 44 }, 45 "scripts": { 46 "start": "react-scripts start", 47 "build": "react-scripts build", 48 "test": "jest", 49 "eject": "react-scripts eject" 50 }, 51 "eslintConfig": { 52 "extends": [ 53 "react-app", 54 "react-app/jest" 55 ] 56 }, 57 "browserslist": { 58 "production": [ 59 ">0.2%", 60 "not dead", 61 "not op_mini all" 62 ], 63 "development": [ 64 "last 1 chrome version", 65 "last 1 firefox version", 66 "last 1 safari version" 67 ] 68 }, 69 "devDependencies": { 70 "@babel/core": "^7.18.10", 71 "@babel/preset-env": "^7.18.10", 72 "@babel/preset-typescript": "^7.18.6", 73 "babel-jest": "^28.1.3", 74 "jest": "^28.1.3", 75 "jest-environment-jsdom": "^28.1.3", 76 "ts-jest": "^28.0.8" 77 } 78} 79

考察など

・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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答2

0

自己解決

ディレクトリ構造を元に戻した(バックエンド側とフロントエンド側を完全に分離した構成に戻した+docker-compose.ymlも修正以下のリンクを参考)
ところ上手く作動したので、解決済みにさせていただきます。貴重なお時間を割いて頂きありがとうございました。

https://qiita.com/taki_21/items/613f6a00bc432d1c221d

投稿2022/08/29 04:09

編集2022/08/29 04:10
senseIY

総合スコア281

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ローカルでnpm installを実行していない、ということはありませんか?

VSCodeから見えるのは、ローカルにあるnode_modulesだけです。

投稿2022/08/29 00:43

maisumakun

総合スコア145535

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

senseIY

2022/08/29 00:53

返信ありがとうございます。実はcerate-react-app はyarnコマンドで行ったのでパッケージマネージャーはnpmではなくyarnだと認識しております。そのため、参考にしたサイトではnpmで行っている部分もyarnに置き換えてコマンドを実行していました。私の認識では、yarnとnpmはどちらか片方のみしか使えない(同時使用不可)と認識していますが、どうなのでしょうか。もしかするとDockerfile(frontend nginx)のyarnのコマンドもnpmに変更するべきでしょうか。私は以前yarnとnpmを間違えて同時に使用したため(それが原因かは不明ではあるが)バグが発生したため、最初からcreate-react-appしなおしたという経験があります。大変恐縮ではございますが返信いただければ幸いです。
senseIY

2022/08/29 00:57

追記失礼します。参考にしたサイトではyarn.lockがあるにもかかわらず、Dockerfileでnpm コマンドを実行しているようです。なぜこのようなことをしているのでしょうか。
maisumakun

2022/08/29 01:38

> 返信ありがとうございます。 特にnpmを指定する意図ではなく、単に「ローカルでもパッケージのインストールが必要」というだけの回答のつもりでした。
senseIY

2022/08/29 04:05 編集

> 特にnpmを指定する意図ではなく、単に「ローカルでもパッケージのインストールが必要」というだけの回答のつもりでした。 承知いたしました。すみません、いただいた助言を誤解してしまったようです。大変申し訳ございませんが、上手くデバッグ出来なかったので、ディレクトリ構造を元に戻した(バックエンド側とフロントエンド側を完全に分離した)ところ上手く作動したので、解決済みにさせていただきます。貴重なお時間を割いて頂きありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問