利用docker打造前端宇宙级开发环境

7,671 阅读3分钟

为什么要这么做?

  • 作为前端开发,nodejs必不可缺的东西,但是旧项目可能用低版本的nodejs,而新项目可能用高版本的。就比如旧项目vue2+node-sass这种东西,新项目vite+vue3。这种情况,一般都是用nvm或者volta类似的解决。
  • 换电脑或者家里的电脑,开发环境又要重新弄一次,就很麻烦。我之前是用wtg解决的,虽然很稳定,但是也出过问题,哪怕一年出一次,也是很难受。
  • 新同事或者技术麻麻地的实习生,要他自己弄开发环境,有点勉强,我也懒,不想管。

用docker有什么好处呢?

好处就是解决上面的问题,能偷懒,有更多时间去摸鱼,仅此而已。如果没有上面那些烦恼,大可不必这么麻烦搞docker。

安装 docker

这个有手就行了,不多说了,支持mac、win、linux,不会装就百度。本人用的是window 11,下面例子都是在window11上进行的,其他的自行研究。

使用 ubuntu, 配置开发环境

  • 时间来到安装完docker后,我这用的是ubuntu。
  • 那么打开命令行,执行docker pull ubuntu下载。
  • 下载完之后呢,就执行docker run --name [容器名字] -t -i -d -p 2201:22 -p [电脑的端口]:[容器里的端口] ubuntu创建容器,命令的大概意思自行百度下。
  • 创建完之后呢,进入容器里面的命令行

image.png

  • 更新一下系统 apt-get update apt-get upgrade
  • 安装git apt-get install git
  • 安装 wget apt-get install wget
  • 安装nvm (github.com/nvm-sh/nvm)

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

运行完运行一下它打印出来的那个命令,执行nvm -v检查一下安装是否成功,不成功就百度看看怎么解决就是了

image.png

  • 然后就安装nodejs,自己需要什么版本的就安装什么版本就是了 nvm install v14.19.3 nvm use v14.19.3

image.png

  • 最后一步,安装ssh apt-get install openssh-client apt-get install openssh-server 这里就不详细说了,按照文章执行下去就行了,直到能查看容器的IP就可以了 (参考文章)

  • 时间再次快进到安装完ssh之后,就是连上去测试一下了,我这使用的是xshell和xftp搭配

image.png

  • 连上之后,就设置ssh自启,配置完重启一下重启看看成不成功就行了
$ apt install sudo -y
$ sudo systemctl enable ssh
# 找到并打开文件/root/.bashrc 
$ vim /root/.bashrc 
# 在.bashrc末尾添加如下代码 
$ service ssh start

image.png

  • vscode 安装ssh插件,然后配置一下ssh连接

image.png

image.png

image.png

image.png

  • 连上之后,就可以用git拉取项目进行跑起来了,当然,这还没完,还有些小细节处理一下。我是用的是wls2,他默认在c盘的,所以要移去其他盘,按照下面这篇文章走就行了developer.aliyun.com/article/980…

image.png

  • 然后就是端口映射的问题了,网上有很多方法,我个人喜欢直接修改文件改这个方法,一定要退出docker再修改

image.png

image.png

image.png

image.png

  • 备份docker 容器,个人不建议你直接提交到别人的服务器那里,要么自己弄一个私有的,要么就是本地。

docker ps

image.png

docker commit -p 875f76789483 test-backup

docker save -o D:/docker/备份/test-backup.tar test-backup

另外还能用腾讯的coding制品库来存放,免费的

  • 还原备份的容器 docker load -i D:/docker/备份/test-backup.tar,然后再使用容器创建命令,重新创建就行了docker run --name test -t -i -d -p 2201:22 test-backup

结语

文章到这里基本结束了,多个nodejs环境,可以在容器里用nvm之类的配置,也可以弄成多个docker,这个看个人喜好,代码也记得每天提交一下git。如果各位有疑问或者文章有误的地方,欢迎各位评论交流哦~当然有更好的方案,也可以分享一下!