使用 TypeScript 与 Docker 进行容器化应用程序部署指南

介绍

先决条件

在我们开始一起使用 Typescript 和 Docker 之前，了解这些技术本身是什么很重要

Typescript是一种编程语言，它通过添加新功能（例如类型注释、类和接口定义、模块、装饰器等）来扩展 JavaScript。它对于大型项目和开发健壮且可维护的代码特别有用。
Docker是一个允许开发人员在容器中创建、部署和运行应用程序的平台。容器是轻量级、可移植和自给自足的环境，可以在任何支持 Docker 的机器上运行，而不管底层基础设施如何，它提供了多种好处，包括可移植性、隔离性、可伸缩性、自动化和标准化

了解这两种技术可以清楚地了解为什么知道如何结合这两种技术来构建和部署您的应用程序是有益的

使用 TypeScript 和 Docker 的好处

一起使用 Typescript 和 Docker 可以带来拥有强大而可靠的应用程序的明显好处，但在构建和部署应用程序时还有更多好处：

类型安全：TypeScript 的类型注释有助于在开发过程中尽早发现错误，使代码更易于预测和理解。这可以减少应用程序中的错误数量。
提升开发体验：TypeScript 的高级类型系统还自带强大的自动补全功能，为开发者提供属性、方法和参数的建议，让编码变得更快、更高效。
更好的可维护性：TypeScript 的类和接口定义、模块和装饰器可以使代码更有条理和可重用性，随着时间的推移更容易维护和更新应用程序。
部署的一致性和可靠性：Docker 允许您将应用程序及其依赖项打包到一个容器中，该容器可以轻松部署到任何环境。这使部署更加一致和可靠，并有助于减少特定于环境的错误的数量。
可扩展性：Docker 允许通过运行多个容器轻松扩展应用程序，这些容器可以处理增加的流量和工作负载。
可移植性：Docker 容器可以在不同环境之间轻松移动，例如开发、暂存和生产。这确保了一致性并降低了复杂性。
隔离性：Docker允许多个应用程序或服务运行在同一台机器上，互不干扰，提高了应用程序的安全性和稳定性。
改进的协作：Docker 提供了一套一致的工具和技术，可以在不同的环境中使用（所以不再是， “但它在我的机器上工作” 来自你的同行），使开发人员更容易协作和共享他们的工作。

设置 TypeScript 和 Docker 项目

让我们举一个简单的 Nodejs 应用程序的例子，在打字稿中获取/创建待办事项。（确保您安装了 Node 、 npm 和 Docker 以进行后续操作）

第 1 步 – 设置

要开始使用 express.js 打开你的目录并像往常一样设置你的节点应用程序，或者按照下面给出的代码

npm init -y
npm install express body-parser

第 2 步 – 添加 TypeScript

要添加 Typescript，请运行以下命令

npm install --save-dev typescript @types/express nodemon ts-node

这将安装 typescript 作为开发依赖项以及用于 express 的类型，以及我们将用于在本地测试应用程序的 nodemon 以及 ts-node

TypeScript 使用一个名为的文件tsconfig.json来配置项目的编译器选项。在项目目录的根目录下创建一个tsconfig.json文件并粘贴以下JSON

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "build"
  },
  "lib": ["es2015"]
}

此时，你的目录应该是这样的

--node_modules/ 
--package.json 
--tsconfig.json

第 3 步 – 创建应用程序

然后创建App.ts文件（你可以随意命名，我喜欢 App.ts）并粘贴下面的代码

import express, { Request, Response } from 'express';
import bodyParser from 'body-parser';

interface Todo {
    id: number;
    task: string;
    completed: boolean;
}

const app = express();
app.use(bodyParser.json());
let todos: Todo[] = [
    {id: 1, task: "Take out trash", completed: false},
    {id: 2, task: "Do laundry", completed: true}
];

app.get("/", (req: Request, res: Response) => {
    res.send("Hello World");
});


app.get('/todos', (req: Request, res: Response) => {
    res.send(todos);
});

app.post('/todos', (req: Request, res: Response) => {
    const newTodo: Todo = req.body;
    todos.push(newTodo);
    res.send(newTodo);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

此时，你的目录应该是这样的

--node_modules/
--package.json
--tsconfig.json
--App.js

第 4 步 – 测试应用程序的时间

为了检查应用程序是否运行，我们已经安装了需要 nodemon 的工具，它使用 ts-node 来自动编译和自动运行我们的应用程序，但我们需要在 package.json 中进行一些更改

{
...,
"main": "App.ts",
...,
"scripts":{  
    "dev": "nodemon",
    "start": "node build/App.js",
    "build": "tsc --project ./"
  },
...
}

dev用于测试，而build用于编译我们的 typescript 代码并start运行编译后的 javascript 应用程序。

要启动测试服务器，请运行以下命令

npm run dev

nodemon 完成后，您应该会看到以下内容

$ nodemon
[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node App.ts`
Server is running on port 3000

第 5 步 – 设置 Docker

下一步是设置 Docker，我们通过创建Dockerfile并粘贴以下内容来实现：

FROM node:14-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm","run", "start"]

这是 Dockerfile，它是创建 docker 镜像的模式，

该命令将根目录中的所有内容复制到 docker 镜像内的 app 目录，以避免我们也复制我们需要创建文件并在其中添加以下内容的COPY节点模块，.dockerIgnore

/node_modules

/build

现在要创建 docker 镜像，请在您的终端中运行此命令：

docker build . -t tsdocker

这将创建 docker 图像

docker run -p 3000:3000 tsdocker

您可以打开并在屏幕上看到Hello WorldHTTP://Localhost:3000消息，就可以了。您已经使用 docker 设置了您的 typescript 应用程序。我们将在未来的一些博客中进一步介绍如何使用像渲染这样的平台进行部署**

结论

一起使用 TypeScript 和 Docker 可以为 Node.js 应用程序带来许多好处。TypeScript 提供了一种通过提供类型检查和接口来尽早发现错误的方法，而 Docker 通过将应用程序打包在一个轻量级容器中来允许轻松部署和扩展应用程序。此外，无论底层基础设施如何，Docker 都提供了一个一致的环境，这可以防止因开发和生产环境之间的差异而导致的问题。此外，TypeScript 和 Docker 使得在各种环境中测试应用程序以及管理基础设施和扩展变得简单。最后，它们可以通过自动化代码更改的构建、测试和部署来帮助改进整体开发和部署过程。

原文链接：https://juejin.cn/post/7248281795937075260 作者：happyEnding