[Docker] Créez un environnement Node.js + express + webpack avec Docker
Aperçu
Notez la procédure de création d'un environnement node.js avec express et webpack à l'aide de Docker. (* Parce que je suis débutant, s'il y a des erreurs ou des malentendus, merci de me le faire savoir dans les commentaires.)
Préparation
Tout d'abord, tapez la commande suivante dans le terminal pour créer un répertoire et un fichier.
mkdir myapp
cd myapp
touch Dockerfile docker-compose.yml package.json \
webpack.config.js
mkdir views public
Maintenant, la structure du dossier myapp est la suivante.
myapp
├── Dockerfile
├── docker-compose.yml
├── package.json
├── public
├── views
└── webpack.config.js
1. Créez package.json
Tout d'abord, créez package et json.
Dans package.json, il est également possible de pré-remplir les packages requis pour l'application.
Il est possible de le créer avec npm init -y, mais cette fois je vais vous expliquer comment écrire les informations du paquet à l'avance.
Dans mon environnement, la structure de package.json est la suivante.
{
"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"
}
}
ici
npm install -Paquet D#Enregistrer dans devDependencies → Environnement de développement
npm install -Paquet S#Enregistrer dans l'environnement de production
Il faut noter que ce sera fait.
2. Créez un Dockerfile
Ensuite, créez un Dockerfile. En utilisant Dockerfile, vous pouvez créer un environnement de développement à grande vitesse sans aucune différence. Le contenu du Dockerfile est décrit comme suit.
#Spécifiez la version de nodejs.
FROM node:12.0
#Installez les packages requis dans os(Il est recommandé de l'écrire comme une magie)
RUN apt-get update && apt-get install -y \
#Parce que les utilisateurs non root utilisent les privilèges root
sudo \
#Obtenez des outils sur Internet
wget \
#Utilisez vim comme éditeur
vim
#Créer un répertoire d'application
RUN mkdir /app
#Utilisez le répertoire de l'application comme répertoire de développement
WORKDIR /app
#Emballage en conteneur.json et packate-lock.Assurez-vous que deux json sont copiés
COPY package*.json ./
# package.Installez le package décrit dans json.
RUN npm i
#nœud installé_Copiez des fichiers tels que le module du côté du conteneur.
COPY . .
CMD ["node","app.js"]
3. Créez docker-compose.yml
Vous pouvez lancer plusieurs conteneurs Docker en même temps à l'aide de docker-compose.yml. La base de données n'étant pas utilisée cette fois, seul le conteneur node.js est lancé. Décrivez comme sous docker-compose.yml.
# docker-Spécifier la version de composition
version: "3"
services:
app:
#Construisez un Dockerfile dans le même répertoire
build: .
#Donnez un nom au conteneur(Tout)
container_name: nodesam
#Vous pouvez maintenir le conteneur en marche.
tty: true
#Montez les fichiers du répertoire dans le répertoire de l'application dans le conteneur
volumes:
- .:/app
#Montez le port 1000 du côté du conteneur sur le port 8080 du côté de l'hôte.
ports:
- "8080:8080"
4. Créez webpack.config.js
En créant webpack.config.js
npx webpack
Vous pouvez compiler des fichiers tels que scss et dactylographié dans un fichier js en tapant la commande. Vous pouvez vérifier le plan en consultant le site Web officiel du webpack. La structure réelle des fichiers est Compilez css et scss à l'aide de webpack
const path = require('path');
module.exports = {
//le mode est la production/Décrit dans le développement
// ""Notez qu'il est entouré de
mode: "development",
//Quel fichier lire par défaut=> ./src/index.js
entry: './public/index.js',
//Où cracher la compilation du fichier lu par entrée
output: {
path: path.resolve(__dirname, 'public'),
//échantillon à dist.Crachez avec le nom de fichier js
filename: 'sample.js',
},
module: {
rules: [
//Lecture et compilation de fichiers Sass
{
//Pour les fichiers avec les extensions sass et scss
test: /\.s[ac]ss$/i,
//Nom du chargeur
use: [
//Fonction à sortir pour lier la balise
"style-loader",
//Possibilité de regrouper CSS
"css-loader",
// sass2css
"sass-loader",
],
},
{
//Extension de fichier cible
test: /\.(gif|png|jpg|eot|wof|woff|ttf|svg)$/,
//Importer des images comme Base 64
type: "asset/inline",
},
],
},
// ES5(IE11 etc.)Désignation pour (obligatoire pour Webpack 5 et supérieur)
target: ["web", "es5"],
};
5. Ajouter des fichiers au public et aux viwes
Exécutez la commande suivante pour créer index.ejs et style.scss.
touch public/style.scss views/index.ejs
touch app.js
Pour le moment, configurez le contenu de index.ejs au 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>
Ensuite, écrivez style.scss comme suit.
body{
background: red;
}
h1{
color: aqua;
}
Enfin, créez app.js afin de pouvoir vérifier le fichier ejs via la communication http. La configuration est la suivante.
const express = require('express');
const path = require('path');
const app = express();
const ejs = require("ejs");
// host:port 0.0.0.0:8080
//Hôte 0.0.0.Mappez le port 0 sur le port 8080.
const PORT = 8080;
const HOST = '0.0.0.0';
//Basé sur un fichier public → Cela vous permet de lire les css et javascript en public
app.use(express.static("public"));
//Rendre les ejs lisibles
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. Démarrez le serveur avec docker-compose
Démarrez en fait le serveur avec docker-compose. Tapez les commandes dans l'ordre suivant.
docker-compose build
docker-compose up
build docker-compose: créer un conteneur basé sur docker-compose.yml docker-compose up: lance le conteneur créé par docker-compose build
Après la commande suivante,
nodesam | Running on http://0.0.0.0:8080
Est affiché, donc lorsque vous accédez réellement à http: //0.0.0.0: 8080, vous pouvez voir un site simple où l'arrière-plan est blanc et Hello World est affiché comme indiqué ci-dessous.
6. Compilation du webpack
Le style.scss créé précédemment ne fonctionne pas car il n'est pas lu dans index.ejs. Compilez donc dans style.scss → sample.js avec webpack.
Tout d'abord, créez un fichier js à utiliser pour la compilation en public.
touch public/index.js
Cette fois, seul style.scss est compilé, donc index.js se présente comme suit.
index.js
import "./style.scss"
Utilisez la commande suivante pour compiler. Tout d'abord, déplacez-vous à l'intérieur du conteneur avec la commande suivante,
terminal hôte
docker exec -it nodesam bash
Terminal dans un conteneur docker
npx webpack
Cela compilera style.scss-> style.js-> sample.js et crachera un fichier appelé sample.js dans le répertoire public.
Maintenant, lorsque vous accédez à nouveau à http: //0.0.0.0: 8080, vous pouvez voir que le contenu de style.scss est reflété comme indiqué ci-dessous. (Couleur dégoûtante)
C'est tout pour cette fois.
Le code créé cette fois-ci est publié sur le github suivant, donc pour référence.
Article de référence
・ Comment écrire un Dockerfile ・ Explication de docker-compose.yml ・ Comment utiliser Webpack
Recommended Posts