docker
docker搭建开发环境
本文档使用 MrDoc 发布
-
+
首页
docker搭建开发环境
# docker搭建开发环境 [如何用 docker 打造前端开发环境 - 掘金 (juejin.cn)](https://juejin.cn/post/7017129520649994253#heading-6) ### 用 docker 做开发环境的好处 1. 将开发环境配置到`docker`中就避免我们在自己电脑上进行配置了,对于不同的项目可以做不同的环境配置,在开发的时候只要启动对应的`容器` 就好了,减少本机的环境配置。 2. 对于前端来说每个项目使用的`nodejs`版本可能都是不一样的,安装多个版本切换也是比较麻烦的,虽然现在有了`vlota`可以自动根据项目进行切换版本 3. 在使用新电脑的我们需要对电脑再次进行配置,有些浪费时间,使用`docker`直接拉去`镜像`直接一步到位 4. 对于有洁癖的人来说 `nodejs` `git`等等都需要安装到不同的磁盘不同的文件夹下面,会浪费更多的时间,在`docker`只需要创建一次就好了 5. 再出现新工具的时候,想要使用新工具还需要再本机是否兼容,基本上所有的工具都是支持`linux`的 6. …… 以上是在本机配置开发环境的缺点以及使用`docker`的优点 使用`docker`的缺点是电脑上需要安装`docker 客户端`、需要一些`docker`技术,但是对比下来也不算是太大的缺点了 ### 安装docker 到 docker 官网([www.docker.com](https://www.docker.com/ "https://www.docker.com/"))下载 `docker desktop` 并安装,网上资料很多,自行查阅。 需要用到的命令: * `docker login`docker 登录 * `docker pull` 拉去镜像 * `docker images` 查看本地的镜像 * `docker run -itd --name 容器的名称 -v 本机的目录:容器的目录 镜像名称或ID /bin/bash` 用于启动并运行Docker容器的Docker命令 > 1. **docker run**: Docker的命令,用于创建并启动一个新容器。 > 2. **-itd**: > > * `-i` (`--interactive`): 保持容器的标准输入开放,让容器可以接收输入。 > * `-t` (`--tty`): 分配一个伪终端,这通常用于在容器中保持一个交互式shell的环境。 > * `-d` (`--detach`): 后台运行容器,并返回容器的ID。这允许容器在后台执行,不会占用当前的命令行。 > 3. **--name 容器的名称**: 给容器分配一个自定义名称,方便用户识别和引用容器。 > 4. **-v 本机的目录:容器的目录**: 挂载一个数据卷或目录。这个选项将宿主机的目录映射到容器内的目录,允许容器访问和修改宿主机上的文件。这对于数据持久化或容器间共享数据非常有用。 > 5. **镜像名称或ID**: 指定用于创建容器的镜像。这可以是本地已经存在的镜像,或者如果本地不存在,则Docker会尝试从远程仓库下载。 > 6. **/bin/bash**: 指定容器启动时执行的命令。在这个例子中,命令是启动bash shell,允许用户通过 `docker attach` 命令或 `docker exec -it 容器的名称 /bin/bash` 进入运行中的容器进行交互。 > ### 创建镜像 由于不同的项目使用的`nodejs`版本是不一样的,因此我直接使用`ubuntu`,在`ubuntu`系统中配置属于自己的环境 #### 创建容器并进入 下载`Ubuntu`镜像并运行,对镜像起名称是`dev` ```bash PS C:\Users\fe> docker pull ubuntu Using default tag: latest latest: Pulling from library/ubuntu 7b1a6ab2e44d: Already exists Digest: sha256:626ffe58f6e7566e00254b638eb7e0f3b11d4da9675088f4781a50ae288f3322 Status: Downloaded newer image for ubuntu:latest docker.io/library/ubuntu:latest What's Next? View a summary of image vulnerabilities and recommendations → docker scout quickview ubuntu PS C:\Users\fe> docker run -itd --name dev ubuntu /bin/bash d937be8b7a33e096c8b6b749f876bb055324374ec78c662c667bc83cfc775118 ``` 进入`docker容器` ```bash docer exec -it dev /bin/bash ``` 这样就创建了一个`ubuntu`容器并进入到容器里面 #### 安装基本工具 `ubuntu` 镜像非常纯净(只有 72m),只具备最基本的能力,为了后续方便使用,我们需要更新一下系统,更新前为了速度快一点,先换到阿里的源 修改`/etc/apt/sources.list `文件,将内容改为: ```shell deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse ``` 直接在`docker 客户端`修改也可以  然后在终端中更新系统,依次输入以下命令 ```bash apt-get update apt-get upgrade ``` 安装`sudo`、`git`、`wget`、`curl` `wget `是一个下载工具,我们需要用它来下载软件包,当然也可以选择 axel,看个人喜好 `curl`也是一个下载工具,后面会使用 ```bash apt-get install sudo apt-get install git apt-get install wget apt-get install curl ``` 为了方便开发,创建一个专门用来存储项目的文件夹,后面可以挂载到本地 ```bash cd / mkdir code ``` #### 安装**Volta** 1. **下载并安装Volta**:首先确保您已经安装了Volta。如果还没有安装,可以通过在终端运行以下命令来安装: ```bash curl https://get.volta.sh | bash ``` 这个命令会下载并执行Volta的安装脚本。 安装完之后直接执行第4步就好 2. **配置Shell**:安装完Volta后,需要配置您的Shell以使用Volta来管理JavaScript工具。这通常涉及更新您的Shell配置文件。 3. **更新配置文件**:使用文本编辑器打开您的Shell配置文件,如`~/.bashrc`、`~/.bash_profile`、`~/.zshrc`等。在文件末尾添加以下内容: `~`代表`/root`目录 ```bash export VOLTA_HOME="$HOME/.volta" export PATH="$VOLTA_HOME/bin:$PATH" ``` 这会设置`VOLTA_HOME`环境变量,并将Volta的二进制目录添加到您的`PATH`中,确保Shell使用Volta管理的工具。 4. **应用更改**:更新完配置文件后,通过source命令应用更改。例如,如果编辑的是`~/.bashrc`,您需要运行: ```bash source ~/.bashrc ``` 这个命令重新加载配置文件,应用新的配置。 5. **验证安装**:运行以下命令来验证Volta是否正确配置: ```bash volta --version ``` 6. 这应该会显示安装的Volta版本,表示它已正确设置。 #### 安装开发工具 接下来我们安装`nodejs`等工具 ```bash volta install node@16.18 volta install pnpm yarn nrm volta install @vue/cli@4.5.17 volta install vite ``` 经过以上步骤我们就配置好了基本的开发环境,在这个基础上根据自己的需求在进行配置 ### 测试 打开我们的`vscode`,安装插件[`Dev Containers`](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers),然后点击左下角的远程连接,需要注意`vscode`的版本,最好是更新一下  然后选择`附加到正在运行的容器`,这时候需要确保我们之前创建的容器是运行的,选择我们的容器就好了   点击打开文件夹,打开我们项目目录`code`,打开你终端,创建并运行项目试试 ### 打包镜像 将奖项调整成满足我们开发的状态时就需要打包镜像了,打包成镜像之后,我们就可以随时随地的使用上面配置的环境了 我是将打包好的镜像推送到了[阿里云](https://www.aliyun.com/product/acr?spm=5176.28508143.J_XmGx2FZCDAeIy2ZCWL7sW.70.e939154a2Ip4gZ&scm=20140722.S_product%40%40%E4%BA%91%E4%BA%A7%E5%93%81%40%4088099._.ID_product%40%40%E4%BA%91%E4%BA%A7%E5%93%81%40%4088099-RL_%E5%AE%B9%E5%99%A8-LOC_topbar%7EUND%7Eproduct-OR_ser-V_3-P0_0&accounttraceid=399fdccfcbce4ba2bd2f9b6598276f97dqrj),在个人版中创建实例,创建镜像仓库等,具体步骤上网查阅,很简单。 我们在本机的终端开始打包镜像 将运行的容器打包成镜像 ```bash # commit [容器名称] [镜像名称] docker container commit dev fedev ``` 为镜像打 tag,自处参考阿里云镜像仓库中的操作指南,最后将镜像推送到远程就好了 ```bash docker tag [ImageId] 阿里云地址:[镜像版本号] ```  ### 正式使用 我们拉去仓库中的镜像并进行运行,我们之前创建了`code`文件夹专门用来存放代码,因此将`code`挂载到我们本地 ```bash PS C:\Users\fe>docker pull 阿里云镜像地址 PS C:\Users\fe> docker images REPOSITORY TAG IMAGE ID CREATED SIZE registry.cn-hangzhou.aliyuncs.com/changye/fedevelop 0.2 39228f613454 3 days ago 1.13GB ubuntu latest ba6acccedd29 2 years ago 72.8MB PS C:\Users\fe> docker run -itd --name fedev -v G:\huanjing:/code 39228f613454 /bin/bash 282b4b3d3e25ba630c475170ae5eb983048ce32e832748a30c35b88afaee3559 ``` 进入容器看看`code`文件夹是否存在我们本地`G:\huanjing`文件夹中的内容 ```bash PS C:\Users\fe> docker exec -it fedev /bin/bash root@282b4b3d3e25:/# cd code root@282b4b3d3e25:/code# ls Dockerfile folder-alias.json pcweb sources.list test ``` 接下来我们打开`vscode`运行项目,打开项目之后我们咋终端进入对应的项目中文件夹中,安装依赖并启动 
admin
2024年7月2日 11:41
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码