本方案的最终效果： 在本地用docker-compose启动一个完整的arkid环境，vscode容器化开发调试arkid后端，无需本地安装python和依赖。 设计思想： 镜像里准备好所需的开发环境，然后本地代码挂载到容器里，在容器里开发启动；docker-compose启动一整套环境，开发和部署的环境是真正的一个环境！

一、程序安装

  • Docker Desktop
  • docker-compose
  • vscode

    需要安装插件：remote-containers、python

二、克隆arkid后端仓库

  1. git clone https://github.com/longguikeji/arkid.git

三、生成后端开发镜像

  1. docker build -t arkid-dev arkid -f arkid/Dockerfile-for-dev

四、启动arkid

  1. cd arkid/devops/docker-compose
  2. docker-compose up -d

五、vscode开发arkid后端

1、打开vscode，点击“Attach to Running Container”, 选择arkid-be
image.png
image.png
2、点击 detail 查看进度
image.png
3、第一次打开之后需要点击 打开文件夹，项目文件在 /root/workspace/arkid
image.png
image.png
4、调试启动
配置文件：

  1. {
  2.     // 使用 IntelliSense 了解相关属性。 
  3.     // 悬停以查看现有属性的描述。
  4.     // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  5.     "version": "0.2.0",
  6.     "configurations": [
  8.         {
  9.             "name": "Python: Django",
  10.             "type": "python",
  11.             "request": "launch",
  12.             "program": "${workspaceFolder}/manage.py",
  13.             "args": [
  14.                 "runserver",
  15.                 "0.0.0.0:80",
  16.                 "--noreload"
  17.             ],
  18.             "django": true
  19.         }
  20.     ]
  21. }

image.png
5、启动之后，把端口暴露到笔记本端口，就可以在本地对接口进行测试了
image.png
image.png

六、vscode开发arkid前端

1、容器中打开
image.png
2、修改配置文件vue.config.js
image.png
image.png
3、启动前端
image.png
4、浏览器访问前端
image.png
image.png

七、问题：

  • vscode中git无法commit/push

    这个无解，因为我们的vscode在容器中，推荐使用 GitHub Desktop 或者 Sourcetree进行版本管理