[Code翻译]教程的问题

233 阅读8分钟

本文由 简悦SimpRead 转码,原文地址 code.visualstudio.com

Laravel如何使用容器化的开发环境来制作一个更好的教程

2022年3月8日 by Burke Holland, @burkeholland

写一个好的教程并不容易。我应该知道--我写过很多,但不是每一个都很成功。

事实证明,编写一本好的教程并不在于你写了什么,而在于开发者是否能在不阅读每一个字的情况下获得成功。在这篇文章中,我们将看看开发容器如何减少用户可能遇到的错误,以及Laravel PHP项目如何在他们自己的教程中优雅地实现这一点,并取得巨大的效果。

没有人读#

我们自己的如何在Visual Studio Code中使用远程容器的教程,长期以来完成率很低--大约4-6%。

为了弄清人们放弃的原因,我们进行了用户研究,观察人们尝试完成我们的教程。这是......痛苦的。

人们无法完成教程的原因马上就清楚了。没有人在阅读它。人们直接跳过说明,直接进入行动步骤。不可避免地,他们会被卡住,因为他们犯了一个错误,如果他们阅读了说明就不会犯这个错误。

宾夕法尼亚州立大学教授约翰-M-卡罗尔在他的开创性著作纽伯格漏斗--为实用计算机技能设计极简主义教学中谈到了这一点。他写道:"[学习者]忙于学习,而没有过多地利用教学。这就是意义创造的悖论"。

我可以体会到这一点,你可能也可以。当我在看教程的时候,我的眼睛正在扫描代码块,因为我正试图通过实践来学习。我真的太忙于学习了,以至于无法阅读说明。

人们不会阅读你的教程,至少不会像你希望的那样。你能做的最好的事情就是尽可能多地删除读者在学习过程中可能犯错的地方。做到这一点的一个方法是,使用预配置的容器环境,完全删除任何环境设置步骤。

容器化开发环境#

任何教程的很大一部分内容通常都是关于先决条件和环境设置的冗长清单。我清楚地记得,我试图学习Ruby on Rails,并花了大部分时间试图让Ruby正确地安装在Windows上--想知道 "gem "到底是什么,为什么它们都莫名其妙地丢失了。

容器化开发环境背后的想法是,你在Docker容器内开发。这使得拥有一个完全可移植的、完全配置好的开发环境成为可能,你可以随意地站起来或推倒。然后你可以把这个环境作为一组配置文件交给别人。

但你如何在容器开发?容器并不像有一个UI,你可以直接启动VS Code。

VS Code的Remote - Containers扩展正是这样做的。它包含将Docker容器配置为开发环境的机制,并允许您从VS Code连接到该环境。它通过在容器中安装一个小的服务器组件来实现这一功能,您的本地VS Code可以与之对话。然后你就像在本地一样开发,但VS Code被连接到容器环境而不是你的本地环境。)

为了创建一个容器化的开发环境,你通常必须了解一两件关于Docker的事情。很多人知道,但也有很多人知道(你看不到我,但我的手在空中),所以这个扩展试图尽可能地将容器设置过程抽象化。我设置了一个新的Python容器。一个向导会引导你选择基本镜像和Python版本。然后,它让你有机会通过一个选择器列表向镜像添加额外的软件。在这种情况下,我添加了Azure CLI、Dotnet CLI和PowerShell...

这个过程为这个项目添加了一个.devcontainer文件夹,其中包括必要的Dockerfile。它还添加了一个devcontainer.json文件,这是一个定义开发容器各个方面的标准,比如哪些扩展应该被安装,哪些设置命令应该在容器构建后运行,等等。由于您可以完全控制环境及其设置,因此您可以自动处理几乎所有的事情 - 包括依赖性安装、库版本等。

通过这种方式,我们有可能向某人提供一个完整的、随时可用的环境,不需要额外的设置步骤,也不需要为Ruby宝石引发生存危机。

有些人已经在使用基于开发容器的方法来让他们的用户快速启动并运行原本非常复杂的环境。这方面的一个很好的例子是PHP的Laravel框架。

Laravel解决方案#

Laravel是一个开源的PHP的MVC框架。它的全面性在于它还包括像对象关系映射器(ORM), 直接数据库访问, 包装系统, 以及更多。Laravel可以做很多事情。而为了体验它, 你真的需要在开始的时候至少要有一个数据库. 通常情况下, 这要求用户不仅要安装PHP, 还要安装一个数据库 - 通常是MySQL. 当用户只是简单的尝试一下你的框架时,这是一个重要的要求。

Laravel通过容器化的开发环境和一个叫做Sail的工具来解决这个问题. 要从头开始使用Laravel, 一个MySQL服务器, 和一个Redis缓存, 你只需要运行一个命令...

curl -s "https://laravel.build/example-app?with=mysql,redis" | bash

这将创建一个新的项目,其中有一个docker-compose文件。这个文件设置了三个容器--一个应用程序容器,一个MySQL容器,和一个Redis容器。你不需要了解任何关于容器或这三种服务的知识。Sail为你抽象出了所有这些。然后你执行Sail命令来启动环境...

./vendor/bin/sail up

示例应用程序就会运行。不用安装PHP。没有Laravel。没有依赖性决议的步骤。只是立即成功。

我指定我们的项目有一个MySQL服务器和一个Redis Cache,所以当项目启动时,我们实际上得到了三个容器。我们可以使用VS Code的Docker扩展看到这一点。

image.png

这些容器是联网的,所以我们可以从app容器中调用MySQL或Redis缓存容器。

如果你用交互式终端连接到sail-8.1/app容器,你会看到你的项目在/var/www/html文件夹中。Docker将项目从你的机器上 "挂载 "到容器中,所以当你刷新时,你在开发过程中的任何变化都会反映在应用程序中。

]

添加远程容器#

还增加了对远程-容器扩展的支持。为了在这个项目中添加适当的开发容器配置,你可以在同一个项目的脚手架上添加&devcontainer标志。

curl -s "https://laravel.build/example-app?with=mysql,redis&devcontainer" | bash

注意,如果你想给现有的Sail/Laravel项目添加一个devcontainer,你可以通过运行php artisan sail:install --devcontainer来实现。

这将创建相同的项目配置,但将包括一个.devcontainer文件夹。VS Code将自动检测该文件夹,并提示您在容器中重新打开项目,从而跳过所需的 sail up步骤。

VS Code附着在容器上,所以你是在的容器环境中开发,而不是在你的本地环境中。你会知道这一点,因为VS Code左下角的远程指示器会告诉你......

在容器中开发而不是在容器外开发有一些明显的好处。

开发上下文镜像应用上下文#

当连接到容器时,你正在开发的上下文与应用程序正在运行的上下文是一样的。所以你的终端会变成容器的终端...

远程 - 容器扩展还可以让你更全面地了解正在发生的事情,比如哪些端口被转发了 - 以防你忘记你的应用程序在哪里运行。

Laravel应用程序会自动启动, 并且应用程序的日志会被输送到容器的日志中. 因为你可能想看看应用程序中发生了什么,远程 - 容器扩展在VS Code中提供了一个新的视图,你可以看到所有正在运行的容器,以及连接到流容器日志。

自动化开发环境设置#

最好的开发者体验要包括对编辑器的定制。这包括编辑器本身的设置,以及任何需要添加到开箱即用体验中的扩展或其他支持。

对于VS Code和Laravel来说,在devcontainer.json中建议了一些扩展,但注释了它们不会被自动安装。这使得用户可以从一组已经确定的扩展中挑选,而不是去寻找正确的方法来配置他们的编辑器。

    ...
    "extensions": [
        // "mikestead.dotenv",
        // "amiralizadeh9480.laravel-extra-intellisense",
        // "ryannaddy.laravel-artisan",
        // "onecentlin.laravel5-snippets",
        // "onecentlin.laravel-blade"
    ],

少读书,多做事#

人们不阅读。而这应该是可以的。Laravel的教程不一定比其他的短,但重要的是,如果你跳过代码,只是运行命令,它就会工作。开发容器使之成为可能。现在,如果我们能弄清楚如何为我们自己的使用Docker容器作为Visual Studio Code的开发环境教程制作一个开发容器...

编码愉快!

Burke Holland (@burkeholland)


www.deepl.com 翻译