各位开发者们好!

如果你来到这里,可能是因为你太清楚部署一个功能齐全的 React 应用程序是多么痛苦和无聊。

编写代码“很容易”,第一次将其变为现实可能看起来很可怕。

我希望一旦阅读完毕,服务和部署您的应用程序将不再是问题。

Spoiler alert:我很懒惰,所以我们将坚持我们将在create-react-app之上构建我们的应用程序的基本含义,并且我假设所有“先决条件”都已检查(docker概念,npm 和 npx 安装等)

Sooo,我们今天要做什么?

为了专注于部署我们的应用程序,我们将保持简单的目标:

• 弹出一个基本的打字稿应用程序

• 编写并理解我们的 dockerfiles

• 在 dockerhub 上发布我们的应用镜像

• 使用Koyeb 部署我们的应用程序

要求

• 一个dockerhub账号

• Docker 在你的机器上运行

• koyeb 帐户

关于Koyeb的几行

我已经厌倦了使用 Heroku,尽管它可以完成副项目的工作(AWS 和 GCP 有点矫枉过正),它只是......太多而且总是一样的。

在寻找替代方案时,我偶然发现了 Koyeb,它提供了一个无服务器平台,允许部署具有低配置、自动缩放、全局范围的应用程序(换句话说,我们在这里不需要的大量功能💥)

让我们自己看看

1) 弹出应用程序!

十分简单。如果像我一样,您已经这样做了一千次,请跳过这部分:)。

让我们使用 typescript 模板创建我们的项目。

yarn create react-app my-app --template typescript

进入全屏模式 退出全屏模式

它的名字说明了一切,这将生成一个安装了所有依赖项的即用型 Typescript 项目(否则,不要忘记项目根目录下的yarn或npm install)

再次,像往常一样(上帝,我不能再忍受了😄),一个快速的yarn run start应该使用(我的上帝,再次是的)精彩的反应应用程序微调器在http://localhost:3000上启动您的应用程序。如果没有,请指教😅。

此时,您可以自由地开始编写您想要的代码。但是,我们不会在本文中进行任何编码。

2) Dockerize 我们的应用程序

在本文的第一个版本中,我们将直接进入产品就绪环境。但是我在众神面前发誓,如果超过5个人在评论中要求热重载的开发环境......我会执行我自己。

我们将一块接一块地构建 dockerfile。从头开始从来都不是一件容易的事,尤其是当你想专注于开发你的应用程序时,所以我觉得了解我们想要什么以及我们正在做什么很重要。

首先,让我们在项目的根目录下创建一个Dockerfile文件,看起来应该是这样的,否则你就作弊了:

进入全屏模式 退出全屏模式

做得很好! (这里需要帮助,我不知道如何在代码块中添加路径)

快速提醒。在生产中,我们不会简单地执行我们的模块化代码。我们需要先构建我们的应用程序(使用npm run build)。index.html,我们的入口文件将被静态提供。这就是从本地环境到生产环境变得棘手的地方和原因。

考虑到这一点,我们可以将我们必须做的事情分成两部分:

1. 构建我们的应用程序

2. 为我们的构建服务(我们将使用 nginx 来做这件事——记住懒惰)

在本地,我们可以构建运行npm run build的项目。让我们看看如何将其转换为Dockerfile:

# 1st step: The build

# Here we state that we will be using the node 16.10 version as the base image
FROM node:16.10 as build
# We define /app as our working directory -where our incoming commands will be executed-
WORKDIR /app

# We copy our package.json and yarn.lock (adapt if you are using npm to package-lock.json) into our workdir
COPY package.json ./
COPY yarn.lock ./

# We install our dependencies
RUN yarn
# We install react-scripts globally to avoid any bad surprise
RUN yarn add react-scripts@3.4.1 -g

# COPY our app
COPY . ./

# And we build! -yarn comes with the node:16.10 image-
RUN yarn run build

进入全屏模式 退出全屏模式

好的,我们的构建已经启动并且没有运行。正如我们所说,下一步现在将包括安装一个网络服务器来服务它。去!去!去!

让我们首先配置我们即将诞生的服务器。为此,我们只需要在新文件夹nginx/nginx.conf中添加以下配置文件。我不会详细介绍,由您深入了解 nginx 😄 所以我将直接分享一个工作配置:

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

进入全屏模式 退出全屏模式

现在,让我们回到我们的Dockerfile并启动这个服务器:

# ... Step 1

# Always good to repeat, we use nginx:stable-alpine as our base image
FROM nginx:stable-alpine
# Taking advantages from docker multi-staging, we copy our newly generated build from /app to the nginx html folder -entrypoint of the webserver-
COPY --from=build /app/build /usr/share/nginx/html
# We copy the nginx conf file from our machine to our image
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
# We expose the port 80 of the future containers
EXPOSE 80
# And finally we can run the nginx command to start the server
CMD ["nginx", "-g", "daemon off;"]

进入全屏模式 退出全屏模式

快断

好的!对于那些仍在阅读的人,我想如果你读到这篇文章,这意味着你——和我一样——不是虚拟化专家。

因此,在我看来,这应该是确保一切按预期工作的正确时机。

我们可以运行以下命令docker build . -t frontend:prod构建或镜像

喝杯咖啡,然后回来,如果它成功运行,请尝试以下命令来启动一个容器(同样,为了进一步解释,这次我需要 10 个赞成票):

docker run -it --rm -p 1338:80 frontend:prod

我们用:

• it以交互方式运行容器

• rm是在我们退出后清理容器

• p旧端口绑定,yourmachine:yourcontainer

繁荣,导航到http://localhost:1338/,您应该可以在本地启动并运行您的应用程序,恭喜🎉!

3) 将你的镜像推送到 Dockerhub

⚠️ 这会将图像推送到公共存储库,如果您不放心,可以按照此stackoverflow 指南将其保密。

我假设您创建了 docker 帐户并记住了DockerId。使用docker login命令从 shell 连接到您的 docker 帐户并完成所需的步骤。

让我们首先标记您的图像

docker tag frontend:prod {YOUR_DOCKER_ID}/prod

并推动它(应该让你想起 git)

docker push {YOUR_DOCKER_ID}/prod

应该是这样!

4) 使用 Koyeb 部署

Koyeb 仍处于早期阶段,一旦您创建了帐户,加入他们的 slack,您应该会在几分钟内被激活。

我们将使用他们的仪表板来节省时间(CLI 支持 30 次)。

您应该登陆以下页面

[](https://res.cloudinary.com/practicaldev/image/fetch/s--46chT3qb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/42zw092b8urhqb6m7kwy.png)

单击创建应用程序以了解对我们来说很有趣的内容。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--2ffipvDg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/ec82zv86kt97zlfid4hm.png)

对我们有什么好处?

• 选择docker方法并指向docker.io/{YOUR_DOCKER_ID}/{IMAGE_TAG}

• 暴露我们的容器端口80(cf: Dockerfile)

• 为您的服务选择一个名称

创建您的服务......和TADAAA!你不应该有时间再喝一杯咖啡,你的应用应该还活着,是的,我说的是活着的(无论如何,你上一杯咖啡是在 5 分钟前,这真的很不健康)。

在我写这篇文章的时候,自定义域正在 Koyeb 上进行。但是,它们会为您提供一个子域(就像您告诉我的 Heroku 默认一样)。

按照 url 和这里你去:)。

结论

每个故事(即使是最糟糕的)都有一个结论。所以我们也来一个。

如果你经历了这一切,那么首先谢谢你!总是欢迎反馈,所以不要犹豫指出可以改进的地方😄。

那么我们学到了什么(我希望):

• 运行 create-react-app 命令(好的,不算数)

• 写一个简单而实用的Dockerfile(我们不要小看这一点,最复杂的总是从某个地方开始)

• 使用 docker 构建生产就绪的 React 应用程序

• 使用 docker 启动 nginx 网络服务器

• 使用 Koyeb 部署 docker 镜像

哇,这么多。用更严肃的语气来说,第一次部署可能看起来很困难,但最终,将其分成更小的步骤有助于揭开它们的神秘面纱。

特别是作为开发人员,利用 Koyeb 之类的工具可以降低管理整个基础架构的复杂性,让您专注于您的专业领域(我猜是编码?)以及真正重要的事情:您的用户。

希望这有帮助!

并引用好老约翰逊的话,真是太棒了!