EdwardElricNavigate back to the homepage

尝试一下 VSCode Remote 开发 Node 应用

Edward Elric
May 17th, 2019 · 1 min read

第一步 安装 VSCode Insiders

VSCode Insiders 官网

https://code.visualstudio.com/insiders/code.visualstudio.com

目前只能在 VSCode Insiders 版本体验 Remote Development

第二步 安装 Remote Development 插件

Remote Development 插件

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpackmarketplace.visualstudio.com

第三步 配置 SSH Config

SSH 配置文件

SSH 配置文件

1Host ubuntu
2HostName <your-remote-host>
3User ubuntu

这里需要准备一个远端的机器,这样可以直接访问到服务器的文件。

远端文件管理

第四步 编写 Node 应用

一个简单的 node 应用

基本就 4 个文件,已经放到 github 上: https://github.com/SASUKE40/docker_web_appgithub.com

第五步 构建推送 docker 镜像

Docker Hub

https://hub.docker.com/hub.docker.com

在应用项目目录下执行镜像构建

docker build -t edward40/node-web-app .

查看构建的镜像

docker images

构建查看 Docker 镜像

本地试跑镜像

1docker run -p 3000:8080 -d edward40/node-web-app

访问 http://localhost:3000

本地查看效果

推送 Docker 镜像可以在终端执行

1docker push edward40/docker_web_app:tagname

不过这里我用官方的自动化构建

配置自动化构建镜像

只要推送代码就会 build 出镜像

自动化构建流程

第六步 服务器上跑镜像

在 SSH 终端中拉取 Node 应用镜像

1sudo docker pull edward40/docker_web_app

服务端拉取镜像

服务端启动 Container

1sudo docker run -p 80:8080 -d edward40/docker_web_app

第七步 本地开发 Docker Container

安装 Docker 插件

https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-dockermarketplace.visualstudio.com

项目目录创建配置文件

创建 Container 配置文件

创建 Container 配置文件

不过因为使用 Alipine 导致无法打开

12

需要切换别的 Linux 系统,并增加 .devcontainer.json 文件

1{
2 "name": "Node.js Sample",
3 "dockerFile": "Dockerfile",
4 "appPort": 3000,
5 "extensions": []
6}

Dockerfile 的 alpine 换成 lts 版本

1FROM node:lts
2
3# Create app directory
4
5WORKDIR /usr/src/app
6
7# Install app dependencies
8
9# A wildcard is used to ensure both package.json AND package-lock.json are copied
10
11# where available ([email protected]+)
12
13COPY package\*.json ./
14
15RUN npm install
16
17# If you are building your code for production
18
19# RUN npm ci --only=production
20
21# Bundle app source
22
23COPY . .
24
25EXPOSE 8080
26CMD [ "npm", "start" ]

点击右下在容器中打开

点击右下在容器中打开

打开 Shell

最终可以在容器中方便用终端

最终可以在容器中方便用终端

使用容器终端

使用容器终端

使用总结

VSCode 的 Remote SSH 插件完美击中运维痛点,以后可以抛弃 Vim 直接在 VSCode 里面改东西,非常方便。 而 Remote Containers 插件就有点鸡肋,连到 Docker 容器中好像也没什么大的意义。个人更倾向代码提交触发 Docker Hub 的自动构建能力,并服务器上更新 Docker 镜像容器这样的工作流。如果有小伙伴发现这个插件更好的用法务必留言。 最后,VSCode Remote Development 快快 Release 吧!

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Edward Elric

试玩 deno2

前言 ry 近期把 deno 的第二版原型从 deno2 文件夹中转移到 src 上了,并初步完成之前定下针对 unprivileged 部分的改造目标: Use the gn build system for fast builds, sane configuration…

June 28th, 2018 · 1 min read

你可能不需要 Derived State

React 16.4 包含了一个   getDerivedStateFromProps 的 bugfix ,这个 bug 导致一些 React 组件潜在的 bug…

June 15th, 2018 · 2 min read
© 2015–2020 Edward Elric
Link to $https://twitter.com/sasuke688848Link to $https://github.com/sasuke40Link to $https://www.linkedin.com/in/sasuke/