vs-code-ubuntu-server一个基于Ubuntu系统的vs-code浏览器镜像

适用范围：比较适合本地开发，服务器到本地因延迟问题体验不够好，但本地非常合适，比如Macos、Ubuntu、WIN10-wsl或桌面版docker。

0.特点：

• Ubuntu作为基础镜像，支持安装任意工具
• 通过浏览器打开vscode,支持安装扩展插件。

1.镜像文件

以codercom/code-server构建的vscode-server为出发点，从而可以构建我们想要的镜像。比如以php开发环境为例：

FROM codercom/code-server as builder

FROM ubuntu:18.04

# Copy code-server from builder image
COPY --from=builder /usr/local/bin/code-server /usr/local/bin/code-server

RUN apt-get update && apt-get install -y curl gpg
# Add the vscode debian repo
RUN curl -sSL https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor | apt-key add -
RUN echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list

RUN apt-get update && apt-get -y install \
	code \
    dumb-init \
	libasound2 \
	libatk1.0-0 \
	libcairo2 \
	libcups2 \
	libexpat1 \
	libfontconfig1 \
	libfreetype6 \
	libgtk2.0-0 \
	libpango-1.0-0 \
	libx11-xcb1 \
	libxcomposite1 \
	libxcursor1 \
	libxdamage1 \
	libxext6 \
	libxfixes3 \
	libxi6 \
	libxrandr2 \
	libxrender1 \
	libxss1 \
	libxtst6 \
	--no-install-recommends \
	&& rm -rf /var/lib/apt/lists/*
    
ENV HOME /home/user
RUN useradd --create-home --home-dir $HOME user \
    && mkdir /var/www/html -p \
	&& chown -R user:user $HOME /var/www/html

# package vscode extension for PHP dev
ENV VSCODEEXT /var/vscode-ext
RUN mkdir $VSCODEEXT \
    && chown -R user:user $VSCODEEXT \
	&& su user -c "code --extensions-dir $VSCODEEXT --install-extension felixfbecker.php-intellisense --install-extension felixfbecker.php-debug --install-extension whatwedo.twig"
WORKDIR /var/www/html

EXPOSE 8443

ENTRYPOINT ["dumb-init", "code-server"]
CMD ["--allow-http", "--no-auth"]

# docker run -it -p 8443:8443 mm

或者使用本站制作好的镜像，直接运行即可：

docker run -itd -p 8443:8443 baiyuetribe/vscode-ubuntu-server

2.拓展

如何将vs-code-server扩展到已有的docker程序？

构建一个镜像，Dockerfile内容如下：

FROM codercom/code-server as builder
#用于获取vs-code-server服务。

#从已有镜像构建
FROM 现成的docker镜像

# Copy code-server from builder image
COPY --from=builder /usr/local/bin/code-server /usr/local/bin/code-server

EXPOSE 8443 80

ENTRYPOINT ["dumb-init", "code-server"]

然后build后重新运行即可，对于多容器，请修改docker-compose.yml中的原始镜像后再次up即可。

3.浏览器版本的vs-code和vs-remote容器优缺点对比

浏览器版：插件一次按照，后期使用时依旧存在；不过一般的插件也不大，可随时安装卸载

vs-remote容器：有点时可随时进入任何非alpine镜像制作的容器中，缺点时插件安装及使用在推出后无保留。

换句话说：

浏览器版vs-code更贴近原生linux系统+docker ;而vs-remote只符合原生linux的特性。

因此，如果你比较专注一个项目，那么浏览器版vs-code集成到你的镜像是非常不错的选择；如果你想临时调试或者需要调式多个程序，那么v-remote无疑是最佳选择。