在使用docker-compose运行的环境中，添加开发容器并使用vscode进行开发（不使用devcontainer.json文件作为策略）

2 年 ago

文, 翔

2 minutes

那就是什么意思呢？

好的。我知道你說的有點難懂。
為了解釋清楚，我試著用圖解來說明。

首先，我们将当前的开发环境设定为以下环境。

通过执行 “docker-compose up -d” 命令，启动下列容器。

每个容器都连接到Docker网络，因此可以进行通信。
前端和后端好像都挂载了主机端源文件目录并在其上运行。

嗯，我认为这是常见的结构。
我们的目标是在此基础上加入一个用于后端开发的容器，并在其中进行开发。

可以使用现有的后端，但既然有机会就最好单独设置一个环境，使其更整洁！

如果要简洁地概括的话

Let’s 開発！

所以

在试用环境中，我们将使用FastAPI提供的“Full Stack FastAPI PostgreSQL”模板。然而，在撰写本文章的阶段，该模板已停止维护，需要进行一些修改才能运行。有关更多信息，请参阅下面的文章。

那么，使用docker-compose up -d命令来启动容器集合。

$ docker-compose ps
              Name                             Command               State                 Ports              
--------------------------------------------------------------------------------------------------------------
full-stack-fastapi-                 /start-reload.sh                 Up      80/tcp, 0.0.0.0:8888->8888/tcp,::
postgresql_backend_1                                                         :8888->8888/tcp                  
full-stack-fastapi-                 bash /worker-start.sh            Up                                       
postgresql_celeryworker_1                                                                                     
full-stack-fastapi-                 docker-entrypoint.sh postgres    Up      5432/tcp                         
postgresql_db_1                                                                                               
full-stack-fastapi-                 flower --broker=amqp://gue ...   Up      0.0.0.0:5555->5555/tcp,:::5555->5
postgresql_flower_1                                                          555/tcp                          
full-stack-fastapi-                 nginx -g daemon off;             Up      80/tcp                           
postgresql_frontend_1                                                                                         
full-stack-fastapi-                 /entrypoint.sh                   Up      443/tcp, 0.0.0.0:5050->5050/tcp,:
postgresql_pgadmin_1                                                         ::5050->5050/tcp, 80/tcp         
full-stack-fastapi-                 /entrypoint.sh --providers ...   Up      0.0.0.0:80->80/tcp,:::80->80/tcp,
postgresql_proxy_1                                                           0.0.0.0:8090->8080/tcp,:::8090->8
                                                                             080/tcp                          
full-stack-fastapi-                 docker-entrypoint.sh rabbi ...   Up      15691/tcp, 15692/tcp, 25672/tcp, 
postgresql_queue_1                                                           4369/tcp, 5671/tcp, 5672/tcp

首先，在这里添加一个用于开发的容器。
类似于命名并运行它。
请根据您的要求更改为 fastapi-backend-dev 部分。

docker-compose run --name fastapi-backend-dev backend

所以，当容器启动后，请将其停止。

接下来，我们将通过VSCode的远程探测器连接到创建的容器中。
在远程探测器中应该可以看到之前创建的容器的名称。
（关于VSCode的扩展功能，就不详细说明了，请参考相关文档。）

如果有容器的话，可以右键点击->在新窗口中附加到容器。

如果您正在使用“Full Stack FastAPI PostgreSQL”模板，那么请打开/app作为工作目录。

之后应该是和正常的开发一样的……应该是这样的。

在pytest中试着进行调试。

让我们使用VSCode在pytest中进行调试。

首先是先前的資訊。
在 “Full Stack FastAPI PostgreSQL” 模板的後端環境中，Python 3.9 和 3.7 是共存的。

在backend.dockerfile中有一些记录，但是根据环境要求，我们将在vscode中将python引用设置为3.7版本。

接下来就请你自己处理吧。
打开 app/tests/crud/test_item.py 以及其他文件，用 pytest 进行调试吧。

同时清理和格式化同时进行，lint和保存

我会尝试同时对文件进行整理和保存时进行格式化，来记录文件。

首先，让我们添加下述的扩展功能。

ms-python.isort

接下来，在.vscode/settings.json文件中追加以下内容。

 {
+  "editor.formatOnSave": true,
+  "python.linting.enabled": true,
+  "python.linting.flake8Enabled": true,
+  "python.linting.mypyEnabled": true,
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.black-formatter",
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": true
+    },
+  },
+  "black-formatter.args": [
+    "--config",
+    "pyproject.toml"
+  ],
+  "isort.args": [
+    "--settings-file",
+    "pyproject.toml"
+  ],
 }

如果持有者这样做的话。。

尽管在gif中很难理解，但在 = 标记处插入了大量的空格后进行保存。
结果就是它会回到初始状态。

太棒了！

需要注意的是，在主机端将添加 .vscode/settings.json 文件，因此请确保将其忽略不要误提交。

不足之处

一个缺点是，如果重新创建容器，那么 VSCode 的扩展程序等将会被重置，需要重新安装。

如果使用devcontainer.json，能自動化這些事情嗎呢。。。

以上！辛苦了！