[Docker] Erstellen Sie mit Docker eine Node.js + Express + Webpack-Umgebung
Überblick
Notieren Sie sich das Verfahren zum Erstellen einer node.js-Umgebung mit Express und Webpack mit Docker. (* Da ich Anfänger bin, lassen Sie es mich bitte in den Kommentaren wissen, wenn es Fehler oder Missverständnisse gibt.)
Vorbereitung
Geben Sie zunächst den folgenden Befehl in das Terminal ein, um ein Verzeichnis und eine Datei zu erstellen.
mkdir myapp
cd myapp
touch Dockerfile docker-compose.yml package.json \
webpack.config.js
mkdir views public
Die Struktur des myapp-Ordners ist nun wie folgt.
myapp
├── Dockerfile
├── docker-compose.yml
├── package.json
├── public
├── views
└── webpack.config.js
1. Erstellen Sie package.json
Erstellen Sie zunächst package und json.
In package.json ist es auch möglich, die für die Anwendung erforderlichen Pakete vorab auszufüllen.
Es ist möglich, es mit npm init -y zu erstellen, aber dieses Mal werde ich im Voraus erklären, wie man die Paketinformationen schreibt.
In meiner Umgebung ist die Struktur von package.json wie folgt.
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.5.3",
"ejs": "^3.1.5",
"express": "^4.17.1",
"jquery": "^3.5.1",
"js": "^0.1.0",
"popper.js": "^1.16.1",
"node-sass": "^5.0.0",
"postcss-loader": "^4.0.4",
"sass": "^1.29.0",
"sass-loader": "^10.0.5",
"style-loader": "^2.0.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"css-loader": "^5.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0"
},
"devDependencies": {
"autoprefixer": "^10.0.1",
"fibers": "^5.0.0"
}
}
Hier
npm install -D Paket#Speichern Sie in devDependencies → Entwicklungsumgebung
npm install -S Paket#In Produktionsumgebung speichern
Es sollte beachtet werden, dass es getan wird.
2. Erstellen Sie eine Docker-Datei
Erstellen Sie als Nächstes eine Docker-Datei. Mit Dockerfile können Sie eine Entwicklungsumgebung mit hoher Geschwindigkeit ohne Unterschied erstellen. Der Inhalt der Docker-Datei wird wie folgt beschrieben.
#Geben Sie die Version von nodejs an.
FROM node:12.0
#Installieren Sie die erforderlichen Pakete in OS(Es wird empfohlen, es als Magie zu schreiben)
RUN apt-get update && apt-get install -y \
#Weil Nicht-Root-Benutzer Root-Rechte verwenden
sudo \
#Holen Sie sich Tools aus dem Internet
wget \
#Verwenden Sie vim als Editor
vim
#Erstellen eines Anwendungsverzeichnisses
RUN mkdir /app
#Verwenden Sie das App-Verzeichnis als Entwicklungsverzeichnis
WORKDIR /app
#Paket im Behälter.json und packen-lock.Stellen Sie sicher, dass zwei von json kopiert werden
COPY package*.json ./
# package.Installieren Sie das in json beschriebene Paket.
RUN npm i
#installierter Knoten_Kopieren Sie Dateien wie Module auf die Containerseite.
COPY . .
CMD ["node","app.js"]
3. Erstellen Sie docker-compose.yml
Mit docker-compose.yml können Sie mehrere Docker-Container gleichzeitig starten. Da die Datenbank diesmal nicht verwendet wird, wird nur der Container node.js gestartet. Beschreiben Sie wie unter docker-compose.yml.
# docker-Geben Sie die Erstellungsversion an
version: "3"
services:
app:
#Erstellen Sie eine Docker-Datei im selben Verzeichnis
build: .
#Geben Sie dem Container einen Namen(Irgendein)
container_name: nodesam
#Sie können den Container am Laufen halten.
tty: true
#Hängen Sie die Dateien im Verzeichnis in das App-Verzeichnis im Container ein
volumes:
- .:/app
#Montieren Sie Port 1000 auf der Containerseite an Port 8080 auf der Hostseite.
ports:
- "8080:8080"
4. Erstellen Sie webpack.config.js
Durch Erstellen von webpack.config.js
npx webpack
Sie können Dateien wie scss und typescript in eine js-Datei kompilieren, indem Sie den Befehl eingeben. Sie können die Gliederung unter offizielle Webpack-Website überprüfen. Die tatsächliche Dateistruktur ist CSS und SCS mit Webpack kompilieren
const path = require('path');
module.exports = {
//Modus ist Produktion/In der Entwicklung beschrieben
// ""Beachten Sie, dass es von umgeben ist
mode: "development",
//Welche Datei soll standardmäßig gelesen werden?=> ./src/index.js
entry: './public/index.js',
//Wo soll die Zusammenstellung der durch Eintrag gelesenen Datei ausgespuckt werden?
output: {
path: path.resolve(__dirname, 'public'),
//Probe zu dist.Mit dem Dateinamen js ausspucken
filename: 'sample.js',
},
module: {
rules: [
//Sass-Dateien lesen und kompilieren
{
//Für Dateien mit den Erweiterungen sass und scss
test: /\.s[ac]ss$/i,
//Name des Laders
use: [
//Funktion zur Ausgabe an das Link-Tag
"style-loader",
//Möglichkeit, CSS zu bündeln
"css-loader",
// sass2css
"sass-loader",
],
},
{
//Zieldateierweiterung
test: /\.(gif|png|jpg|eot|wof|woff|ttf|svg)$/,
//Importieren Sie Bilder als Base 64
type: "asset/inline",
},
],
},
// ES5(IE11 etc.)Bezeichnung für (erforderlich für Webpack 5 und höher)
target: ["web", "es5"],
};
5. Fügen Sie Dateien zu public und viwes hinzu
Führen Sie den folgenden Befehl aus, um index.ejs und style.scss zu erstellen.
touch public/style.scss views/index.ejs
touch app.js
Konfigurieren Sie vorerst den Inhalt von index.ejs auf ein Minimum.
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello world</h1>
<script src="./sample.js"></script>
</body>
</html>
Als nächstes schreiben Sie style.scss wie folgt.
body{
background: red;
}
h1{
color: aqua;
}
Erstellen Sie abschließend app.js, damit Sie die ejs-Datei über die http-Kommunikation überprüfen können. Die Konfiguration ist wie folgt.
const express = require('express');
const path = require('path');
const app = express();
const ejs = require("ejs");
// host:port 0.0.0.0:8080
//Host 0.0.0.Ordnen Sie Port 0 Port 8080 zu.
const PORT = 8080;
const HOST = '0.0.0.0';
//Basierend auf einer öffentlichen Datei → Hiermit können Sie CSS und Javascript öffentlich lesen
app.use(express.static("public"));
//Machen Sie ejs lesbar
app.set('ejs',ejs.renderFile)
app.get('/', (req, res) => {
res.render("index.ejs")
});
app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);
6. Starten Sie den Server mit Docker-Compose
Starten Sie den Server tatsächlich mit Docker-Compose. Geben Sie die Befehle in der folgenden Reihenfolge ein.
docker-compose build
docker-compose up
docker-compose build: Erstellen Sie einen Container basierend auf docker-compose.yml Docker-Compose-Up: Starten Sie den von Docker-Compose-Build erstellten Container
Nach dem folgenden Befehl wird
nodesam | Running on http://0.0.0.0:8080
Wird angezeigt. Wenn Sie also tatsächlich auf "http: //0.0.0.0: 8080" zugreifen, sehen Sie eine einfache Site, auf der der Hintergrund weiß ist und Hello World wie unten gezeigt ausgegeben wird.
6. Webpack kompilieren
Die zuvor erstellte style.scss funktioniert nicht, da sie nicht in index.ejs gelesen wird. Kompilieren Sie also mit webpack zu style.scss → sample.js.
Erstellen Sie zunächst eine js-Datei, die für die öffentliche Kompilierung verwendet werden soll.
touch public/index.js
Dieses Mal wird nur style.scss kompiliert, daher lautet index.js wie folgt.
index.js
import "./style.scss"
Verwenden Sie zum Kompilieren den folgenden Befehl. Bewegen Sie sich zunächst mit dem folgenden Befehl in den Container:
Host-Terminal
docker exec -it nodesam bash
Terminal im Docker-Container
npx webpack
Dadurch wird style.scss-> style.js-> sample.js kompiliert und eine Datei mit dem Namen sample.js im öffentlichen Verzeichnis ausgespuckt.
Wenn Sie nun erneut auf "http: //0.0.0.0: 8080" zugreifen, können Sie sehen, dass der Inhalt von style.scss wie unten gezeigt wiedergegeben wird. (Farbe ekelhaft)
Das ist alles für diese Zeit.
Der diesmal erstellte Code wird als Referenz auf dem folgenden Github veröffentlicht.
Referenzartikel
・ So schreiben Sie eine Docker-Datei ・ Beschreibung von docker-compose.yml ・ Verwendung des Webpacks
Recommended Posts