设置 Docker + TypeScript + Node（在正在运行的容器中热重新加载代码更改）🦄🚀

步骤 1：使用 TypeScript 和 Express 创建服务器

第 2 步：Docker 开发和生产步骤

我喜欢 TypeScript，也喜欢 Docker。然而，把这两者结合起来却非常麻烦。

今天，我将引导您完成一个使用 TypeScript/Node 项目的非常基本的多阶段 Docker 设置。

这个设置解决了我在使用该技术栈时遇到的最大挑战......让我的 TypeScript 在生产中编译为 JavaScript，并能够在运行的容器中进行开发，以监视我的 TypeScript 代码中所作的更改。

本教程的所有代码都可以在这里找到:)

喜欢 YouTube？点击此处查看视频教程：

步骤 1：使用 TypeScript 和 Express 创建服务器

让我们用 TypeScript 启动一个简单的 Express 服务器并让它在本地运行（之后我们会将它 dockerize！）。

为项目创建一个目录并进入该目录：

mkdir ts-node-docker
cd ts-node-docker

初始化一个节点项目并在出现提示时添加您想要的任何值（我只​​是通过按下回车键跳过所有内容...）：

npm init

接下来，安装 TypeScript 作为开发依赖项：

npm i typescript --save-dev

下载完成后，创建一个 tsconfig.json 文件：

npx tsc --init

现在我们应该在项目目录的根目录中有一个 tsconfig.json，让我们在其中编辑以下条目：

"baseUrl": "./src"
"target": "esnext"
"moduleResolution": "node"
"outdir": "./build"

baseUrl告诉 TS 我们的 .ts 源代码文件将位于./src文件夹中。

目标可以是你喜欢的任何版本的 JS，我选择esnext。

对于节点项目，必须将moduleResolution设置为节点。

outdir告诉 TS 在编译 TS 文件时将编译后的 JavaScript 代码放在哪里。

接下来，让我们安装 express，然后将其类型作为开发依赖项：

npm i --save express
npm i -D @types/express

太棒了，我们已经准备好编写服务器代码了。让我们在项目根目录下创建一个src/文件夹，并添加一个index.ts文件。

在index.ts中，添加以下代码：

import express from 'express';

const app = express();
app.listen(4000, () => {
  console.log(`server running on port 4000`);
});

这就是我们启动服务器所需要的全部内容，但现在我们需要让它运行起来并观察我们对代码所做的更改。

为此，我们将使用ts-node和nodemon，现在安装：

npm i -D ts-node nodemon

使用 nodemon，我们可以在代码运行时监视文件，而 ts-node 让我们可以非常轻松地运行用 TS 编写的节点项目。

我喜欢在配置文件中设置我的 nodemon，因此我将在项目文件夹的根目录中添加一个 nodemon.json 文件并添加以下选项：

{
  "verbose": true,
  "ignore": [],
  "watch": ["src/**/*.ts"],
  "execMap": {
    "ts": "node --inspect=0.0.0.0:9229 --nolazy -r ts-node/register"
  }
}

这里的关键点是watch命令（它告诉 nodemon 应该监视哪些文件）和execMap中的ts选项。

这告诉 nodemon 如何处理 TS 文件。我们用 node 运行它们，添加一些调试标志，并注册 ts-node。

好的，现在我们可以在 package.json 中添加使用 nodemon 启动项目的脚本了。请继续将以下内容添加到 package.json 中：

"scripts": {
    "start": "NODE_PATH=./build node build/index.js",
    "build": "tsc -p .",
    "dev": "nodemon src/index.ts",
}

dev命令使用 nodemon 启动我们的项目。build命令将我们的代码编译成 JavaScript，start命令运行我们构建的项目。

我们指定NODE_PATH来告诉我们构建的应用程序项目的根目录在哪里。

您现在应该能够使用热重载运行该应用程序，如下所示：

npm run dev 

太棒了！现在让我们把它docker化吧🐳

第 2 步：Docker 开发和生产步骤

如果你还没有安装 Docker，现在就安装吧。我还推荐他们的桌面应用，这两个应用都可以在他们的网站上找到。

接下来，让我们在项目目录的根目录下添加一个Dockerfile，并为开发步骤添加以下代码：

FROM node:14 as base

WORKDIR /home/node/app

COPY package*.json ./

RUN npm i

COPY . .

这会拉入一个节点映像，为我们的容器设置一个工作目录，复制我们的 package.json 并安装它，然后将我们所有的项目代码复制到容器中。

现在，在同一个文件中，添加生产步骤：

FROM base as production

ENV NODE_PATH=./build

RUN npm run build

这扩展了我们的开发步骤，设置了我们的环境变量，并构建了可在生产中运行的 TS 代码。

请注意，我们还没有添加任何命令来运行开发或生产构建，这就是我们的 docker-compose 文件的用途！

在我们的目录根目录创建一个docker-compose.yml文件并添加以下内容：

version: '3.7'

services:
  ts-node-docker:
    build:
      context: .
      dockerfile: Dockerfile
      target: base
    volumes:
      - ./src:/home/node/app/src
      - ./nodemon.json:/home/node/app/nodemon.json
    container_name: ts-node-docker
    expose:
      - '4000'
    ports:
      - '4000:4000'
    command: npm run dev

这将创建一个名为ts-node-docker 的容器，使用我们创建的 dockerfile，并运行构建步骤（参见目标）。

它还为我们的源代码和 nodemon 配置创建卷，您需要它来启用热重加载！

最后，它将我们机器上的端口映射到 docker 容器（这必须与我们用 express 设置的端口相同）。

完成后，我们可以构建我们的docker镜像：

docker-compose build

您应该能够在终端中看到构建步骤。

接下来，我们可以按如下方式运行容器：

docker-compose up -d

成功！现在你应该有一个正在运行的容器，它会记录你对 TypeScript 源代码所做的任何更改。我强烈建议使用 docker 桌面应用来查看正在运行的容器。

您可以像这样停止容器：

docker-compose down

现在我们还想在生产中运行这个东西，所以让我们为此创建一个单独的docker-compose.prod.yml ：

version: '3.7'

services:
  ts-node-docker:
    build:
      target: production
    command: node build/index.js

该文件将与我们的第一个 docker-compose 文件一起工作，但它将覆盖我们想要在生产中更改的命令。

因此，在这种情况下，我们只需针对 Dockerfile 的生产步骤，并运行node build/index.js而不是npm run dev，这样我们就可以启动编译的项目。

要在生产中启动我们的容器，请运行：

docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d   

这告诉 docker-compose 要使用哪些文件，后面的文件将覆盖前面的文件中的任何步骤。

现在，您应该已经让构建的应用程序像在生产中一样运行，无需热重新加载！

最后，我讨厌输入所有这些 docker 命令，因此我将在项目根目录中创建一个Makefile，并添加可以从命令行执行的以下命令（例如make up）：

up:
    docker-compose up -d

up-prod:
    docker-compose -f docker-compose.yml -f docker-compose.prod.yml up

down: 
    docker-compose down

如果你坚持读到最后，恭喜你，谢谢你。希望这篇文章能让一些人在尝试整合这两项令人惊叹的技术时，轻松很多。

如果您喜欢这个，我也会在我的YouTube 频道上发布教程和技术相关视频。

我们还有一个不断发展的技术相关Discord 频道，所以欢迎随时访问。

祝你编程愉快！👨‍💻 🎉