远程运行前端开发环境

青藤前端团队
1,506 阅读7分钟

by：沐沐

前言

事情起因是多种的

  1. 有越来越多的APP启动，如果有时候不一定哪一个会被找到解决一些问题，那么就需要不断切换开发仓库
  2. 如果想要去翻翻其他APP的代码，想运行了解一下，就要容忍一段npm install时间
  3. 虽然不断迭代更新，但是还是会有些老项目可能会依赖一些其他版本node，nvm来回切换
  4. 部分老应用，新人想维护搭建环境都比较费力
  5. 最重要的原因吧，其实就是觉得好玩 ......

就一直想这怎么可以远程快速启动一个开发环境，本地只需要连接上就可以，这次终于下定决心进行尝试了。

玩起来

整体思路其实也挺简单，就是打一个已经搭建好的 Docker 镜像，谁想跑了就可以重新拉起一个 container 就可以了，然后应用 vscode 的插件来进入容器开发环境进行开发或尝试。

vscode一些好用插件：

  • Remote - SSH：连接远程服务器
  • Remote - Containers：连接本地 container
  • Remote - WSL：这个就是针对 windows 系统了，连接 wsl

环境

  • 服务器：≥ CentOs7.x，方便运行 Docker 的服务器环境都可以，要是有私有的 docker registry 更好（本人尝试过程中，使用 CentOs7.4，有私有 docker registry 环境）
  • vscode：一些插件很好用，开发也还是很方便的（尝试过程实际上就是依赖了 vscode 的能力）
  • 本机：可以安装 Docker，选择去服务器上打镜像也可以；还可以使用 wsl2，windows 运行 Ubuntu 来跑起来也挺有趣的（本人win10主机）

基础镜像搭建

为什么需要基础镜像？理论上前端大部分项目，除了对应的 git 仓库不同，其他的 node、git、ssh 等环境都是相同的，这里就是搭建一个可以运行前端开发的基础环境镜像，方便后续每个 app 都可以基于该镜像二次搭建。

本人尝试过程中，主要搭建了两种基础镜像：

  • git+node：这个主要考虑本地 docker 运行，这里就可以直接 vscode “Remote - Containers”插件进container，进行开发操作，这个也可以被下一种兼容
  • git+ssh+node：这个用于远程服务器的 docker 镜像的运行，这里可以通过 vscode “Remote - SSH”插件连接远程 container，进行开发操作

git-node:12.13.1-slim

拉取镜像

通过命令行，拉取镜像：docker pull node:12.13.0-slim（也可以选择其他自己想要的镜像）

安装git

  1. 命令行设置代理： export http_proxy="<IP>:<Port>"（可以参考下方：node-slim 报错了）
  2. 运行：apt-get update
  3. 运行：apt-get install git -y

git-ssh-node:12.13.1-slim

基于上面镜像，安装ssh即可。

想要ssh自启动，需要通过Dockerfile CMD命令里添加对应脚本，同事还有bash和node也要添加到CMD里，不然构建的镜像启动不起来（怀疑：docker启动后需要有进程一直启动，通过添加命令达到进程跟着容器启动目的）

APP 镜像搭建

到了这一步，就和我们搭建好了环境，只需要正常开发一样了。

  1. 启动容器（这个需要根据你启动容器的主机环境决定怎么启动，windows 可能就是点击就启动了，linux 需要docker run命令）
  2. 进入容器
  3. git clone代码到容器内部

需要学习一些必要docker操作，对于win10操作系统：

  • 会发现GUI操作不能拉取镜像，我也没发现，反正整体就是界面操作不了就用cmd命令行操作即可，当然通过Ubuntu命令行来操作也一样的
  • 启动镜像、进入镜像之类的，倒是不需要命令行了，感觉还是很舒服的

用起来

多种使用方式：

  1. 本机运行，可以通过vscode Remote - Containers打开本机容器进行尝试
  2. 远程运行，可以通过vscode Remote - SSH插件连接远程服务器容器尝试

这里仅介绍远程服务器容器连接开发尝试步骤。

  • vscode安装 Remote - SSH 插件
  • 添加配置 image.png 
     Host <name>
 HostName <host address>
 User <host username>
 Port <host ssh port>
 ForwardAgent yes
  • 连接，需要输入 docker ssh 密码 image.png image.png
  • 打开项目：每次遇到输入密码，输入回车即可，项目地址：APP搭建过程中，git clone 代码地址 image2021-11-3_8-13-0.png
  • 尝试启动项目：这里就是代码正常开发启动命令，比如我这里项目是通过webpack，运行 npm run dev 启动，就在vscode终端对应文件夹输入命令启动即可。

技术点合集

为什么使用node:12.13.1-slim？

node镜像根据tag其实分为三种类型：

  1. node:<version>: 我们直接用的node:12.13.1这种，就是稳定版，内部除了nodejs，还会有一起相关的基础设施，一般用都不会出现问题，但是镜像会大一些
  2. node:<version>-alpine: 这个是最简版，基本是nodejs运行的基础外没有其他，镜像体积也是最小的
  3. node:<version>-slim: 这里就是选择的版本，在上边两者之间，但是体积还是远小于稳定版。选择这个主要是构建难度和构建体积间的一个平衡吧，我本来也不是特别精通镜像与linux

然后就是版本问题，这里其实是随意选择了一个代码支持的最小稳定版而已，大家可以随意选择自己项目合适的版本。

以上都是个人理解，具体还是参考dockerhub-node上的Image Variants部分吧。

代理是 socket5 咋办？

下载 privoxy windows版本，privoxy_3.0.32.zip，下载压缩包版本就是避免安装。

  1. 解压到自己想要安装的目录里
  2. 编辑 config.txt文件
  3. 修改 listen-address 配置，例如改为：listen-address 0.0.0.0:1080
  4. 修改 forward-socks5 配置，例如修改为：forward-socks5 / <socket5 address>:<socket5 port> .（注意最后的那个点，不要丢了）

node-slim 报错了

Could not connect to deb.debian.org:80 (151.101.110.132)...

这个报错是安装git过程中报错，解决方案：

  • socket5转http协议，转换socket5代理为http代理
  • docker exec -it <container> bash 进容器（可视化界面点击可以直接进命令行）
  • 运行：export http_proxy="<IP>:<Port>"
  • 运行：apt-get update

怎么上装 docker？

linux安装官方教程安装即可，已经安装过多次，都没有出问题。

windows 官网下载安装包，按步骤安装即可。但是中间会遇到一些错误，可以通过以下解决。

windows wsl2 报错了

没有启动wsl2

有一些wsl2的报错，可以通过先启动 windows Ubuntu 即可避免错误。

wsl2版本问题

安装docker会遇到wsl2报错问题：

  1. 查看wsl2信息：wsl -l -v，可能查询不到，是正常现象
  2. 关联docker：wsl --import docker-desktop C:\Users\<user>\AppData\Local\Docker\wsl\distro 'C:\Program Files\Docker\Docker\resources\wsl\wsl-bootstrap.tar' --version=2
  3. 这里会报错，报错后给了一个地址：docs.microsoft.com/zh-cn/windo…，执行步骤4、5两步
  4. 下载应用后执行，更新wsl内核版本
  5. 重新运行，关联docker
  6. 重启docker即可，可以查看wsl里存在了docker信息：
docker-desktop-data    Running         2
docker-desktop         Running         2

虚拟机与docker

如果原来有VMware（VBox未确定），那么会和docker存在冲突，不能同时运行，需要关闭虚拟技术（windows功能里，取消Hyper-V，然后重启电脑，以后不要想运行VMware了）

再多聊会

其实写到这里，也仅仅是做了一次尝试，仅是一个开端，还是有不少问题：

  1. 多人开发，怎么快速给一个人启动一个容器。每次登录服务器去手动启动，还是每个人必须安装 docker 环境从远程拉去镜像启动。
  2. 如果启动了，ssh-key 还需要每个容器生成一次，每次生成后还需要绑定到个人的 git 仓库。如果共用 ssh-key 倒是可以减少绑定，但是操作代码会发现都是同一个账号，没法区别账号。
  3. 怎么提高性能。如果远程服务器的话，对于多人的话，远程服务器性能要求高，如果本地运行的话，我在 windows 测试出来，docker 启动会比较慢，好在启动好后性能与直接本地跑前端开发环境性能差别不太大。
  4. ......

这些都是实际要正式使用会遇到的一些问题，也都需要慢慢解决，当前的一个想法是：构建一个项目，通过可视化界面来填写配置、下发快速启动命令，服务端 nodejs 就可以把上面各种问题通过代码解决了，仔细思考发现，理论上都是可行的。

前端岗位不断招聘中，一起来做更好的用户体验，欢迎来撩：yan.zheng@qingteng.cn

avatar
文章
阅读
粉丝