如何使用 Bitnami 打包和运行 React 单页应用程序？

Question

我有一个 react SPA（单页应用程序）并希望将其部署到 Kubernetes 环境。 为了简单起见，假设 SPA 是独立的。

有人告诉我 Bitnami 的 Helm Charts 存储库是开始解决这个问题的好地方。 所以我的问题是 我应该使用什么 Bitnami 图表来将 React SPA 部署到 Kubernetes 集群？我在哪里可以找到解释的步骤？

我想要什么

所需的解决方案应该是提供静态内容的 Helm Chart。通常是 app.js 和 index.html 页面，以及其他静态内容。并让我指定要用作网站内容的子目录。在反应中，build 子目录包含网站。

我目前在做什么（如何将 SPA 部署到 K8S 我的步骤）

我目前所做的如下所述。我从create-react-app 创建的新应用程序开始，以便其他人可以跟随并在需要时执行此操作来回答问题。 这假设您已安装 Docker、Kubernetes 和 helm（以及用于 React 的 node 和 npm）。

以下命令执行以下操作：

1. 创建一个新的 React 应用程序
2. 为其创建一个 docker 容器。
3. 构建并测试在本地 docker 映像中运行的 SPA。
4. 创建 helm 图表以将映像部署到 K8S。
5. 配置 helm 图表，使其使用在步骤 3 中创建的 docker 映像。
6. 使用 helm CLI 将 SPA 应用部署到 k8s 集群。
7. 测试在 k8s 集群中运行的 SPA。

#1 创建一个新的 React 应用程序

npx create-react-app spatok8s
cd spatok8s
npm run build

此时静态 SPA 网站已创建，位于 build 目录中。

2。为它创建一个 docker 容器。

接下来，使用以下内容创建 Dockerfile。例如，vi Dockerfile 并将以下内容放入其中。 Dockerfile 就是这里描述的https://hub.docker.com/_/nginx。

FROM nginx
copy build /usr/share/nginx/html

这些命令表示使用 NGINX docker 镜像（来自 dockerhub）并将我的网站复制到镜像上，这样我的网站将自包含在镜像中。当图像启动时（nginx 启动），唯一要提供的内容将是我在/usr/share/nginx/html/index.html 文件中的 index.html 文件。

3。构建并测试在本地 docker 镜像中运行的 SPA。

接下来构建 docker 镜像 spatok8s 并在本地运行它，然后打开浏览器访问 http://localhost:8082（在本例中使用）。

docker build -t spatok8s .
docker run -d -p8082:80 spatok8s

在您验证后，它可以使用docker stop # 停止它，其中# 是来自docker ps -q --filter ancestor=spatok8s 的容器号。

4。创建 helm chart 将镜像部署到 K8S。

现在创建一个 helm 图表，以便我可以将此 docker 映像部署到 Kubernetes：

helm create spatok8schart

5。配置 helm 图表，使其使用在步骤 3 中创建的 docker 映像。

更新此应用程序的舵图vi spatok8schart

更改的行如下：

  # Update the repo to use the Docker image just built
  repository: spatok8s
. . .
   # Update the URL to use to access the SPA when it is deployed to Kubernetes
   - host: spatok8s.local
. . .
          serviceName: spatok8s.local

6。使用 helm CLI 将 SPA 应用部署到 k8s 集群。

部署它

helm install spatok8s spatok8schart

最后一条命令的输出是：

NAME: spatok8s
LAST DEPLOYED: Thu Apr  8 22:50:26 2021
NAMESPACE: default
STATUS: deployed
REVISION: 1
NOTES:
1. Get the application URL by running these commands:
  http://spatok8s.local/

7。测试在 k8s 集群中运行的 SPA。

打开浏览器到http://spatok8s.local。 如果您正在进行本地开发并且您的 Kubernetes 环境没有自动设置您的 DNS 名称，那么您必须手动将主机名 spatok8s.local 设置为 kubernetes 集群的 IP 地址。 文件/etc/hosts 或c:\Windows\System32\Drivers\etc\hosts 可用于保存该信息。

寻找解决方案

所以它可以工作，但并不像我被告知的那么容易，所以我正在寻找能让这更容易的 Bitnami 图表。

我搜索了helm chart for deploying a single page app?，发现：

• https://developer.ibm.com/depmodels/cloud/tutorials/convert-sample-web-app-to-helmchart/ - 这需要 IBM 私有云（对我来说不是初学者）。

• https://wkrzywiec.medium.com/how-to-deploy-application-on-kubernetes-with-helm-39f545ad33b8 - 一篇关于我想做的事情看起来过于复杂的中等文章。

• https://opensource.com/article/20/5/helm-charts - 好文章，但不是我想要的

Answer 1

搜索“我应该使用什么 bitnami 图表来部署 React SPA？”对我有用。 见https://docs.bitnami.com/tutorials/deploy-react-application-kubernetes-helm/。

我将总结以下步骤，但这个网站应该会存在一段时间。

Binami 方法

第 1 步：构建和测试自定义 Docker 映像 第 2 步：发布 Docker 映像 第 3 步：在 Kubernetes 上部署应用程序

第 1 步：构建和测试自定义 Docker 映像

该网站提供了一个示例反应应用程序

git clone https://github.com/pankajladhar/GFontsSpace.git
cd GFontsSpace
npm install

使用以下内容创建 Dockerfile：

FROM bitnami/apache:latest
COPY build /app

构建并测试它。 构建 Docker 映像，将以下命令中的 USERNAME 占位符替换为您的 Docker Hub 用户名：

docker build -t USERNAME/react-app .

运行它以验证它是否有效：

docker run -p 8080:8080 USERNAME/react-app

第 2 步：发布 Docker 映像

docker login
docker push USERNAME/react-app

再次使用您的 Docker hub 用户名

第 3 步：在 Kubernetes 上部署应用程序

确保您可以通过执行以下命令连接到您的 Kubernetes 集群：

kubectl cluster-info

更新您的 Helm 存储库列表：

helm repo add bitnami https://charts.bitnami.com/bitnami
helm repo update

通过执行以下命令部署应用程序（将 USERNAME 占位符替换为您的 Docker 用户名）：

helm install apache bitnami/apache \
    --set image.repository=USERNAME/react-app \
    --set image.tag=latest \
    --set image.pullPolicy=Always

如果您希望通过域名从外部访问应用程序并且您已安装 NGINX Ingress 控制器，请改用此命令并将 DOMAIN 占位符替换为您的域名：

helm install apache bitnami/apache \
    --set image.repository=USERNAME/react-app \
    --set image.tag=latest \
    --set image.pullPolicy=Always \
    --set ingress.enabled=true \
    --set ingress.hosts[0].name=DOMAIN

您实际上是在执行相同的步骤，因此您的手动方法是“准确的”！

再次感谢 Vikram Vaswani 和这个网站 https://docs.bitnami.com/tutorials/deploy-react-application-kubernetes-helm 有这个答案！