docker搭建前端开发环境

程序员长夜
2,461 阅读8分钟

如何用 docker 打造前端开发环境 - 掘金 (juejin.cn)

用 docker 做开发环境的好处

  1. 将开发环境配置到docker​中就避免我们在自己电脑上进行配置了，对于不同的项目可以做不同的环境配置，在开发的时候只要启动对应的容器​ 就好了，减少本机的环境配置。
  2. 对于前端来说每个项目使用的nodejs​版本可能都是不一样的，安装多个版本切换也是比较麻烦的，虽然现在有了vlota​可以自动根据项目进行切换版本
  3. 在使用新电脑的我们需要对电脑再次进行配置，有些浪费时间，使用docker​直接拉去镜像​直接一步到位
  4. 对于有洁癖的人来说 nodejs​ git​等等都需要安装到不同的磁盘不同的文件夹下面，会浪费更多的时间，在docker​只需要创建一次就好了
  5. 再出现新工具的时候，想要使用新工具还需要再本机是否兼容，基本上所有的工具都是支持linux​的
  6. ……

以上是在本机配置开发环境的缺点以及使用docker​的优点

使用docker​的缺点是电脑上需要安装docker 客户端​、需要一些docker​技术，但是对比下来也不算是太大的缺点了

安装docker

到 docker 官网（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​

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容器​

docer exec -it dev /bin/bash

这样就创建了一个ubuntu​容器并进入到容器里面

安装基本工具

ubuntu​ 镜像非常纯净（只有 72m），只具备最基本的能力，为了后续方便使用，我们需要更新一下系统，更新前为了速度快一点，先换到阿里的源

修改/etc/apt/sources.list​文件，将内容改为：

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 客户端​修改也可以

image​

然后在终端中更新系统，依次输入以下命令

apt-get update
apt-get upgrade

安装sudo​、git​、wget​、curl​

wget​是一个下载工具，我们需要用它来下载软件包，当然也可以选择 axel，看个人喜好

curl​也是一个下载工具，后面会使用

apt-get install sudo
apt-get install git
apt-get install wget
apt-get install curl

为了方便开发，创建一个专门用来存储项目的文件夹，后面可以挂载到本地

cd /
mkdir code

安装Volta

  1. 下载并安装Volta：首先确保您已经安装了Volta。如果还没有安装，可以通过在终端运行以下命令来安装：

    curl https://get.volta.sh | bash

    这个命令会下载并执行Volta的安装脚本。

    安装完之后直接执行第4步就好

  2. 配置Shell：安装完Volta后，需要配置您的Shell以使用Volta来管理JavaScript工具。这通常涉及更新您的Shell配置文件。

  3. 更新配置文件：使用文本编辑器打开您的Shell配置文件，如~/.bashrc​、~/.bash_profile​、~/.zshrc​等。在文件末尾添加以下内容： ~​代表/root​目录

    export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"

    这会设置VOLTA_HOME​环境变量，并将Volta的二进制目录添加到您的PATH​中，确保Shell使用Volta管理的工具。

  4. 应用更改：更新完配置文件后，通过source命令应用更改。例如，如果编辑的是~/.bashrc​，您需要运行：

    source ~/.bashrc

    这个命令重新加载配置文件，应用新的配置。

  5. 验证安装：运行以下命令来验证Volta是否正确配置：

    volta --version

  6. 这应该会显示安装的Volta版本，表示它已正确设置。

安装开发工具

接下来我们安装nodejs​等工具

volta install node@16.18
volta install pnpm yarn nrm 
volta install @vue/cli@4.5.17
volta install vite

经过以上步骤我们就配置好了基本的开发环境，在这个基础上根据自己的需求在进行配置

测试

打开我们的vscode​，安装插件Dev Containers​，然后点击左下角的远程连接，需要注意vscode​的版本，最好是更新一下

image​

然后选择附加到正在运行的容器​，这时候需要确保我们之前创建的容器是运行的，选择我们的容器就好了

image​

image​

点击打开文件夹，打开我们项目目录code​，打开你终端，创建并运行项目试试

打包镜像

将奖项调整成满足我们开发的状态时就需要打包镜像了，打包成镜像之后，我们就可以随时随地的使用上面配置的环境了

我是将打包好的镜像推送到了阿里云，在个人版中创建实例，创建镜像仓库等，具体步骤上网查阅，很简单。

我们在本机的终端开始打包镜像

将运行的容器打包成镜像

# commit [容器名称] [镜像名称]
docker container commit dev fedev

为镜像打 tag，自处参考阿里云镜像仓库中的操作指南，最后将镜像推送到远程就好了

docker tag [ImageId] 阿里云地址:[镜像版本号]

image​

正式使用

我们拉去仓库中的镜像并进行运行，我们之前创建了code​文件夹专门用来存放代码，因此将code​挂载到我们本地

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​文件夹中的内容

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​运行项目，打开项目之后我们咋终端进入对应的项目中文件夹中，安装依赖并启动

image​

avatar
文章
阅读
粉丝