Ich habe versucht, eine React.js x TypeScript x Material-Benutzeroberfläche in einer Docker-Umgebung zu erstellen
Über diesen Artikel
Dieser Artikel hat eine Umgebung erstellt, in der React x TypeScript x Material-ui unter Docker ausgeführt wird. Ich denke, es gibt einige Referenzen für Leute, die von nun an schnell eine Entwicklungsumgebung mit Docker erstellen möchten! Wenn es Fehler im Inhalt gibt oder wenn Sie einen Rat haben, wäre es sehr dankbar, wenn Sie uns dies mitteilen könnten. ..
Die wichtigsten Technologien, die diesmal verwendet werden, sind folgende.
- Docker,Docker-compose
- React.js (version.17.0.1)
- TypeScript
- material-ui (version.4.11.0)
Spezifikationen vor der Erstellung
- Ich habe ein SPA mit Vue gemacht. --Docker irgendwie ... (unerfahren)
Hintergrund wollte ich machen
Vor kurzem habe ich ein wenig über Vue gelernt und mich mit anderen JS-FWs und -Bibliotheken befasst. Ich wünschte, ich könnte neues Wissen bekommen. .. Also fing ich an, React und TypeScript zu studieren.
Vorerst möchte ich etwas machen, das Gestalt annimmt, um mein Verständnis zu vertiefen. ich dachte Lassen Sie uns zunächst eine Entwicklungsumgebung erstellen! Also habe ich es diesmal versucht.
Erstellung einer Entwicklungsumgebung
Schalten Sie vorerst das Arbeitsverzeichnis aus. Dieses Mal habe ich React-todos (Verzeichnisname) deaktiviert.
mkdir react-todos
Erstellen Sie als Nächstes Dockerfile und docker-compose.yml im Stammverzeichnis des Projekts.
Erstellen Sie eine Docker-Datei
#Erstellen einer Docker-Datei
vi Dockerfile
Holen Sie sich das Basis-Image. Diesmal habe ich die neueste Version bekommen (Stand 1. November 2020). https://hub.docker.com/_/node
Dockerfile
FROM node:15.0.1-alpine3.10
Docker-compose.yml erstellen
Holen Sie sich die Vorlage von https://docs.docker.com/compose/compose-file/ und werden Sie verrückt.
#docker-compose.Erstellen Sie yml
vi Docker-compose.yml
docker-compose.yml
version: "3.8"
services:
front:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./front:/front
working_dir: /front
command: node
tty: true
#Containerstart
docker-compose up
Nachdem Sie bestätigt haben, dass der Knotencontainer gestartet wurde, gehen Sie in den Container und erstellen Sie ein React-Projekt.
Gehen Sie in den Container und erstellen Sie ein React-Projekt.
#Betritt den Container.
docker-compose exec front sh
#Führen Sie den folgenden Befehl aus, um TypeScript mit Create React App zu verwenden:
npx create-react-app my-app --template typescript
Wenn Sie bestätigen können, dass das React-Projekt unter front / my-app erstellt wurde, Ändern Sie die Datei Dockerfile und docker-compose.yml erneut und starten Sie den Container!
Dockerfile
FROM node:15.0.1-alpine3.10
#Fügen Sie die beiden unteren Zeilen hinzu!
COPY ./front /front
WORKDIR /front
docker-compose.yml
version: "3.8"
services:
front:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./front:/front
working_dir: /front/my-app #Fix!
command: sh -c "npm install & npm start" #Fix!
tty: true
ports:
- 3000:3000 #Geben Sie den Port an!
Starten Sie den Container erneut und prüfen Sie, ob Sie auf [http: // localhost: 3000 /](http: // localhost: 3000 /) zugreifen können!
#Containerstart
docker-compose up
Wurde der Bildschirm sicher gestartet? ??
Material-ui installieren
Installieren Sie als Nächstes Material-ui, das UI-Framework von React. Gehen Sie wieder in den Behälter.
# /front/my-Installieren Sie im App-Verzeichnis
npm install @material-ui/core
npm install @material-ui/style
Hier gibt es jedoch ein Problem. .. Kann nicht installiert werden. .. Anscheinend stimmte die React-Version nicht mit der Material-UI-Version überein, daher wurde ein Abhängigkeitsfehler angezeigt ... Details werden hier beschrieben.
→https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15 (Die Lösung von ERESOLVE kann den Abhängigkeitsbaum nicht auflösen.)
Unter Bezugnahme auf https://github.com/mui-org/material-ui/issues/23306 wird daher Folgendes angegeben Führen Sie den Befehl aus.
# /front/my-Installieren Sie im App-Verzeichnis
npm install --save --legacy-peer-deps @material-ui/core
Ändern Sie nach der Installation tsconfig.json so, dass material-ui auch in der TypeScript-Umgebung funktioniert.
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["ES6", "dom", "dom.iterable", "esnext"], //ES6 hinzugefügt
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
//Untere 3 Zeilen hinzugefügt
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"jsx": "react"
},
"include": ["src"]
}
Sobald tsconfig.json geändert wurde, werde ich versuchen, eine einzelne Komponente zu erstellen, um festzustellen, ob material-ui tatsächlich verwendet werden kann. Erstellen Sie dieses Mal ein Komponentenverzeichnis unter dem Verzeichnis src. In diesem Verzeichnis habe ich WrapButton.tsx erstellt, das die Button-Komponente umschließt.
tsx:.components/WrapButton.tsx
import React from "react";
import { Button } from "@material-ui/core";
const WrapButton = () => {
return (
<>
<Button variant="contained" color="secondary">
Hello World!
</Button>
</>
);
};
export default WrapButton;
App.tsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import WrapButton from "./components/WrapButton";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
//↓ Hinzufügen
<WrapButton />
</header>
</div>
);
}
export default App;
Es ist etwas klobig, aber Sie können sehen, dass die Button-Komponente sichtbar ist! (Mach dir keine Sorgen über E-Mail-Benachrichtigungen ... lol) Jetzt, da die Entwicklungsumgebung vorerst bereit ist, können wir von hier aus gehen, wie Sie möchten!