使用 Yarn workspace,TypeScript,esbuild,React 和 Express 构建 K8S 云原生应用(一)

本文将指导您使用 K8S
，Docker，Yarn workspace ，TypeScript，esbuild，Express 和 React 来设置构建一个基本的云原生 Web 应用程序。 在本教程的最后，您将拥有一个可完全构建和部署在 K8S 上的 Web 应用程序。

设置项目

该项目将被构造为 monorepo。 monorepo 的目标是提高模块之间共享的代码量，并更好地预测这些模块如何一起通信(例如在微服务架构中)。出于本练习的目的，我们将使结构保持简单：

• app，它将代表我们的 React website。
• server，它将使用 Express 服务我们的 app。
• common，其中一些代码将在 app 和 server 之间共享。

设置项目之前的唯一要求是在机器上安装 yarn。 Yarn 与 npm 一样，是一个程序包管理器，但性能更好，功能也略多。 您可以在官方文档中阅读有关如何安装它的更多信息。

Workspaces(工作区)

进入到要初始化项目的文件夹，然后通过您喜欢的终端执行以下步骤：

1. 使用 mkdir my-app 创建项目的文件夹(可以自由选择所需的名称)。
2. 使用 cd my-app 进入文件夹。
3. 使用 yarn init 初始化它。这将提示您创建初始 package.json 文件的相关问题(不用担心，一旦创建文件，您可以随时对其进行修改)。如果您不想使用 yarn init 命令，则始终可以手动创建文件，并将以下内容复制到其中：

{
  "name": "my-app",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "private": true // Required for yarn workspace to work
}

现在，已经创建了 package.json 文件，我们需要为我们的模块app，common 和 server 创建文件夹。 为了方便 yarn workspace 发现模块并提高项目的可读性(readability)，我们将模块嵌套在 packages 文件夹下：

my-app/
├─ packages/ // 我们当前和将来的所有模块都将存在的地方
│  ├─ app/
│  ├─ common/
│  ├─ server/
├─ package.json

我们的每个模块都将充当一个小型且独立的项目，并且需要其自己的 package.json 来管理依赖项。要设置它们中的每一个，我们既可以使用 yarn init(在每个文件夹中)，也可以手动创建文件(例如，通过 IDE)。

软件包名称使用的命名约定是在每个软件包之前都使用 @my-app/* 作为前缀。这在 NPM 领域中称为作用域(您可以在此处阅读更多内容)。您不必像这样给自己加上前缀，但以后会有所帮助。

一旦创建并初始化了所有三个软件包，您将具有如下所示的相似之处。

app 包：

{
  "name": "@my-app/app",
  "version": "0.1.0",
  "license": "UNLICENSED",
  "private": true
}

common 包：

{
  "name": "@my-app/common",
  "version": "0.1.0",
  "license": "UNLICENSED",
  "private": true
}

server 包：

{
  "name": "@my-app/server",
  "version": "0.1.0",
  "license": "UNLICENSED",
  "private": true
}

最后，我们需要告诉 yarn 在哪里寻找模块，所以回去编辑项目的 package.json 文件并添加以下 workspaces 属性(如果您想了解更多有关详细信息，请查看 Yarn 的 workspaces 文档)。

{
  "name": "my-app",
  "version": "1.0",
  "license": "UNLICENSED",
  "private": true,
  "workspaces": ["packages/*"] // 在这里添加
}

您的最终文件夹结构应如下所示：

my-app/
├─ packages/
│  ├─ app/
│  │  ├─ package.json
│  ├─ common/
│  │  ├─ package.json
│  ├─ server/
│  │  ├─ package.json
├─ package.json

现在，您已经完成了项目的基础设置。

TypeScript

现在，我们将第一个依赖项添加到我们的项目：TypeScript。TypeScript 是 JavaScript 的超集，可在构建时实现类型检查。

通过终端进入项目的根目录，运行 yarn add -D -W typescript。

• 参数 -D 将 TypeScript 添加到 devDependencies，因为我们仅在开发和构建期间使用它。
• 参数 -W 允许在工作空间根目录中安装一个包，使其在 app、common 和 server 上全局可用。

您的 package.json 应该如下所示：

{
  "name": "my-app",
  "version": "1.0",
  "license": "UNLICENSED",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "typescript": "^4.2.3"
  }
}

这还将创建一个 yarn.lock 文件(该文件确保在项目的整个生命周期中依赖项的预期版本保持不变)和一个 node_modules 文件夹，该文件夹保存依赖项的 binaries。

现在我们已经安装了 TypeScript，一个好习惯是告诉它如何运行。为此，我们将添加一个配置文件，该文件应由您的 IDE 拾取(如果使用 VSCode，则会自动获取)。

在项目的根目录下创建一个 tsconfig.json 文件，并将以下内容复制到其中：

{
  "compilerOptions": {
    /* Basic */
    "target": "es2017",
    "module": "CommonJS",
    "lib": ["ESNext", "DOM"],

    /* Modules Resolution