{"id":8108,"date":"2021-07-28T20:44:57","date_gmt":"2021-07-28T18:44:57","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=8108"},"modified":"2021-10-21T16:47:52","modified_gmt":"2021-10-21T14:47:52","slug":"fastapi-tutorial-mit-docker-und-visual-studio-code-devcontainer","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2021\/07\/28\/fastapi-tutorial-mit-docker-und-visual-studio-code-devcontainer\/","title":{"rendered":"FastAPI | Tutorial mit Docker und Visual Studio Code\/DevContainer"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">TL;DR<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das Repository zu diesem Blog finden sie <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/r14r\/FastAPI_Tutorial_Working-with-Docker-and-DevContainers\" data-type=\"URL\" data-id=\"https:\/\/github.com\/r14r\/FastAPI_Tutorial_Working-with-Docker-and-DevContainers\" target=\"_blank\">hier<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Voraussetzung<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr die Durchf\u00fchrung dieses Tutorials ben\u00f6tigen Sie Visual Studio Code, sowie Docker.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Docker <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Installieren Sie Docker, indem Sie die Anwendung Docker Desktop herunterladen. Sie finden den Download hier: <a href=\"https:\/\/www.docker.com\/products\/docker-desktop\">https:\/\/www.docker.com\/products\/docker-desktop<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"335\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-19-1024x335.png\" alt=\"\" class=\"wp-image-8138\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-19-1024x335.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-19-300x98.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-19-768x251.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-19.png 1465w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Installationsbeschreibung finden Sie <a href=\"https:\/\/hub.docker.com\/editions\/community\/docker-ce-desktop-windows\" data-type=\"URL\" data-id=\"https:\/\/hub.docker.com\/editions\/community\/docker-ce-desktop-windows\" target=\"_blank\" rel=\"noreferrer noopener\">hier<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visual Studio Code <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Installieren Sie Visual Studio Code mit Hilfe des Zip-Archiv. Sie k\u00f6nnen es von hier herunterladen: <a href=\"https:\/\/code.visualstudio.com\/#alt-downloads\" data-type=\"URL\" data-id=\"https:\/\/code.visualstudio.com\/#alt-downloads\">https:\/\/code.visualstudio.com\/#alt-downloads<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hinweis: <strong>https:\/\/code.visualstudio.com,<\/strong> danach den Link <strong>Other platforms<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"322\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-17-1024x322.png\" alt=\"\" class=\"wp-image-8136\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-17-1024x322.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-17-300x94.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-17-768x241.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-17.png 1474w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Speichern Sie das Zip-Archiv und packen Sie es im gew\u00fcnschten Programmverzeichnis aus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Im  Programmverzeichnis  von Visual Studio Code erstellen Sie den Order <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">data<\/code>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"129\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-18.png\" alt=\"\" class=\"wp-image-8137\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-18.png 764w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-18-300x51.png 300w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Damit wird der <em>portable Mode<\/em> aktiviert. In diesem Mode werden alle Einstellungen innerhalb dieser Installation gespeichert.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"641\" height=\"303\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-20.png\" alt=\"\" class=\"wp-image-8144\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-20.png 641w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-20-300x142.png 300w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Notwendigen Erweiterungen<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Windows Subsystem for Linux (WLS) (<code>ms-vscode-remote.remote-ws<\/code>l)<\/li><li>Remote Containers (<code>ms-vscode-remote.remote-containers<\/code>)<\/li><li>Docker (<code>ms-azuretools.vscode-docker<\/code>)<\/li><li>Python (<code>ms-python.python<\/code>)<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Umgebung f\u00fcr unser Tutorial<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wir wollen alle in diesem Tutorials verwendeten Dateien in einem eigenen Ordner ablegen, z. B. <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">FastAPI-Tutorial<\/code><\/p>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Am Ende des Tutorials hat der Ordner diesen Inhalt<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"341\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image.png\" alt=\"\" class=\"wp-image-8517\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image.png 346w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-300x296.png 300w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Docker-Umgebung<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Visual Studio Code Remote Containers arbeiten mit Hilfe von Docker, um eine virtuelle Umgebung bereitzustellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hierf\u00fcr ben\u00f6tigen wie eine Reihe von Docker Konfigurationsdateien<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dockerfile <\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">FROM ubuntu:21.04\n\nLABEL MAINTAINER=\"Ralph G\u00f6stenmeier\"\n\n# set environment variables\nENV TZ 'Europe\/Berlin'\n\nRUN    apt-get update\n\nRUN echo $TZ > \/etc\/timezone \n\nRUN    apt-get install -y tzdata \\\n    &amp;&amp; rm \/etc\/localtime \\\n    &amp;&amp; ln -snf \/usr\/share\/zoneinfo\/$TZ \/etc\/localtime \\\n    &amp;&amp; dpkg-reconfigure -f noninteractive tzdata \\\n    &amp;&amp; apt-get clean\n\nRUN apt-get install --yes build-essential lsb-release curl sudo git vim\nRUN apt-get install --yes python3-pip python3-venv\n\nRUN groupadd work -g 1000\nRUN adduser user --uid 1000 --gid 1000 --home \/home\/user --disabled-password --gecos User\n\nRUN echo '\n\nEXPOSE 5000\n\nENV PYTHONDONTWRITEBYTECODE 1\nENV PYTHONUNBUFFERED 1\n\n#\nUSER user\n\nVOLUME [ \"\/workspace\" ]\n\nCOPY requirements.txt \/workspace\/requirements.txt\nWORKDIR \/workspace\nRUN pip install -r requirements.txt\n\nCMD [\"bash\", \"-l\"]\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">docker-compose.yml<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">version: \"3.8\"\n\nservices:\n    app:\n        build:\n            context: .\n            dockerfile: Dockerfile\n\n        container_name: fastapi-tutorial\n\n        volumes:\n            - .\/workspace:\/workspace\n\n        ports:\n            - 5000:5000\n\n        environment:\n            - FASTAPI_ENV=development\n\n        command: \/bin\/sh -c \"while sleep 1000; do :; done\"\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">requirements.txt<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr unsere Beispielanwendung ben\u00f6tigen wir eine Reihe von Python-Paketen. Diese werden mit Hilfe der Datei <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">requirements.txt<\/code> beim Bauen des Docker Images installiert.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">asgiref==3.4.1\ncertifi==2021.5.30\ncharset-normalizer==2.0.3\nclick==8.0.1\nfastapi==0.67.0\nh11==0.12.0\nidna==3.2\npydantic==1.8.2\nrequests==2.26.0\nstarlette==0.14.2\ntyping-extensions==3.10.0.0\nurllib3==1.26.6\nuvicorn==0.14.0\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Visual Studio Code Umgebung<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Verzeichnisstruktur<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Die aktuelle Verzeichnisstruktur beinhaltet 2 Dateien.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"324\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-1024x324.png\" alt=\"\" class=\"wp-image-8111\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-1024x324.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-300x95.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-768x243.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image.png 1247w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Ordner in einem Container \u00f6ffnen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wir wollen nun diese Ordner in einem Container \u00f6ffnen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Klicken Sie hierzu in der Statusleiste links unten auf das gr\u00fcne Symbol (Open a Remote Window)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"81\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2.png\" alt=\"\" class=\"wp-image-8113\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2.png 346w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2-300x70.png 300w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">W\u00e4hlen Sie dann dein Eintrag <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">Reopen in Container<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"282\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-23.png\" alt=\"\" class=\"wp-image-8148\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-23.png 772w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-23-300x110.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-23-768x281.png 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Um anzugeben, wie der Container initial konfiguriert werden soll, w\u00e4hlen Sie den Eintrag <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">From 'docker-compose.yml'<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"180\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-5-edited.png\" alt=\"\" class=\"wp-image-8149\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-5-edited.png 633w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-5-edited-300x85.png 300w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Anschlie\u00dfen wird der Container erstellt und ge\u00f6ffnet. Als erstes wird das Docker Image erstellt und gestartet<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"89\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-6-1024x89.png\" alt=\"\" class=\"wp-image-8118\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-6-1024x89.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-6-300x26.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-6-768x67.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-6.png 1283w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Umgebung im Container<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Visual Studio Code hat nun den Container ge\u00f6ffnet und Sie befinden sich innerhalb des Docker Image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-7-1024x574.png\" alt=\"\" class=\"wp-image-8120\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-7-1024x574.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-7-300x168.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-7-768x431.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-7-528x297.png 528w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-7.png 1232w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Fehler beim Erstellen der Umbung<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tritt beim Erstellen der Umgebung ein Fehler auf, dann kann es an den Einstellungen in der Datei <code>docker-compose.yml<\/code> liegen<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"234\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-1.png\" alt=\"\" class=\"wp-image-8520\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-1.png 1008w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-1-300x70.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-1-768x178.png 768w\" sizes=\"auto, (max-width: 1008px) 100vw, 1008px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Die Fehlermeldung besagt, das wir den Namen f\u00fcr unseren &#8220;Service&#8221; (also die Anwendung, die wir erstellen wollen) noch anpassen m\u00fcssen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Schlie\u00dfen Sie das Fenster und \u00f6ffnen sie den Ordner wieder lokal.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"81\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2.png\" alt=\"\" class=\"wp-image-8113\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2.png 346w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2-300x70.png 300w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"771\" height=\"80\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-2.png\" alt=\"\" class=\"wp-image-8521\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-2.png 771w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-2-300x31.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-2-768x80.png 768w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffnen sie dann die Datei .<code>devcontainer\/docker-compose.yml<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c4ndern se den Namen des Servier von <code>your-service-name-here<\/code> nach <code>app<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"974\" height=\"247\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-3.png\" alt=\"\" class=\"wp-image-8522\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-3.png 974w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-3-300x76.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-3-768x195.png 768w\" sizes=\"auto, (max-width: 974px) 100vw, 974px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-4.png\" alt=\"\" class=\"wp-image-8523\" width=\"572\" height=\"96\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-4.png 700w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-4-300x51.png 300w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffnen sie danach den Ordner wieder als Container (<code>Reopen in Container<\/code>)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"81\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2.png\" alt=\"\" class=\"wp-image-8113\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2.png 346w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2-300x70.png 300w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"47\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-6.png\" alt=\"\" class=\"wp-image-8525\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-6.png 796w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-6-300x18.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/image-6-768x45.png 768w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00fcfen der Umgebung<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dieses Docker Image w\u00fcrde basierend auf der Linux Distribution Ubuntu erstellt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Erkunden Sie einfach mal die Umgebung.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"971\" height=\"198\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-8.png\" alt=\"\" class=\"wp-image-8121\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-8.png 971w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-8-300x61.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-8-768x157.png 768w\" sizes=\"auto, (max-width: 971px) 100vw, 971px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">DevContainer-Umgebung anpassen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Als n\u00e4chstes passen wir die Umgebung des DevContainer an. Wir wollen z. B. nur die Dateien unserer Anwendung sehen und nicht die Docker Konfigurationsdateien<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hierzu erstellen wir einen Unterordner <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">workspace <\/code>und legen diesen als Startverzeichnis fest.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">.devcontainer\/devcontainer.json<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"11\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n\t\"name\": \"FastAPI Tutorial\",\n\n\t\"dockerComposeFile\": [\n\t\t\"..\/docker-compose.yml\",\n\t\t\"docker-compose.yml\"\n\t],\n\n\t\"service\": \"app\",\n\n\t\"workspaceFolder\": \"\/workspace\",\n\n\t\"settings\": {},\n\t\"extensions\": []\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"> .devcontainer\/docker-compose.yml <\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"6\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">version: '3.8'\nservices:\n  app:\n    \n    volumes:\n      - .\/workspace:\/workspace:cached\n\n      command: \/bin\/sh -c \"while sleep 1000; do :; done\"\n <\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Arbeitsordner erstellen<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">mkdir workspace<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Container neu erstellen<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"81\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2.png\" alt=\"\" class=\"wp-image-8113\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2.png 346w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-2-300x70.png 300w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"168\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-9-1024x168.png\" alt=\"\" class=\"wp-image-8123\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-9-1024x168.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-9-300x49.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-9-768x126.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-9.png 1058w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Startverzeichnis im Container<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Da wir ein neuen <strong>workspaceFolder<\/strong> eingestellt haben, ist das Startverzeichnis in Visual Studio Code leer:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"179\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-10-1024x179.png\" alt=\"\" class=\"wp-image-8125\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-10-1024x179.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-10-300x52.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-10-768x134.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-10.png 1526w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Erste Anwendung erstellen<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Basisdatei f\u00fcr die Anwendung erstellen<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"146\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-11.png\" alt=\"\" class=\"wp-image-8127\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-11.png 900w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-11-300x49.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-11-768x125.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nennen Sie die neue Ddatei <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">main.py<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verwenden Sie dann den nachfolgende Code f\u00fcr die Datei<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from fastapi import FastAPI\n\napp =FastAPI()\n\n@app.get('\/')\ndef home():\n\treturn { 'name': 'FastAPI Tutorial' }<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"947\" height=\"315\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-12.png\" alt=\"\" class=\"wp-image-8128\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-12.png 947w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-12-300x100.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-12-768x255.png 768w\" sizes=\"auto, (max-width: 947px) 100vw, 947px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffnen Sie dann ein Terminal (falls noch keines ge\u00f6ffnet ist)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"905\" height=\"90\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-13.png\" alt=\"\" class=\"wp-image-8131\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-13.png 905w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-13-300x30.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-13-768x76.png 768w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Starten Sie dann den Webserver mit dem nachfolgenden Kommando:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">uvicorn main:app --reload --port 5000 --host 0.0.0.0<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-14-1024x452.png\" alt=\"\" class=\"wp-image-8132\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-14-1024x452.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-14-300x133.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-14-768x339.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-14.png 1177w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffnen Sie einen Browser mit dem Link <a href=\"5000\" target=\"_blank\" rel=\"noreferrer noopener\">localhost:5000<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"893\" height=\"195\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-15.png\" alt=\"\" class=\"wp-image-8133\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-15.png 893w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-15-300x66.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-15-768x168.png 768w\" sizes=\"auto, (max-width: 893px) 100vw, 893px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR Das Repository zu diesem Blog finden sie hier. Voraussetzung F\u00fcr die Durchf\u00fchrung dieses Tutorials ben\u00f6tigen Sie Visual Studio Code, sowie Docker. Docker Installieren Sie Docker, indem Sie die Anwendung Docker Desktop herunterladen. Sie finden den Download hier: https:\/\/www.docker.com\/products\/docker-desktop Eine Installationsbeschreibung finden Sie hier Visual Studio Code Installieren Sie Visual Studio Code mit Hilfe des Zip-Archiv. Sie k\u00f6nnen es von hier herunterladen: https:\/\/code.visualstudio.com\/#alt-downloads Hinweis: https:\/\/code.visualstudio.com, danach den Link Other platforms Speichern Sie das Zip-Archiv und packen Sie es im gew\u00fcnschten Programmverzeichnis aus. Im Programmverzeichnis von Visual Studio Code erstellen Sie den Order data. Damit wird der portable Mode aktiviert. In diesem [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/image-16.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/8108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=8108"}],"version-history":[{"count":27,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/8108\/revisions"}],"predecessor-version":[{"id":8526,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/8108\/revisions\/8526"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/8135"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=8108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=8108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=8108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}