如何使用WSL、VisualStudioCode和DockerDesktop在Windows上开发Docker应用程序

介绍

Windows Subsystem for Linux 2（WSL 2 或简称 WSL）的出现简化了基于 Linux 的 Windows 开发。 WSL 2 允许与 Docker Desktop 直接集成，并具有使用 Visual Studio Code 直接开发的插件。

在本教程中，您将使用 Visual Studio Code、WSL 和 Docker Desktop 在 Windows 上设置开发环境。 您将在 Docker 中构建 Python Flask Web 服务来演示这些工具的开发功能。

先决条件

为了遵循本指南，您需要：

• 装有 Windows 10 和 WSL 2 的个人计算机：您需要确保 WSL 已正确安装，并且您已将 Ubuntu 20.04 安装到 WSL 中。 您可以按照教程 How To Install the Windows Subsystem for Linux 2 on Microsoft Windows 10 进行设置。
• VSCode Installed：您可以从其官方网站下载并安装VSCode。 您无需担心安装插件。 本教程将讨论所需的插件。

第 1 步 — 安装 Docker Desktop 并连接到 WSL

Docker是开发者用来部署应用的常用开发工具。 Docker Desktop 的优势还在于能够运行并与您的 WSL Linux 环境集成。

通过从 Docker 网站下载 Docker Desktop 并单击 Get Docker 按钮开始下载来设置 Docker。

下载后运行可执行文件并允许它进行更改。

在安装过程中，确保选中 Install required Windows components for WSL 2。 是否需要桌面图标取决于您。

安装过程完成后，系统将提示您注销并重新登录以使更改生效。 单击 关闭 按钮，然后确保注销并重新登录以使更改生效。

重新登录并从 Start 菜单启动 Docker Desktop。

警告： 当你第一次启动 Docker 时，它会提示你一个 Docker 教程。

如果您不熟悉 Docker，可能值得您花时间学习 Docker 教程，但本教程不需要它。 完成本教程或跳过它后，请继续。

将显示 Docker 仪表板。 这是任何正在运行的容器以及 Docker 的设置和状态出现的地方。 如果您看到左下角的徽标是绿色的，则表示 Docker 正在运行。 如果它是黄色的，那么 Docker Desktop 仍在启动； 给它一分钟左右的时间来完成。 如果指示灯为红色，则 Docker 无法启动。

接下来，您需要将 Docker 公开给 WSL，以便您可以在 Ubuntu 环境中运行 Docker。 点击右上角的【X13X】齿轮【X21X】图标打开设置。 从那里您将单击 Resource 选项卡，然后单击 WSL Integration。 您将在那里看到您的 Ubuntu 环境，但已关闭，以及您可能已安装的任何其他 WSL 环境。

在您的 Ubuntu 环境中启用 Docker，方法是单击滑块将其打开，然后单击应用并重新启动 . 重启完成后，您的 Ubuntu 环境将可以访问 Docker。

现在您可以使用 WSL 测试您的 Docker 连接。 打开一个终端到您启用 Docker 的操作系统，在本例中为 Ubuntu，然后运行 Docker hello world 命令：

docker run hello-world

您的 Ubuntu 环境应该下载并运行 hello world 容器并显示其输出。

现在您已将 Docker 连接到 WSL，您将了解如何直接使用 Visual Studio Code 和远程开发扩展在 WSL 中进行开发。

第 2 步 — 使用 Visual Studio Code 的远程扩展在 WSL 中进行开发

您可以将 WSL Ubuntu 环境与您的 Visual Studio Code（以下称为 VSCode）集成，以便能够直接在 Linux 环境中进行开发。

首先，打开 VSCode。 转到窗口左侧的“扩展”选项卡。 搜索 Remote - WSL 会出现 Remote - WSL 扩展。 单击它并单击安装进行安装。

安装完成后，按 CTRL + Shift + P 打开 VSCode 命令对话框。 输入 Remote-WSL 你会看到一些选项出现。 您可以打开新的 WSL 环境、打开现有文件夹等。 选择 Remote-WSL：新建 WSL 窗口。 这将打开一个连接到 Ubuntu WSL 环境的新 VSCode 窗口。

现在您在这个新窗口中，您可以按 CTRL + Shift + ` 或单击导航栏中的 Terminal -> New Terminal 打开一个新终端，然后您将进入WSL 终端。 您创建的任何文件也将存储在 WSL 文件系统中。

现在您已经设置了开发环境，您将使用 Flask 框架构建 Python 微服务，该框架创建 301 重定向到您指定为环境变量的站点并将其打包到 Docker 容器中。

第 3 步 — 设置您的开发人员环境

首先，您需要设置一个开发环境，以便您可以使用 Visual Studio Code 开发您的代码。 导航到左侧的侧边栏，然后单击看起来像一张纸的最上面的图标。 系统将提示您 打开文件夹 或 克隆存储库 。

从这里选择打开文件夹。 默认位置是您的主目录。 选择此选项并单击 确定 。

Visual Studio Code 可能会提示您是否信任此文件夹的作者。 这是一项安全措施，可确保自动执行的代码不会损害您的 PC。 在这种情况下，一切都很好，所以选择 是的，我相信作者 。

现在您应该在左侧的文件资源管理器面板中看到您的主目录。 接下来，创建一个目录来存储您的项目。 导航到带有加号的文件夹图标。 当您将鼠标悬停在图标上时，应该会出现一个弹出窗口，显示 New Folder。 单击此图标以创建一个新文件夹并将其命名为 my-app。 右侧的资源管理器中应出现一个新的空目录。

您现在已经设置好开发环境，并准备好在下一步中构建您的 Python 微服务。

第 4 步 — 为您的项目创建 Python 虚拟环境

在开始编码之前，您需要设置 Python 开发人员环境。 在此步骤中，您将在虚拟环境中安装和激活 Python 需求，以便于管理。

您可以在 Visual Studio Code 的终端中完成所有这些操作。 按 CTRL + Shift + ` 组合键打开一个新终端或单击顶部导航栏中 Terminal 部分下的 New Terminal。 完成此操作后，您应该会在 Visual Studio Code 窗口的底部看到一个新终端。

从此终端导航到您为代码创建的目录 my-app。

cd my-app

接下来，安装 python3-venv Ubuntu 软件包，以便您可以创建 Python 虚拟环境。

sudo apt update && sudo apt install python3-venv

现在使用 Python 创建您的虚拟环境：

python3 -m venv myapp

这将在您的当前目录中创建一个名为 myapp 的目录。 在内部，它将安装 Python 的本地版本和 Python 的包管理器 pip 的本地版本。 您可以使用它为您的项目安装和配置隔离的 Python 环境。

在安装项目的 Python 要求之前，请激活虚拟环境：

source myapp/bin/activate

您的提示应更改以指示您现在正在 Python 虚拟环境中操作。 它看起来像这样：(myapp)user@host:~/my-app$。

激活虚拟环境后，使用 pip 的本地实例安装 flask 和 gunicorn：

pip install flask gunicorn

注意：一旦你激活了你的虚拟环境（当你的提示前面有(myapp)），使用pip而不是pip3，即使你是使用 Python 3。 无论 Python 版本如何，该工具的虚拟环境副本始终命名为 pip。

现在您已经安装了软件包，您需要保存此需求及其依赖项。 这是一种很好的做法，因此您可以根据需要重新创建开发人员环境，并有助于在后续步骤中将正确的包安装到您的 Dockerfile 中。

使用 pip 将环境信息保存到 requirements.txt 文件：

pip freeze > requirements.txt

现在您已经有了一个可以工作的开发虚拟环境，让我们构建微服务。

第 5 步 — 构建 Python 微服务以重定向流量

您需要做的第一件事是创建一个名为 app.py 的 Python 文件和一个 Dockerfile 来指定您的 Docker 要求。 您可以通过终端使用 touch 命令创建文件，然后刷新资源管理器：

touch app.py

您也可以使用文件资源管理器创建一个新文件，方法是单击您的 my-app 文件夹，然后单击看起来像一张加号的纸的 New File 图标签名，然后输入文件的全名和扩展名。

使用任一方法创建 app.py 和 Dockerfile。

完成此操作后，打开 app.py。 您今天要编写的微服务将只有一个端点，由 @app.route("/") 装饰器定义。 此端点将使用 Flask 库中的 redirect 方法执行 301 重定向到环境变量中指定的站点。 如果没有设置环境变量，应用程序将默认重定向到 DigitalOcean 的网站。

通过单击打开 app.py 并添加以下代码行。

添加 import 语句以导入 os 包，这将使微服务能够读取您稍后定义的环境变量：

import os

接下来，从烧瓶库中导入 Flask 类和重定向函数。 您将使用这些来设置您的 Web 框架并将流量重定向到另一个站点。

from flask import Flask,redirect

接下来，创建一个可以在代码中执行的 Flask 对象。 这是您将向其注册路由的 Web 应用程序的实例。

app = Flask(__name__)

在 / 路径上创建一个方法。 您将使用 Flask 实例来装饰函数以指定路由。 在该函数中，您将使用 Flask redirect 函数执行 301 重定向到另一个将从环境变量中读取的站点。 如果未找到环境变量，您的应用将默认重定向到 DigitalOcean 的主页。 这是为了确保您的应用在忘记设置环境变量时不会崩溃。

@app.route('/')
def hello():
    # Attempt to read REDIRECT_TO from the environment. If nothing is set
    # perform a 301 redirect to DigitalOcean's website
    return redirect(os.environ.get("REDIRECT_TO", "https://www.digitalocean.com"), code=301)

最后，创建一个 main 函数，在端口 8080 上运行您的 Flask 应用程序。 地址 0.0.0.0 用于指定您希望您的应用程序在设备的面向外部的网络接口上运行，而不是在本地环回设备上运行，也称为 localhost。

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

完成的app.py可以在下面找到：

# Import the os package to read the environment variable
import os

# Import the Flask class and redirect function from the flask library
from flask import Flask,redirect


# Create a Flask object to be acted upon
app = Flask(__name__)

# Python decorator that specifies the web route that will execute the code below
@app.route('/')
def hello():
    # Attempt to read REDIRECT_TO from the environment. If nothing is set
    # perform a 301 redirect to DigitalOcean's website
    return redirect(os.environ.get("REDIRECT_TO", "https://www.digitalocean.com"), code=301)

# Main function that executes the Flask app
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

完成后，将文件另存为 app.py。

现在您的应用程序已编写完毕，让我们对其进行测试。

第六步——测试你的微服务

现在您的应用程序已经编写完成，是时候测试它了。 在您使用激活的虚拟环境在 Visual Studio Code 中打开的终端中，运行以下命令：

python app.py

您应该会看到类似于以下内容的 Flask 输出：

Output * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead
 * Debug mode: off
 * Running on all addresses.
 * WARNING: This is a development server. Do not use it in a production deployment.
 * Running on https://256.333.112.1:8080/ (Press CTRL+C to quit)

这意味着您的 Flask 应用程序正在运行。 打开浏览器并导航到 localhost:8080。 当您这样做时，您应该会在终端中看到输出并被重定向到 DigitalOcean 的网站。 这是因为您没有为 Flask 应用程序指定重定向到的任何位置，因此它使用默认值。

要停止 Flask 应用，请单击 Visual Studio Code 窗口以确保它处于活动状态，然后按 CTRL+C。 您将看到提示停止，您将再次看到您的终端。

接下来，运行以下命令将重定向设置为其他内容。

REDIRECT_TO="https://digitalocean.com/community/tutorials"

使用命令再次运行您的 Flask 应用程序

python app.py

再次转到您的浏览器并导航到 localhost:8080。 然后，您应该被定向到 DigitalOcean 教程页面。

注意： 如果您计划使用同一个容器测试多个重定向，您可能需要使用一种隐身模式。 大多数现代浏览器都会缓存 301 重定向，因此如果您更改环境变量，您可能最终会在同一个站点上看到您的更改。 使用隐身窗口或清除缓存将对此有所帮助。

有了这个，您的应用程序就完成了，并准备好构建到 Docker 映像中。

第 7 步 — 在 Docker 中构建和运行您的微服务

在这最后一步中，您将使用 Docker 和 Dockerfile 将 Python 应用程序打包为微服务。 Dockerfile 是 Docker 用于创建映像的构建命令列表。 这些可以是安装包、复制文件等的命令。

打开您在上一步中创建的 Dockerfile，以便对其进行编辑。 在这个文件中，你将指定基础镜像，告诉 Docker 你希望代码在哪里运行，创建一个保存重定向目标的环境变量，将所有必要的文件复制到 Docker 镜像，安装必要的 Python 包，最后添加容器运行时将执行的命令。

将以下代码添加到 Dockerfile 以执行此操作。

首先，您需要指定要使用的基本映像。 python 基础映像将包含最新版本的 Python。

FROM python 

接下来，设置您的工作目录。 如果您使用 ssh 连接，这是 Docker 将在其中运行命令并将您放入的默认目录。

WORKDIR /var/www/

将 REDIRECT_TO 环境变量设置为您要重定向到的默认位置。 在这里，我将其设置为 DigitalOcean 的社区教程站点。 当您通过命令行运行映像时，可以更改此设置。

ENV REDIRECT_TO=https://digitalocean.com/community/tutorials

将 app.py 和 requirements.txt 复制到 Docker 容器中，使用目标的完全限定路径。

COPY ./app.py /var/www/app.py
COPY ./requirements.txt /var/www/requirements.txt

运行必要的命令以在 Docker 映像中安装 Python 库要求。

RUN pip install -r /var/www/requirements.txt

最后，设置 image run 命令来运行你的应用程序。 这是每当有人尝试运行您的 Docker 容器时运行的命令。

CMD python3 app.py

下面列出了完整的 Dockerfile。

# Choose your base image
FROM python 

# Set your working directory
WORKDIR /var/www/

# Set environment variable for redirect. Can be overwritten by Docker run command
ENV REDIRECT_TO=https://digitalocean.com/community/tutorials

# Copy the necessary files
COPY ./app.py /var/www/app.py
COPY ./requirements.txt /var/www/requirements.txt

# Install the necessary packages
RUN pip install -r /var/www/requirements.txt

# Run the app
CMD python3 app.py

完成后，保存文件。

现在您可以在本地构建 Docker 映像以进行测试。 运行以下命令来构建您的映像并使用名称 myapp 对其进行标记。 -t 选项将标签应用于 Docker 映像：

docker build -t myapp .

最后，是时候测试你的 Docker 镜像了。 在上面的 Dockerfile 中，您将环境变量 REDIRECT_TO 设置为指向网站。 这将覆盖代码中的默认值，因此当您运行此容器时，您在 Dockerfile 中指定的任何站点都将成为您的新位置。

注意：如果windows提示你授予Docker访问网络的权限，点击允许。

要测试您的图像，请运行以下命令：

docker run -p 8080:8080 myapp

当您的映像运行时，导航到浏览器并在导航栏中键入 localhost:8080，您应该会被重定向到 Dockerfile 中列出的站点。

警告： 有时 WSL 终端无法将 CTRL + C 识别为停止 Docker 映像的一种方式。 在这种情况下，您需要打开另一个终端并使用以下命令搜索正在运行的 Docker 映像：

docker container ls

这将显示与此类似的输出：

OutputCONTAINER ID   IMAGE     COMMAND                  CREATED              STATUS              PORTS                                       NAMES
3f081712283e   myapp     "/bin/sh -c 'python3…"   About a minute ago   Up About a minute   0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   reverent_saha

获取容器 id，在本例中为 3f081712283e 并使用 docker kill 命令停止它。

docker kill 3f081712283e

最后，让我们测试一下在 docker run 命令中更改重定向的环境变量。

键入以下命令将环境变量更改为 DigitalOcean 云控制台页面，https://cloud.digitalocean.com。

docker run -p 8080:8080 -e REDIRECT_TO=https://cloud.digitalocean.com myapp

现在，如果您转到浏览器并浏览到 localhost:8080，您将被重定向到命令行中指定的站点。

结论

您已使用 WSL、Visual Studio Code 和 Docker Desktop 在 Windows 上成功设置开发人员环境。 您已经演示了如何在 Windows 上构建、测试和打包代码，从而让您在开发人员环境方面拥有更多选择。