Hogyan telepítsünk egy Node.js (Express.js) alkalmazást Dockerrel Ubuntu 20.04-en

Bevezetés

Docker egy konténerplatform, amely egy könnyű, virtualizált, hordozható, szoftveresen definiált szabványosított környezet. Lehetővé teszi, hogy a szoftver a fizikai gazdagépen futó többi szoftvertől elkülönítve fusson. A Docker a szoftverfejlesztés folyamatos fejlesztési és integrációs aspektusának meghatározó eleme. Egy könnyű alternatívát kínál a virtuális gépekkel szemben, és lehetővé teszi a fejlesztők számára az elosztott alkalmazásarchitektúrák előnyeinek kihasználását. Ha szeretne egy alapos áttekintést a Docker-ökoszisztémáról, olvassa el ezt a cikket.

Az alkalmazások Dockerrel történő felépítésének folyamata azzal kezdődik, hogy a fejlesztő létrehoz egy image-et az alkalmazásához. Ezután az image egy konténerben kerül telepítésre. Az image tartalmazza az alkalmazás meghatározó összetevőit, mint például az alkalmazás kódját, a könyvtárakat, a konfigurációs fájlokat, a környezeti változókat és a futtatókörnyezetet. Az image szabványosítja a konténeren belüli környezetet, megadva a konténerizációnak a hordozhatósági jellemzőket. Node.js egy nyílt forráskódú, platformfüggetlen backend JavaScript futtatókörnyezet, amely képes JavaScript-kódot futtatni a webböngészőn kívül is. Ez a Chrome V8 JavaScript Engine-re épül.. Express.js egy minimalista backend JavaScript keretrendszer, amely a Node.js-en fut.

Ebben az útmutatóban egy olyan weboldalhoz fogunk image-et készíteni, amely az Express keretrendszeren fut. A következőt fogjuk használni: Bootstrap, ami egy frontend könyvtár, hogy a frontend szebben nézzen ki. Miután létrehoztuk a képet, építünk egy konténert, és feltöltjük a Docker Hub. A Docker Hub lehetővé teszi a fejlesztők számára, hogy konténerizált alkalmazásokat hosztoljanak a bármely Docker környezetbe történő egyszerű telepítéshez. Miután a konténered a Docker Hubon van hosztolva, le fogjuk tölteni (pull), és építünk egy másik képet, amely ténylegesen kiszolgálja majd a weboldalunkat.

Előfeltételek

Ez egy gyakorlati útmutató lesz. Érdemes létrehoznod egy olyan környezetet, amely lehetővé teszi a lépések követését.

• Szükséged lesz egy telepített Ubuntu 20.04-re mint kezdeti operációs környezetre, és hozz létre egy nem-root felhasználót sudo jogosultságokkal. Jelentkezz be a nem-root felhasználóval, és folytasd a következő lépésekkel.
• Telepítened kell a Dockert. Kövesd az 1., 2., 3. és 4. lépést a következő útmutatónkban: hogyan kell telepíteni és működtetni a Dockert Ubuntu-n. Ez bármely Ubuntu disztribúció esetén működni fog.
• Hozz létre egy Docker Hub fiókot, ha még nincs. Ezen a linken elérheted a Docker Hub gyorsútmutatót.
• Telepítsd a Node.js-t és az NPM-et. Az NPM egy JavaScript csomagkezelő. Követheted ezeket az utasításokat a Node és az npm telepítéséhez.

1. lépés: Az alkalmazás függőségeinek konfigurálása

You need to create your application source code before you can create the image. The application source code includes code, static content, and dependencies that will be copied to the container. Start by creating a directory for your project in the home directory of the non-root. We will call it node_express, but you are free to use a directory name that you like:

Ezután lépj be ebbe a könyvtárba:

This will be your application root directory. A node.js application expects a package.json file in the root folder. Npm uses this file to determine what dependencies your application needs. Enter the following command to create this file:

Ezután add hozzá a következő kódrészletet a fájlhoz. Tetszés szerint módosíthatod a nevet, a szerzőt, a leírást és a belépési pont fájlját:

Amint látható, ez a fájl határozza meg a projekt nevét, verzióját, szerzőjét és azt a licencet, amely alatt az alkalmazáskód megosztásra kerül. Javasoljuk, hogy használjon rövid és leíró nevet a projekthez, hogy elkerülje a duplikációkat az npm registry-ben. Megadtuk a(z) ISC licencet a projekthez, amely lehetővé teszi az alkalmazáskód szabad másolását, módosítását vagy terjesztését.

A legfontosabb, hogy vegye figyelembe a következő irányelveket a fájlban:

• “main”: this directive specifies the entry point of the application, which we set as index.js. We will be creating this file shortly.
• “dependencies”: this directive specifies the application dependencies that will be pulled from the npm registry when we run the npm command, in our case, we want Express version 4.17.1 and above.

Most elmentheti a fájlt a Ctrl + O billentyűkombináció megnyomásával. Ezután zárja be a fájlt a Ctrl + X megnyomásával. Ezután a következő parancs futtatásával telepítjük a függőségeket:

The command installs the application dependencies specified in the package.json file inside the node_modules directories. They have been auto-created when you first ran the command. With our application dependencies installed, you can now start adding the application code.

2. lépés: Az alkalmazáskód-fájlok hozzáadása

Egy egyszerű receptweboldalt fogunk készíteni, az allrecipes. The main entry point for the application is the index.js file. We will add a views directory that will hold the various pages and static assets of the project. The website will have a landing page that will contain introductory information and links to some recipes.

Our landing page code will be placed in the home.html file. First, create the index.js file by entering the following command:

Adja hozzá a következő kódot, amely importálja és létrehozza az Express alkalmazást. Meghatározza a Router objektumot, a báziskönyvtárat és a portot is, amelyen ez az alkalmazás kiszolgálásra kerül:

require is a JavaScript function that loads a module. In this case, we are loading the express module. Then, we will use the imported module to create the express and router objects. The router object performs the routing functions of the app by responding to HTTP method calls that will add to this object as we go along with the tutorial.

We have also set path and port. The path constant defines the base directory for the code. In our case it’s the views subdirectory inside the project root directory. The port specifies the port on which the express app should listen on, in our example, we have set it to 8090.

Once we have the constants, we can specify some routes for the application using the router object. Add the following code to the index.js file to specify the routes:

Tud köztes szoftvert hozzáadni to routes using the router.use function. In this case, we add a function that logs the router’s requests before passing them to the application routes. A GET request to the application’s base will return a home.html page. Then, we have added pages for three recipes that will also be retrieved using the GET request to the specific recipe page.

Finally, add the following code to mount the router middleware and the application static assets. In addition, tell the express application to listen on port 8090:

Your complete index.js file should look like this:

You may save and close the file now. The next step is to add the static web pages to the views directory. Start by entering the following command to create the directory:

Enter the following command to open the home.html landing page file:

Adja hozzá a következő kódot a fájlhoz. A kód importálja a Bootstrapet, és információt nyújt a weboldal látogatóinak arról, hogy miről is szól a weboldal:

A Bootstrap importálásán kívül az oldal egy alapvető navigációs menüt is hozzáad, hogy segítsen a lapok közötti navigálásban és a kezdőlapra való visszatérésben. Hozzáadtunk egy sort a saját CSS-fájlunk importálásához is:

We will use this file to add custom styling to the application later on. Now, let’s create the three pages for the recipes. We first start by creating the lasagna page. Open the file with nano editor using the following command:

In the opened file, add the following code. This file will import Bootstrap, the custom.css file, specify a navigation menu and offer some Lasagna recipe information:

Let’s follow the same process to create a file for the guacamole recipe page. Open the file with nano by running the following command:

Ezután adja hozzá ezt a kódot a fájlhoz:

Finally, let’s create the banana_bread.html file by entering the command:

Ezután adja hozzá a következő HTML-kódot a fájlhoz:

Now, we have created all the pages. If you remember, we are to add the css/custom.css file. Enter the following command to create the directory:

Ezután hozza létre és nyissa meg a fájlt a nano szerkesztőben a következő paranccsal:

További CSS kódokat is hozzáadhat a weboldal stílusának testreszabásához, ahogy szeretné. A rövidség kedvéért adjuk hozzá a következő kódrészletet a fájlhoz:

Ha végzett, mentse el és zárja be a fájlt.

Most már elindíthatja az alkalmazást, mivel az alkalmazás forráskódja és a projekt függőségei is telepítve vannak.

We had set the app to listen on a port 8090, run the following command to instruct the firewall to allow traffic through this port. If you had specified a different port, replace the port number in the command:

Most már elindíthatja az alkalmazást. De előtte győződjön meg róla, hogy a projekt gyökérkönyvtárában van, a következő parancs futtatásával:

Indítsa el az alkalmazást a node index.js paranccsal. Ha más belépési pontot adott meg, cserélje ki azt a saját belépési pontjára:

If you navigate your browser to http://your_public_server_ip:8090, you will see the Recipes landing page as defined:

 

You can see the links to the various recipes in the navigation. Let’s click on some. Below we have the Lasagna recipe page:

And here we have the Guacamole recipe page:

Eddig a pontig létrehozta az alkalmazást, és tesztelte, hogy az elvárásoknak megfelelően működik. A szerverből a Ctrl + C billentyűkombináció megnyomásával léphet ki, majd továbbléphet a Dockerfile létrehozására. A Dockerfile-ok segítenek a skálázhatóságban azáltal, hogy lehetővé teszik az alkalmazás egy példányának újbóli létrehozását, amikor szükséges.

3. lépés: A Dockerfile létrehozása

A Docker a Dockerfile-ban megadott utasításokat olvassa be a lemezképek készítésekor. Ez határozza meg az alkalmazás futtatókörnyezetét. Ezáltal segít a fejlesztőknek elkerülni a függőségekkel vagy a változó futtatókörnyezet-verziókkal kapcsolatos eltéréseket. Írja be a következő parancsot a Dockerfile létrehozásához:

A Docker-lemezkép több, egymásra épülő lemezképrétegből jön létre. Először egy alaplemezképet kell hozzáadnia, amely az alkalmazás kiindulópontját képezi.

Since the application expects to run in a node.js environment, we will start by adding the node:10-alpine lemezkép for node.js. Currently, as we are writing this tutorial, this is the a Node.js ajánlott LTS verziója. Azért választottuk ezt a konkrét lemezképet, mert az az Alpine Linux projektből származik. Ezért ez segít minimális szinten tartani az image méretét. Számos image-változat található a Docker Hub Node images oldalon, amelyek közül az igényeinek megfelelően választhat.

Add the following code to set the application’s base image using the FROM directive:

This image includes Node.js and npm. Every Dockerfile must begin with a FROM directive. The Docker node image comes with a non-root node user by default that you can use to run your application container as root. A Docker biztonsági ajánlása szerint nem javasolt a konténereket rootként futtatni, és a jogosultságokat csak az erőforrásaik futtatásához szükségesekre kell korlátozni.

In that case, we will be using the node user’s home directory as the working directory for the application as well as the user inside the container. You can check this Docker Node image best practices útmutatót további információkért.

We will create the node_modules subdirectory inside the /home/node along with the app directory to help streamline the permissions for the application code. Creating these directories ensures that they have the right permissions when we run the npm install command locally inside the containers. Once you have created the directories, you must set ownership on them to the node user. We will do this inside the Dockerfile by adding the following line:

Ezután a következő sor hozzáadásával állíthatja be a munkakönyvtárat:

It’s a good idea to always set the WORKDIR so that Docker does not have to create one by default.

Add the following line to copy the package.json and package-lock.json files:

It’s recommended to add the COPY instruction before running npm install or copying application source code. It allows you to take advantage of Docker’s caching mechanism. During the build process, Docker checks whether it has a layer cached for every instruction. This means that if you have not changed the package.json file, then Docker will use the existing imager layer and avoid reinstalling node modules, hence faster build processes.

Before running npm install, add the following line to switch the user to node to ensure all the application files and node_modules directory are owned by the non-root node user:

A konténerünk most már készen áll az npm install parancs futtatására. Adja hozzá a következő sort a Dockerfile-hoz:

Once node_modules have been installed, add the following line that will tell Docker to copy the application code into the application directory on the container with the right permissions and ownership, i.e. the non-root node user:

The last step is to expose the port 8090 on the container, as we had defined in our entry index.js file:

EXPOSE sets which ports on the container will be open at runtime. CMD runs the command to start the application, in this case, node index.js.

Csak egy CMD parancs lehet a Dockerfile-ban, mivel csak az utolsó lép életbe. Kérjük, tekintse meg a Dockerfile referencia-dokumentációt a Dockerfile-lal végezhető műveletek listájáért.

A teljes Dockerfile-nak így kell kinéznie:

Most már elmentheti és bezárhatja a fájlt.

A következő lépés a .dockerignore fájl hozzáadása. Csakúgy, mint a .gitignore file, the .dockerignore specifies which files and directories within the project directory should not be copied over to the container.

Nyissa meg a fájlt a nano szerkesztővel:

Adja hozzá a következő sorokat a fájlhoz:

If working with a git repo, then you should also add the .git directory and the .gitignore file. Save and close the file.

Ha minden jól ment, ideje felépíteni az alkalmazás image-ét a docker build command. You can add the –t flag to the docker build command to tag the image with a memorable name as opposed to the random string that docker sets by default. We will also be pushing the image to Docker Hub so, it’s best to include your Docker Hub username in the tag.

We will use nodejs-express-image as the tag name. You are free to choose a tag name that you like. Here is the command to build the image:

Ne felejtse el kicserélni a your_dockerhub_username részt a tényleges Docker Hub felhasználónevére. A végén lévő . (pont) azt jelzi, hogy a build környezet az aktuális könyvtár.

A build folyamat egy-két percet vesz igénybe. Ha elkészült, írja be a parancsot az image-ek ellenőrzéséhez:

Valami hasonlót kellene látnia:

Ne feledje, a your_dockerhub_username részt egy tényleges felhasználónévre cseréltük ki.

Miután megerősítette, hogy a rendszerkép felépült, most már létrehozhat egy konténert a rendszerképből a következő használatával: docker run. A következő kapcsolók fognak szerepelni:

• -p: publishes the port on the container and maps it to a port on the host system. We will use port 80 on the host system for demonstration purposes. However, if you have another process running on that port, feel free to modify this as necessary. Learn more about port-hozzárendelés a Docker dokumentációból.
• -d: for detached mode. Allows the container to continue running in the background.
• --name: you can use this to set a memorable name instead of letting Docker assign a random string.

A konténer felépítéséhez szükséges parancs a következő. Helyettesítse be megfelelően a Docker Hub felhasználónevét:

Várja meg, amíg a konténer felépül és elindul. Ezzel a paranccsal ellenőrizheti az összes futó konténert:

A következőhöz hasonló kimenetet kell látnia:

Ahogy a kimeneten látható, a konténer most már fut. Megtekintheti a böngészőben, ha ellátogat a szervere nyilvános IP-címére a port megadása nélkül. A kezdőlapja be fog tölteni:

 

Sikeresen telepített egy statikus Node Express webhelyet a Docker segítségével. Lássuk, hogyan tölthetjük fel ezt a rendszerképet a Docker Hubra későbbi használat és skálázás céljából.

4. lépés: Docker rendszerkép-tárolók használata

Feltöltheti rendszerképeit olyan rendszerkép-nyilvántartásokba, mint a Docker Hub, és elmentheti őket későbbi használatra, megoszthatja más fejlesztőkkel, vagy lehetővé teheti a konténerek skálázását. Feltölthetjük a létrehozott rendszerképet a Docker Hubra, és használhatjuk egy konténer újbóli létrehozásához.

Használja a következő parancsot a Docker Hub fiókjába való bejelentkezéshez. Cserélje ki a tényleges Docker Hub felhasználónevére:

Enter your password when prompted. Once logged in, a ~/.docker/config.json file is created in your user’s home directory containing your Docker Hub credentials.

Ezt követően írja be a következő parancsot a rendszerkép Docker Hubra történő feltöltéséhez, megadva a rendszerkép korábbi felépítésekor beállított taget:

Ez a parancs feltölti a Docker rendszerképet a Docker Hub fiókjába. Ha ellátogat a fiókjába, láthatja a nemrég feltöltött rendszerképet:

Letesztelhetjük a képtár hasznosságát a jelenlegi alkalmazáskonténer megsemmisítésével és a tárolóban lévő kép segítségével történő újraépítésével.

Listázza ki a jelenlegi konténereit a következő parancs beírásával:

A következőhöz hasonló kimenetet kellene látnia:

Note the CONTAINER ID listed in your output, copy it, and use it to stop your container with the command, replacing the ID with yours:

Írja be a következő parancsot a rendszerében elérhető összes docker kép listázásához:

A kimenet megmutatja az Ön képének nevét, a node.js képet és az építési folyamatból származó egyéb képeket.

Írja be a következő parancsot a képek eltávolításához, beleértve a nem használt vagy árva képeket is:

Type y to confirm. This removes the stopped containers and images. If you list them you will see an empty list in the output:

Most eltávolította mind az alkalmazást futtató konténert, mind magát a képet. Tudjon meg többet a Docker konténerek, képek és kötetek eltávolításáról az útmutatónkat követve.

Most újra létrehozhatjuk a teljes folyamatot úgy, hogy először letöltjük a képet a Docker Hubról a következő paranccsal. Helyettesítse be megfelelően a Docker Hub felhasználónevét:

Listázza újra a Docker képeit a következő paranccsal:

A kimenetben látnia kell a képet:

Most újraépítheti a konténerét a 3. lépés parancsával. Természetesen helyettesítse be a Docker Hub felhasználónevét, ahol szükséges:

Listázza ki a konténereit, hogy megerősítse az újraépítést:

Hasonló kimenetet kellene látnia:

A böngészőjében navigáljon a szervere nyilvános IP-címére, és látnia kell a futó alkalmazását.

Összegzés

Ha idáig követte az útmutatót, most már rendelkezik egy Express és Bootstrap segítségével készült, és Dockerrel telepített statikus weboldallal. A statikus weboldal fájljaiból egy Docker-rendszerképet épített fel, a rendszerképből pedig egy konténert hozott létre. Ezután feltöltötte a rendszerképet egy Docker-rendszerkép-regiszterbe, Docker Hub, elérhetővé téve azt a jövőbeli használatra vagy skálázásra. A rendszerkép-regiszter használatának teszteléséhez törölte a rendszerképeket és konténereket, letöltötte a rendszerképeket a regiszterből, majd újraépítette a konténereket.

Ez az útmutató bemutatta, hogyan kell telepíteni egy Node.js alkalmazást. Ha szeretné megtanulni, hogyan használhat egy másik webfejlesztési stacket, van egy útmutatónk a következő témában: Laravel alkalmazás telepítése Docker Compose segítségével Nginx-en.

A Docker használatával kapcsolatos további forrásokért tekintse meg az alábbi útmutatókat:

• A Docker Compose telepítése és konfigurálása Ubuntu 20.04-en
• Hogyan osszunk meg adatokat egy Docker-konténer és a gazdagép között
• A Docker telepítése és beállítása CentOS 7-en

Kellemes számítógépes munkát!