我尝试使用VScode+Docker共享React的开发环境

1 年 ago
清, 宇
2 minutes

尝试使用Docker+VScode Remote-Container搭建React+TypeScript的开发环境。

听说使用VS Code的Remote Development可以在Docker中共享开发环境。
这样一来，我们可以在项目中统一环境，不管是在Windows还是在Linux下都能够以相同的方式进行开发。

系列文章列表

 

准备工作

必备工具 (bì jù)

    • VScode

 

    Docker Desktop(またはdocker, docker-composeコマンド)

安装VScode的Remote Development插件。

我正在Windows10和Fedora36上进行操作确认。

创造环境

首先，使用vscode+docker创建一个空的开发环境。
创建一个空的项目文件夹，并在其中创建一个.devcontainer文件夹。

在VScode的Remote-Container中，Microsoft提供了alpine和nodejs的默认镜像，但由于想要进行各种自定义，所以选择从alpine构建。
如果要使用默认镜像，则无需创建devcontainer.json等文件，直接执行”Open Folder in Container”即可。

创建devcontainer.json文件、docker-compose.yml文件和Dockerfile文件。
可从以下位置下载devcontainer.json和docker-compose.yml的示例文件。

 

Dockerfile 的翻译选项：
容器文件

FROM alpine:3.16

RUN adduser --disabled-password vscode

RUN apk add bash

WORKDIR /workspace

USER vscode

docker-compose.yml的汉语本地化的版本：

version: '3.8'
services:
  dev:
    image: sample-react-express-dev

    hostname: dev

    user: vscode

    build:
      context: .
      dockerfile: Dockerfile

    volumes:
      - ..:/workspace:cached,z

    command: /bin/sh -c "while sleep 1000; do :; done"

devcontainer.json翻译成中文可以为”开发容器文件.json”。

{
	"name": "sample-react-express",

	"dockerComposeFile": [
		"docker-compose.yml"
	],

	"service": "dev",

	"workspaceFolder": "/workspace",

	"remoteUser": "vscode"
}

创建文件后，尝试使用docker-compose进行构建测试。

docker-compose -f .devcontainer/docker-compose.yml build

在构建成功后，用Ctrl+Shift+P打开命令面板，并输入”Remote-Containers: Open Folder in Container”来执行。

image.png

选择项目文件夹并打开。
完成Docker的构建和启动后，将显示屏幕。
您可以在右下角的终端中使用Linux命令。

如果终端没有显示，可以按Ctrl+@显示。
如果要打开新的终端，可以点击终端右上方的“+”按钮。

image.png

可以在Windows上使用Linux命令，因此可以基于此创建环境。

添加节点

在Dockerfile中安装Node、NPM、PNPM和TypeScript。

Dockerfile: Docker文件

RUN apk add nodejs=16.20.1-r0
RUN apk add npm

RUN npm install -g pnpm

RUN npm install -g typescript@4.7.4

尽量使用apk来进行安装，例如使用apk命令来安装节点。

可以通过以下链接在apk上确认可安装的nodejs软件包版本：https://pkgs.alpinelinux.org/package/v3.16/main/x86_64/nodejs。
如果需要的版本不存在，则需要使用wget进行下载。

从菜单的“文件”>“关闭远程连接”选项中关闭项目一次。

重新构建Docker镜像。

docker-compose -f .devcontainer/docker-compose.yml build
image.png

当再次使用 “Remote-Containers: Open Folder in Container” 命令打开文件夹时，会反映项目。

image.png

创建React项目

使用Vite创建项目。
在终端中运行以下命令以创建React示例项目。

pnpm create vite front --template react-ts

设置端口

Vite在默认情况下使用随机端口，但是在docker中，如果不固定端口会造成不便，所以需要修改配置。

文件

  "scripts": {
    "dev": "vite --port 3000 --host",

固定端口，并使服务器可以从外部访问。

docker-compose.yml文件

    ports:
      - 3000:3000

允许打开端口3000以便访问。

快速启动Vite

重新创建容器和镜像。

打开项目并使用pnpm dev命令来启动。

cd front
pnpm install
pnpm dev

只需一种选项，用中文将以下句子改写：
通过浏览器访问http://localhost:3000/，如果能够显示Vite + React的界面，则表示成功。

image.png

Git 兼容。

为了支持git，需要额外安装git和openssh。

Dockerfile 皮埃萊尔

RUN apk add openssh
RUN apk add git

.gitignore 文件

将ssh密钥排除在git的管理范围之外，以避免提交。

/.ssh

如果更改了设置，重新在Docker中构建并再次打开文件夹。
这样，只需将密钥文件（id_rsa、id_rsa.pub）复制到.ssh文件夹中，就可以在容器内使用git。

项目的分发

只需要一种选项：
在通过git获取项目后，可以使用vscode的Remote-Containers: Open Folder in Container功能来打开项目文件夹，即可立即开始开发，并创建开发环境。当准备好环境后，在终端中运行以下命令即可启动vite的开发服务器。

cd front
pnpm install --frozen-lockfile
pnpm dev

示例代码

请以母语中文进行重新表述，只需一种选项：
https://github.com/betarium/sample-react-express/tree/0.1.3

✖
广告
将在 10 秒后关闭
bannerAds