「译」使用Yarn，TypeScript，esbuild，React和Express创建Web应用程序（第4部分）

发表于 3年以前 | 总阅读数：581 次

本文将指导您使用Yarn包管理器、TypeScript、esbuild，Express和React来构建基本的Web应用程序。在文章的结束部分，您将拥有一个可完全构建和部署的Web应用程序。

[项目配置（第1部分） ]
[添加代码（第2部分）]
[构建应用程序（第3部分）] 更进一步（高级篇）

a. Docker b. 使用GitHub Actions构建和发布我们的Docker镜像 c. 自动将我们的Docker镜像文件部署到Heroku d. 概括

https://github.com/halftheopposite/tutorial-app 查看代码库。

本章节是主要讲述了如何使用容器（Docker），持续集成（GitHub Actions）和持续部署（Heroku）部署应用程序。以下信息可以应用于任何现有应用程序，但为简单起见，我将使用到目前为止以构建好的应用程序。

Docker

假如说您已经非常熟悉容器的概念。

为了能够根据我们的代码创建映像，我们需要在计算机上安装Docker。要了解如何基于OS进行安装，请花一些时间查看官方文档。

https://docs.docker.com/get-started/#download-and-install-docker

Docker文件

要生成Docker映像，第一步是Dockerfile在我们项目的根目录下创建一个（这些步骤可以完全通过CLI进行，但是使用配置文件是定义构建步骤的默认方式）。

FROM node:14.15.5-alpine

WORKDIR /usr/src/app

# Install dependencies early so that if some files in our app
# change, Docker won't have to download the dependencies again,
# and instead will start from the next step ("COPY . .").
COPY ./package.json .
COPY ./yarn.lock .
COPY ./packages/app/package.json ./packages/app/
COPY ./packages/common/package.json ./packages/common/
COPY ./packages/server/package.json ./packages/server/
RUN yarn

# Copy all files of our app (except files specified in the .gitignore)
COPY . .

# Build app
RUN yarn build

# Port
EXPOSE 3000

# Serve
CMD [ "yarn", "serve" ]

下面，我将尽可能详细的介绍以上脚本每个步骤的作用：

FROM告诉Docker将指定的基础映像用于当前上下文。在我们的案例中，我们希望有一个可以运行Node.js应用程序的环境。

2 . WORKDIR 在容器中设置当前工作目录。

3 . COPY 将文件或文件夹从当前本地目录（项目的根目录）复制到容器中的工作目录。如您所见，在此步骤中，我们仅复制与依赖项相关的文件。这是因为Docker将每个构建中的命令的每个结果缓存为一层。因为我们要优化构建时间和带宽，所以我们只想在依赖项发生更改（通常比文件更改发生的频率少）时重新安装它们。

4 . RUN 在Shell中执行的命令。

5 . EXPOSE 是用于容器的内部端口（与PORT我们的应用程序的env无关）。这里的任何值都应该是不错的，但是如果您想了解更多信息，可以查看官方文档。-

https://docs.docker.com/engine/reference/builder/#expose

6. CMD 目的是提供执行容器的默认值。

如果您想了解更多关于这些关键字的信息，可以查看官方Dockfile参考文件。

https://docs.docker.com/engine/reference/builder/

添加一个.dockerignore文件

使用.dockerignore文件不是强制性的，但强烈建议您使用以下文件：

确保您没有将垃圾文件复制到容器中。
使该COPY命令的使用更加容易。

.gitignore如果您已经熟悉它，则它的工作原理与文件类似。您可以将以下内容复制到.dockerignore与您相同级别的文件中，该文件Dockerfile将被自动提取。

README.md

# Git
.gitignore

# Logs
yarn-debug.log
yarn-error.log

# Binaries
node_modules
*/*/node_modules

# Builds
*/*/build
*/*/dist
*/*/script.js

可以随意将您要忽略的文件添加在此文件中。

添加构建脚本

现在我们的应用程序已准备好支持Docker，我们需要一种从其生成实际映像的方法。为此，我们将一个新命令添加到我们的根目录package.json：

{
  "name": "my-app",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "esbuild": "^0.9.6",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.3"
  },
  "scripts": {
    "app": "yarn workspace @my-app/app",
    "common": "yarn workspace @my-app/common",
    "server": "yarn workspace @my-app/server",
    "build": "ts-node ./scripts/build.ts",
    "serve": "node ./packages/server/dist/index.js",
    "docker": "docker build . -t my-app" // Add this line
  }
}

这些docker build . -t my-app命令告诉docker使用当前（.）目录查找a Dockerfile并将命名的图像（-t）命名为my-app。

确保已运行Docker守护程序，以便docker在终端中使用该命令。

现在该命令已在我们项目的脚本中，您可以使用运行它 yarn docker。

一旦运行命令，您应该期望以下终端输出：

Sending build context to Docker daemon  76.16MB
Step 1/12 : FROM node:14.15.5-alpine
 ---> c1babb15a629
Step 2/12 : WORKDIR /usr/src/app
 ---> b593905aaca7
Step 3/12 : COPY ./package.json .
 ---> e0046408059c
Step 4/12 : COPY ./yarn.lock .
 ---> a91db028a6f9
Step 5/12 : COPY ./packages/app/package.json ./packages/app/
 ---> 6430ae95a2f8
Step 6/12 : COPY ./packages/common/package.json ./packages/common/
 ---> 75edad061864
Step 7/12 : COPY ./packages/server/package.json ./packages/server/
 ---> e8afa17a7645
Step 8/12 : RUN yarn
 ---> 2ca50e44a11a
Step 9/12 : COPY . .
 ---> 0642049120cf
Step 10/12 : RUN yarn build
 ---> Running in 15b224066078
yarn run v1.22.5
$ ts-node ./scripts/build.ts
Done in 3.51s.
Removing intermediate container 15b224066078
 ---> 9dce2d505c62
Step 11/12 : EXPOSE 3000
 ---> Running in f363ce55486b
Removing intermediate container f363ce55486b
 ---> 961cd1512fcf
Step 12/12 : CMD [ "yarn", "serve" ]
 ---> Running in 7debd7a72538
Removing intermediate container 7debd7a72538
 ---> df3884d6b3d6
Successfully built df3884d6b3d6
Successfully tagged my-app:latest

现在，我们已经在我们的机器上创建并注册了我们的映像，以供Docker使用。如果您希望列出可用的Docker映像，则可以运行以下docker image ls命令：

→ docker image ls
REPOSITORY    TAG       IMAGE ID        CREATED          SIZE
my-app        latest    df3884d6b3d6    4 minutes ago    360MB

运行以下命令

要通过命令行运行一个可用的码头工人形象是非常简单的：docker run -d -p 3000:3000 my-app。

-d 在分离模式下运行容器（在后台）。
-p设置用于暴露容器的端口（格式为[host port]:[container port]）。因此，如果我们想将3000容器内部的端口（EXPOSE在Dockerfile中记住我们的参数）暴露给容器8000外部的端口，我们将传递8000:3000给该-p标志。

您可以通过确认您的容器正在运行docker ps。这将列出所有正在运行的容器：

如果您对启动容器还有其他要求和疑问，请在此处找到更多信息。

https://docs.docker.com/language/nodejs/run-containers

→ docker ps
CONTAINER ID    IMAGE     COMMAND                  CREATED          STATUS          PORTS                    NAMES
71465a89b58b    my-app    "docker-entrypoint.s…"   7 seconds ago    Up 6 seconds    0.0.0.0:3000->3000/tcp   determined_shockley

现在，打开浏览器并导航至以下URL http://localhost:3000/，以查看运行！的应用程序！

使用GitHub Actions构建和发布Docker镜像文件

如果您只想在Heroku上部署应用程序，则不需要此步骤。

既然我们知道如何在本地构建和运行Docker映像，我们想学习如何自动执行此操作。此过程称为持续集成，通常依靠外部服务来启动一系列自动构建步骤，例如（整理，测试，构建）。

在本教程中，每当您在master（或main）分支上进行某些更改时，我们将使用GitHub的Actions触发自动Docker构建并将图像发布到GitHub软件包。

在项目的根目录下，创建以下嵌套文件夹.github/workflows/。添加这些文件夹后，请在其中创建一个docker-publish.yml文件workflows/，并将以下代码段的内容复制到其中：

name: Publish Docker image

on:
  push:
    branches:
      - master
      - main

jobs:
  push_to_registry:
    name: Push Docker image to GitHub Packages
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Publish to GitHub Packages
        uses: docker/build-push-action@v1
        with:
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
          registry: docker.pkg.github.com
          repository: USERNAME/REPOSITORY/NAME
          tag_with_ref: true

此操作分为两个步骤：

检出存储库的master（或main）分支。
构建一个Docker映像并将其发布到存储库的软件包（GitHub Packages）中。

在执行其他操作之前，您需要对repository属性进行一些更改：

USERNAME用您自己的GitHub用户名替换
替换REPOSITORY为存储库标题
用NAME您的包裹名称替换

现在，您可以提交此文件并对代码进行一些更改（或手动运行CI worlflow）以查看魔术的发生。

软件包将发布在GitHub上的个人资料页面中。如果单击已发布的软件包，您将能够看到用于拉出并运行Docker映像的全限定名称（例如：）docker.pkg.github.com/USERNAME/REPOSITORY/NAME:latest。

自动将我们的Docker镜像文件部署到HeroKu

GitHub Actions现在已经准备就绪，我们需要做的最后一件事就是最终运行我们的应用程序。市面上有许多托管提供商，但很少有提供带有Docker映像和免费层的自动部署的托管所。这就是为什么我们选择同时提供两者的原因。

在Heroku中创建应用程序

我不会深入介绍有关Heroku的详细信息，相反，我将提供分步指南以根据我们的GitHub Action设置环境，但是随时可以寻求更多帮助。

登录Heroku（如果还没有，请创建一个新帐户）
转到您的应用仪表板（或单击https://dashboard.heroku.com/apps）
单击New > Create new app（或单击https://dashboard.heroku.com/new-app）
输入可用的名称，选择所需的区域，然后按 Create app
现在，导航至您的帐户设置（或单击https://dashboard.heroku.com/account）
向下滚动到“ API密钥”部分，如果不存在则创建一个新密钥

就是这样！您应该将此页面保持打开状态，因为我们需要在工作流程中使用API密钥。

实施GitHub行动

现在，我们的Heroku应用程序实例已准备就绪，我们可以开始在GitHub中实现我们的操作了。导航到该.github/workflows/文件夹（如果您已跳过上一步，则创建该文件夹），然后向其中添加heroku-deploy.yml文件。

name: Deploy to Heroku

on:
  push:
    branches:
      - master
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

        # This action will automatically build our docker image using
        # the Dockerfile in the project's root, and publish it to our
        # Heroku application instance.
      - name: Deploy to Heroku
        id: heroku
        uses: jctaveras/heroku-deploy@v2.1.3
        with:
          email: ${{ secrets.HEROKU_EMAIL }}
          api_key: ${{ secrets.HEROKU_API_KEY }}
          app_name: ${{ secrets.HEROKU_APP_NAME }}
          dockerfile_path: '.'

出现的变量${{ secrets.[...] }}称为GitHub secrets。它们是特殊标记符（动态替换变量），GitHub运行器将在构建时将其替换为项目设置中的值。这样可以避免将敏感信息直接发布到您的代码中，并且可以更轻松地共享开源项目。

要创建我们需要的秘密，请遵循一些简单的步骤：

在GitHub上，导航到存储库的主页。
在您的存储库名称下，单击Settings。
在左侧边栏中，单击Secrets。
点击New repository secret。
在Name（例如：）HEROKU_EMAIL输入框中输入您的机密名称。
输入您的机密值。
点击Add secret。

您必须为我们的3个属性中的每个属性执行此操作：

HEROKU_EMAIL 是您用来登录Heroku帐户的电子邮件
HEROKU_API_KEY 是我们创建的API密钥
HEROKU_APP_NAME 是您在Heroku中的应用程序的

填满所有内容后，您将需要在master（或main）分支上推送新的提交，或触发新的CI工作流程。如果一切都按计划进行，那么您的应用程序现在应该可以在类似的URL http://hto-tutorial-app.herokuapp.com/上找到（确保hto-tutorial-app使用您的应用程序名称替换）。