reactjs - Docker نمیتواند semantic-ui-react را پیدا کند
من تازه وارد داکر هستم و میخواهم یک برنامه ریاکت (با تایپاسکریپت) در داخل داکر بسازم و نیاز دارم از semantic-ui-react برای این کار استفاده کنم. من دستورالعملها را از اینجا دنبال کردم تا برنامهام را بسازم: https://mherman.org/blog/dockerizing-a-react-app/
من Semantic UI را با استفاده از npm i -g semantic-ui-react اضافه کردم و این App.tsx من است:
import React from 'react';
import './App.css';
import {Button} from "semantic-ui-react";
class App extends React.PureComponent {
render() {
return (<div>
This is text
<Button>
ok
</Button>
</div>)
}
}
export default App;
وقتی http://localhost:3001 را باز میکنم، این خطا را دریافت میکنم:
./src/App.tsx
Module not found: Can't resolve 'semantic-ui-react' in '/app/src'
من سعی کردم با استفاده از npm تصویر داکر را بسازم، سپس به yarn تغییر دادم فکر کردم که این مشکل را حل میکند. دستورات ساختی که تاکنون استفاده کردهام:
docker-compose build --no-cache && docker-compose up -d --force-recreatedocker-compose build --no-cachedocker-compose up -d --force-recreate --buildفایل داکر من
base image
FROM node:12.2.0-alpine
set working directory
WORKDIR /app
add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
install and cache app dependencies
COPY package.json /app/package.json
RUN cat package.json
RUN yarn install
start app
CMD ["yarn", "start"]
docker-compose.yml من:
version: '2.2'
volumes:
frontend:
services:
frontend:
container_name: container
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- '3001:3000'
environment:
- NODE_ENV=development
من از اوبونتو 18.04 استفاده میکنم
داخل فایل Docker من، cat package.json را اضافه کردهام تا ببینم آیا Semantic UI اضافه شده است و اضافه شده است.
Step 5/7 : RUN cat package.json
---> Running in b6bbcda3221b
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.0",
"semantic-ui-react": "^0.88.2",
"typescript": "~3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
من yarn start را از ترمینال اجرا کردهام و هیچ خطایی وجود ندارد و پروژه وقتی آن را در مرورگر باز میکنم به خوبی کار میکند.
چرا داکر ماژول Semantic UI را پیدا نمیکند؟
پاسخ شماره ۱
ظاهراً این یک تکراری از Docker-compose است: پس از موفقیت نصب npm، node_modules در یک volume حاضر نیست
و پاسخ فریدریکاناس اینجا نیز کاربرد دارد. من حذف کردم
- '/app/node_modules' را از ولومها در داخل docker-compose.yml حذف کرده و اکنون همه ماژولها را شناسایی میکند