Erstellen Sie mit Docker eine Vue3-Umgebung!

Einführung

Dieser Artikel beschreibt, wie Sie mit "Docker" eine "Vue3.0" -Umgebung erstellen. Da es ein Anfänger ist, würde ich es begrüßen, wenn Sie auf Fehler hinweisen könnten.

Voraussetzungen

Sie haben "Docker", "Node" und "npm" installiert. Wenn Sie Docker nicht installiert haben, installieren Sie es bitte unter dem folgenden Link. Vielleicht funktioniert es! Beginnen wir mit Docker!

Umgebung

macOS Catalina : 10.15.7 Visual Studio Code : 1.42.1

Terminal

$ docker --version
Docker version 19.03.13
$ node --version
v14.14.0
$ npm --version
6.14.8

Vue-Versions-Upgrade

Erstellen Sie eine Umgebung für "Vue3.0" auf Ihrem PC. Da das alte Vue2.0 enthalten war, deinstallieren Sie es einmal und installieren Sie dann die neueste Version.

Alte Version löschen

Tun Sie dies nur, wenn Sie eine ältere Version von Vue global installiert haben.

Terminal

$ sudo npm uninstall vue-cli -g

Installieren Sie eine neue Version

Installieren Sie die neue Version neu.

Terminal

$ sudo npm install -g @vue/cli

(Abkürzung)

$vue --version
@vue/cli 4.5.8

Bau der lokalen Umgebung

Lassen Sie uns ein Projekt mit Vue3.0 lokal ausführen.

Erstellen eines Vue-Projekts in einer lokalen Umgebung

Erstellen Sie ein Arbeitsverzeichnis. Da wir später andere Container als Vue hinzufügen möchten, gehen wir von der folgenden Verzeichnisstruktur aus.

Verzeichnisaufbau

dockerApp
├──docker-compose.yml ← nicht erstellt
└──vue
├── Dockerfile ← Nicht erstellt
    └── vue_App ← Erstellen Sie diesen Ordner von nun an. Der Arbeitsplatz von vue.
└── V ・ ← ← Hier ist die Quelle von Vue.

Erstellen Sie einen Ordner für vue_app und erstellen Sie ein Vue-Projekt.

Terminal

$ mkdir vue_app        #Verzeichnis erstellen
$ cd vue_app           #Wechseln Sie in das Verzeichnis
$ vue create vue_app   #Erstellen eines Vue-Projekts

Bitte geben Sie Ihren bevorzugten Verzeichnisnamen und Projektnamen an.

Drücken Sie den Befehl, um die Ersteinrichtung zu starten. Sie werden gefragt, ob Sie "Vue 2" oder "Vue 3" verwenden möchten. Wählen Sie also "Vue 3". Wählen Sie "Standard" (Vue 3-Vorschau) ([Vue 3] babel, eslint) ". (Mit der Taste ↑ auswählen↓auswählen und mit der Taste Enter bestätigen)

Terminal

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

Nach einer Weile wird das "Vue3" -Projekt erstellt.

Lassen Sie uns den Vorgang einmal überprüfen. Versuchen Sie, den Server mit dem Befehl "npm run serve" auszuführen.

Terminal

$ npm run serve

Versuchen Sie nach dem Start, auf http: // localhost: 8080 / zuzugreifen.

Es läuft richtig!

Stoppen Sie den Server mit control + c am Terminal.

Erstellen einer Containerumgebung

Als nächstes werden wir eine Vue-Umgebung mit einem Container erstellen.

Erstellen einer Docker-Datei

Erstellen Sie eine Docker-Datei an dem in der Verzeichnisstruktur beschriebenen Speicherort (siehe unten).

Dockerfile

FROM node:14.14.0

WORKDIR /vue_app

RUN npm install

COPY ./vue_app/ .

CMD ["npm", "run", "serve"]

• FROM node: 14.14.0: Docker Wählen Sie das Bild aus, auf dem das Bild basiert. Geben Sie nach : die Version an. Ist es sicher, sich an die lokale Umgebung anzupassen?
• WORKDIR / vue_app: Geben Sie das Verzeichnis an, das im Container mit einem absoluten Pfad arbeiten soll. Wenn das angegebene Verzeichnis nicht vorhanden ist, wird es automatisch generiert.
• RUN npm install: Installiere npm.
• COPY ./vue_app/ .: Kopieren Sie die Quelle. Beschreiben Sie in der Reihenfolge [Quellpfad der lokalen Umgebung] und [Pfad, der in den Container eingefügt werden soll].
• CMD [" npm "," run "," serve "]: Starten Sie den Vue-Server.

Starten eines Containers mit einer Docker-Datei

Wechseln Sie im Terminal in das Verzeichnis, in dem sich die Docker-Datei befindet, und starten Sie den Container. Erstellen Sie zuerst das Image mit dem Befehl docker build.

Terminal

cd {Platzierter Pfad von Dockerfile}
docker build -t vueapp:0.0.1 .

• -t myvueapp: 0.0.1: Kann markiert werden. Fügen wir es hinzu, da dies die nachfolgenden Vorgänge erleichtert. Sie können die Versionen angeben, indem Sie sie durch : trennen.
• .: Gibt den Pfad an, in dem sich Dockerfile befindet.

Überprüfen Sie nach dem Erstellen, ob das Image erstellt wurde.

Terminal

$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
vueapp                  0.0.1               fc7cabc1fe35        22 minutes ago      1.06GB

Es wurde erstellt!

Beginnen wir jetzt mit dem Befehl docker run.

Terminal

$ docker run --name vue_app_container --rm -it -d -p 8080:8080 vueapp:0.0.1

• --name vue_app_container: Beginnt mit dem Namen vue_app_container. Wie beim Erstellen eines Container-Images erleichtert die Angabe des Bildnamens die Verwaltung. Geben Sie ihn daher an.
• --rm: Löscht den Container automatisch, wenn er gestoppt wird.
• --it: Gibt eine schöne Eingabe und Ausgabe von Terminalbefehlen.
• -d: Führen Sie den Container im Hintergrund aus.
• -p 8080: 8080: Leitet den lokalen Port an den Port des Containers weiter.
• vueapp: 0.0.1: Startet die Version 0.0.1 des vueapp-Images.

Greifen Sie nach dem Start auf http: // localhost: 8080 / zu, um den Start zu bestätigen.

Bestätigung des Starts am Terminal

Terminal

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED              STATUS              PORTS                    NAMES
388c1dfe015b        vueapp:0.0.1        "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:8080->8080/tcp   vue_app_container

Stoppen Sie mit dem Befehl "Docker Stop".

Terminal

docker stop vue_app_container

Docker-Compose erstellen

Erstellen Sie "docker-compose.yml" an dem in der Verzeichnisstruktur beschriebenen Speicherort, wie unten gezeigt.

docker-compose.yml

version: '3'
services:
  vue:
    build: ./vue
    image: vueapp:0.0.2
    container_name: "vue_app_container"
    ports:
      - "8080:8080"

• build: Geben Sie das Verzeichnis an, in dem sich dockerfile befindet.
• images: Geben Sie den Bildnamen an. Sie können die Version nach : angeben.
• container_name: Geben Sie den Containernamen an.
• ports: Geben Sie die Portweiterleitung an.

Starten eines Containers mit Docker-Compose

Beginnen Sie mit dem Befehl docker-compose up.

Terminal

$ docker-compose up　-d

• -d: Beginnt im Hintergrund.

Greifen Sie nach dem Start auf http: // localhost: 8080 / zu, um den Start zu bestätigen.

Es funktioniert richtig!

Verwenden Sie den Befehl "Docker-Compose Down", um den Container zu beenden.

Terminal

$ docker-compose down

Verwenden Sie den Befehl docker-compose build, um Dateiänderungen im Container wiederzugeben. Fügen Sie es als Test in die letzte Zeile des template-Tags von HelloWorld.vue ein, das erstellt wurde, als das Vue-Projekt automatisch generiert wurde.

vue/vue_app/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
    <div>
Nachtrag!
    </div>
  </div>
</template>

Beginnen Sie, nachdem Sie den Befehl docker-compose build gedrückt haben.

Terminal

$ docker-compose build

(Abkürzung)

$ docker-compose up　-d

Sie können die Wörter "Addition!" Sehen!

Am Ende

Ich hoffe, es wird hilfreich sein, um einen Container mit Vue zu erstellen. Am Ende des vorherigen Artikels sagte ich, dass ich "Docker-Compose" mit mehreren hinzugefügten Containern schreiben wollte, aber am Ende war es ein Artikel mit einem Container. Das nächste Mal wird das nächste Mal sicherlich ...