使用VSCode的远程开发功能，在Docker中的Node.js和Redis环境中进行工作

1 年 ago
清, 扬
4 minutes

我使用了一个扩展插件集合——”Remote Development Extension Pack”，它可以在2019年5月发布的Visual Studio Code中打开远程机器、容器和Windows子系统Linux（WSL）上的工作区。

remote-development0.JPG

安装这个扩展包后，你可以通过你的”Visual Studio Code”连接到远程环境，并在那里进行应用程序开发等操作。

本次，我们将尝试基于Microsoft的VSCode Remote Try Node存储库，配置Node.js连接到处理Redis的Docker容器。

1. 查看 Visual Studio Code 的版本

在稳定版（1.35 版）中，可以使用远程开发扩展。如果您的版本太旧，请使用 Visual Studio Code 的 [帮助]->[检查更新] 或者 https://code.visualstudio.com/updates 等方法升级到最新版本。

安装扩展功能”Remote Development”。

vscode0.JPG

3个项目的结构 gè de

在克隆 Microsoft 的 VSCode Remote Try Node 存储库后，您可以调整最基本的目录结构，然后添加/删除所需的文件。


[Project Home]
|_ .devcontainer
|    |_  devcontainer.json 
|    |_ ubuntu-bionic-core-cloudimg-amd64-root.tar.gz
|  
|_ .vscode
|    |_  launch.json
|  
|_  build
|    |_  server.js
|_  src
|    |_  server
|         |_  main.ts
|_  store
|    |_  redis
|         |_  .gitkeep
| 
|_  Dockerfile
|_  docker-compose.yml
|_  package.json
|_　tsconfig.json
|_　tslint.json
|_  webpack.config.js

在公式中，我们将Dockerfile放置在.devcontainer文件夹下，但由于我们希望将本地文件夹store/redis和Docker容器内的文件夹同步以实现数据持久化，我们将Dockerfile放在主目录下。

此外，我们的公式将使用node:10镜像作为基础，但是这次，我想创建一个在Linux镜像上安装了npm和node.js的容器，然后将其与redis容器进行关联。

起初，我们计划以轻量级Linux的代表之一Alpine为基础，但似乎Remote Development在Stable版的VSCode上不支持Alpine，因此我们别无选择，只能使用最小化的Ubuntu。

最小的Ubuntu映像文件已从以下存储库下载，并放置在.devcontainer目录中。

请提供以下网址对应的中文翻译：https://github.com/tianon/docker-brew-ubuntu-core/blob/59aa7dfef17153ecc812adbf26516675ce67e8aa/bionic/Dockerfile

设置 4 远程开发

devcontainer.json的翻译为：构建容器文件.json

{
    "name": "node.js and redis sample ",
    "dockerComposeFile": [
        "../docker-compose.yml"
    ],
    "service": "node",
    "appPort": 3000,
    "extensions": [
        "VisualStudioExptTeam.vscodeintellicode",
        "dbaeumer.vscode-eslint",
        "eg2.tslint"
    ],
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "shutdownAction": "none" 
}

以下のものが挙げられます:

使用service参数指定在容器中运行的node.js服务名称。
使用appPort参数指定node.js监听的端口。
使用dockerComposeFile参数指定docker-compose.yml文件的相对路径。
使用extensions参数添加在远程VSCode上使用的扩展功能。

顺便说一下，我常用的VSCode扩展功能列表如下。

code --list-extensions | xargs -L 1 echo code --install-extension

可以在中文中获取。

Docker的配置设置为5。

Dockerfile的中文翻译：

FROM scratch
ADD .devcontainer/ubuntu-bionic-core-cloudimg-amd64-root.tar.gz /
RUN set -xe \
    \
    && echo '#!/bin/sh' > /usr/sbin/policy-rc.d \
    && echo 'exit 101' >> /usr/sbin/policy-rc.d \
    && chmod +x /usr/sbin/policy-rc.d \
    \
    && dpkg-divert --local --rename --add /sbin/initctl \
    && cp -a /usr/sbin/policy-rc.d /sbin/initctl \
    && sed -i 's/^exit.*/exit 0/' /sbin/initctl \
    \
    && echo 'force-unsafe-io' > /etc/dpkg/dpkg.cfg.d/docker-apt-speedup \
    \
    && echo 'DPkg::Post-Invoke { "rm -f /var/cache/apt/archives/*.deb /var/cache/apt/archives/partial/*.deb /var/cache/apt/*.bin || true"; };' > /etc/apt/apt.conf.d/docker-clean \
    && echo 'APT::Update::Post-Invoke { "rm -f /var/cache/apt/archives/*.deb /var/cache/apt/archives/partial/*.deb /var/cache/apt/*.bin || true"; };' >> /etc/apt/apt.conf.d/docker-clean \
    && echo 'Dir::Cache::pkgcache ""; Dir::Cache::srcpkgcache "";' >> /etc/apt/apt.conf.d/docker-clean \
    \
    && echo 'Acquire::Languages "none";' > /etc/apt/apt.conf.d/docker-no-languages \
    \
    && echo 'Acquire::GzipIndexes "true"; Acquire::CompressionTypes::Order:: "gz";' > /etc/apt/apt.conf.d/docker-gzip-indexes \
    \
    && echo 'Apt::AutoRemove::SuggestsImportant "false";' > /etc/apt/apt.conf.d/docker-autoremove-suggests

RUN rm -rf /var/lib/apt/lists/*

RUN sed -i 's/^#\s*\(deb.*universe\)$/\1/g' /etc/apt/sources.list

RUN mkdir -p /run/systemd && echo 'docker' > /run/systemd/container

# Configure apt and install packages
RUN apt-get update && \
    yes | apt-get install \
    curl \
    git \
    npm \
    nodejs
WORKDIR /home
SHELL ["/bin/bash", "-c"]

基本上，按照 https://github.com/tianon/docker-brew-ubuntu-core/blob/59aa7dfef17153ecc812adbf26516675ce67e8aa/bionic/Dockerfile 的原样进行。作为额外项，在以下的#Configure apt and install packages中，将安装所需的模块。

docker-compose.yml文件

version: '3'
services:
  node:
    build:
       context: .
       dockerfile: Dockerfile  
    container_name: node-container
    volumes:
      - .:/home
    ports:     
       - 3000:3000
    command: sh -c 'npm install & node build/server.js'
    links:
      - "redis"
  redis:
    restart: always
    container_name: redis-container
    image: redis:latest
    volumes:
        - ./store/redis:/data
    ports:
        - "6379:6379"
    command: redis-server --appendonly yes

使用上述的Dockerfile创建一个Node镜像，并将官方的redis:latest镜像与其链接起来。
需要特别注意的是，在redis的部分，我们将本地的store/redis与容器内的data文件夹进行同步，以实现数据持久化。

6 package.json的配置

本次例子展示了如何使用Webpack将TypeScript进行转译。

由于在2019年7月目前的最新版本 webpack 4.29.0 中出现了最大函数调用堆栈错误，因此我们选择了旧版本来解决问题。

{
  "name": "node.js and redis sample",
  "version": "1.0.0",
  "devDependencies": {
    "@types/app-root-path": "",
    "@types/express": "",
    "@types/node": "",
    "@types/redis": "",
    "path": "",
    "ts-loader": "",
    "tslint": "",
    "tslint-loader": "",
    "typescript": "",
    "webpack": "4.17.1",
    "webpack-cli": "",
    "webpack-node-externals": ""
  },
  "dependencies": {
    "app-root-path": "",
    "express": "",
    "redis": ""
  },
  "private": true
}

7 使用Node.js进行服务器配置

这是一个使用Express搭建Web服务器并使用Redis来计算POST请求次数的例子。


'use strict';
import * as root from 'app-root-path';
import * as express from 'express';
import * as redis from 'redis';

/**
 * Configure Redis
 */
const client: redis.RedisClient = redis.createClient(6379, 'redis');
client.on('connect', () => console.log('Connected to Redis'));
client.set('visit', '0');

/**
 * Configure Web Server
 */
const app: express.Application = express();
app.use(express.static('.'));
app.post('/api',  (_req: express.Request, res: express.Response) => {
    client.get('visit', (_err: Error|null , visit: string) => {
      res.send('POST request received. Number of Visits:' + visit);
      client.set('visit', String(parseInt(visit, 10) + 1));
  });
});

// tslint:disable-next-line:typedef
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on ${port}`));

8 进行

Inkedremote-development1.jpg

如果已经执行了docker-compose up –build命令，选择”Attach to Running Container”（蓝色）；如果还没有执行，则选择”Open Folder in Container”（红色），然后指定当前的主目录，这样docker-compose up –build命令将自动运行。如果构建成功，将启动用于VSCode的远程开发窗口。

Inkedremote-development2.jpg

在打开的窗口上，从“打开文件夹”选项中选择任意的文件夹，然后您可以使用VS Code编辑容器中的文件。

remote-development4.JPG

对Redis进行操作验证到底数量有多少。

进行调试：curl -X POST http://localhost:5000/api/redis/check

 curl -X POST http://localhost:3000/api

如果返回POST的总数，就表示成功。

POST request received. Number of Visits:[POSTの回数]

十个我参考过的网站

我参考了下面的页面。

以下是一些原生中文的选项：

– https://code.visualstudio.com/updates/v1_35
– https://qiita.com/yoskeoka/items/01c52c069123e0298660
– https://qiita.com/mizuhof/items/7bc20538c9fe1edcba40
– https://katsu-tech.hatenablog.com/entry/2017/10/11/233024
– https://blog.manabusakai.com/2018/08/minimal-ubuntu-dockerfile/

此外，本次架构已在Github上公开，请随时提出您的意见和建议。谢谢。

请尝试使用 Node.js、TypeScript 和 Redis 的远程开发环境，GitHub 链接如下：
https://github.com/snst-lab/vscode-remote-try-node-typescript-redis

✖
广告
将在 10 秒后关闭
bannerAds