部署到 Heroku：Docker、Go 和 React

Heroku 是什么？

使用 CRA 设置 React 应用

编写 Go 后端来提供服务

构建production我们的应用程序版本

Docker

赫罗库

我们将向 Heroku 部署一个React应用程序，该应用程序将由Go 后端提供服务，然后整齐地包装在Docker 镜像中。

您需要以下物品：

• Golang（我正在使用 v1.13.5）
• npm
• 文本编辑器（我正在使用 VSCode）
• 基于unix的终端
• Docker
• Heroku 帐户和 Heroku CLI

Heroku 是什么？

从他们的页面

“Heroku 是一个平台即服务 (PaaS)，使开发人员能够完全在云中构建、运行和操作应用程序。”

使用 CRA 设置 React 应用

我们将使用create-react-app来引导我们的 React 项目。

npx create-react-app deployment-demo

编写 Go 后端来提供服务

让我们将目录更改为我们新创建的 React 项目，创建一个名为的子目录server并在其中创建一个名为server.go 的文件：

cd deployment-demo/ && mkdir "server" && cd "$_" && touch server.go

打开您最喜欢的文本编辑器并将以下内容粘贴到server.go中：

package main

import (
    "log"
    "net/http"
    "os"
)

func main() {
    /*
        Grab the environment variable that has been hopefully set, but also set up a default
    */
    port := os.Getenv("PORT")
    defaultPort := "8080"
    /*
        Serve the contents of the build directory that was produced as a part of `npm run build` on the root `/`
    */
    http.Handle("/", http.FileServer(http.Dir("./build")))

    /*
        Check if the port environment variable has been set and if so, use that, otherwise let's use a reasonable default
    */
    if !(port == "") {
        log.Fatal(http.ListenAndServe(":"+port, nil))
    } else {
        log.Fatal(http.ListenAndServe(":"+defaultPort, nil))
    }
}

警告：Heroku 为我们提供了一个端口来绑定我们的 Web 应用程序，因此我们从环境变量中获取该端口，您可以在此处阅读更多相关信息

构建production我们的应用程序版本

从我们当前目录../deployment-demo/server返回到我们的 React 项目的根目录，然后运行：

npm run build

这将生成一个名为的目录build。

让我们将其复制到我们的server目录中，它将作为我们的生产有效载荷。

cp -r build/ server/

我们现在可以导航回我们的server目录并开始部署。

Docker

在服务器目录中创建以下 Dockerfile ：

# Stage 1
FROM golang:alpine as builder
RUN apk update && apk add --no-cache git
RUN mkdir /build 
ADD . /build/
WORKDIR /build
RUN go get -d -v
RUN go build -o deployment-demo .
# Stage 2
FROM alpine
RUN adduser -S -D -H -h /app appuser
USER appuser
COPY --from=builder /build/ /app/
WORKDIR /app
CMD ["./deployment-demo"]

赫罗库

创建应用程序

如果您没有 Heroku 帐户，请立即创建一个！（创建时间应该不到 5 分钟）

完成后，您将需要 Heroku CLI，可以通过运行以下命令轻松在 Ubuntu 上安装：

sudo snap install heroku --classic

安装CLI后，运行以下命令登录：

heroku login

这将打开一个浏览器窗口供您登录（这是一个非常酷的系统）

现在运行：

heroku create [YOUR_APP_NAME]

在deployment-demo/server/目录中。

您的 Heroku 帐户上将创建一个应用程序，您应该能够在仪表板上看到它

容器注册表

Heroku 容器注册表允许您将 Docker 镜像部署到 Heroku。

您可以在此处阅读更多相关信息。

运行以下命令登录注册表：

heroku container:login

运行此命令来构建您的 Docker 镜像并将其推送到 Heroku：

heroku container:push web --app [YOUR_APP_NAME]

注意，我们指定了web，这表示我们想要与此应用程序关联的进程类型。有关进程类型的更多内容，请参阅此处。

最后，运行此命令将图像发布到您的应用程序：

heroku container:release web --app [YOUR_APP_NAME]

现在，我们应该能够通过运行以下命令导航到 Heroku 上托管的应用程序：

heroku open --app [YOUR_APP_NAME]

我们应该看到以下内容：

就这样！这就是你需要做的全部工作，将一个运行着 Go 服务器的 Docker 镜像部署到 Heroku，该镜像为 React 应用程序提供服务！