通过从 github 获取代码来对 Angular 应用程序进行 dockerizing 时遇到一些问题答案

【问题标题】：Getting some issues while dockerizing an angular application by fetching the code from github通过从 github 获取代码来对 Angular 应用程序进行 dockerizing 时遇到一些问题
【发布时间】：2022-01-16 07:52:57
【问题描述】：

如果有人可以帮助我使用这个 dockerfile 和 kubernetes conf 文件来执行以下任务，我将非常感激。我想创建一个 Dockerfile，它可以从 github 获取 Angular 应用程序的源代码并构建它，并将其推送到 docker hub。我已尝试使用下面的 Dockerfile，但该文件存在问题。如果有人可以指导我解决我所犯的错误，或者可以提供合适的 Docker 文件，那就太好了。另外，如果可能的话，我还想询问 kubernetes conf 文件，该文件可以从 dockerhub 中提取图像并将其作为服务运行。谢谢。

【问题讨论】：

您似乎在问题中包含了一个图像文件；它是什么，它与你的任务有什么关系？您是否有 Dockerfile、Kubernetes YAML 或任何其他可以包含在问题中的源代码（作为文本，而不是图像）？你遇到了什么问题？我可以说的一件事是，从 Dockerfile 本身提取源代码通常不是最佳实践，但通常最好将 Dockerfile 与应用程序一起检查到存储库中，但这本身并不是一个答案。

标签： angular docker kubernetes dockerfile containers

【解决方案1】：

假设您已设置并准备好 Docker 和 Kubernetes 解决方案。

首先，正如其他人所提到的，最好的选择是使用Dockerfile from the repo 而不是自己编写：

### STAGE 1: Build ###
FROM node:12.7-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

### STAGE 2: Run ###
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/aston-villa-app /usr/share/nginx/html

请clone the repo:

git clone https://github.com/wkrzywiec/aston-villa-app.git
cd aston-villa-app

创建您的 Docker 存储库 - 步骤为 presented here - 在此示例中，我将创建一个名为 testing-aston-villa-app 的公共存储库。

在您的主机上登录Docker registry：

docker login
...
Login Succeeded

Build and push Docker image to your repo - commands are like this:

docker build -t <your_username>/my-private-repo .
docker push <your_username>/my-private-repo

在我们的示例中（确保您在克隆 repo 的目录中）：

docker build -t {your-username}/testing-aston-villa-app .
docker push {your-username}/testing-aston-villa-app

好的，图像现在在您的 Docker 存储库中。是时候在 Kubernetes 中使用它了。请在您have kubectl installed and configured to interact with your cluster所在的主机上执行以下说明。

以下 yaml 文件包含 deployment 和 service 的定义。在image 字段中请使用<your_username>/my-private-repo 名称：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: aston-villa-app-deployment
spec:
  selector:
    matchLabels:
      app: aston-villa-app
  replicas: 2
  template:
    metadata:
      labels:
        app: aston-villa-app
    spec:
      containers:
      - name: aston-villa-app
        image: {your-username}/testing-aston-villa-app
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: aston-villa-app-service
spec:
  selector:
    app: aston-villa-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80

请保存此 yaml 并运行 kubectl apply -f {file.yaml}。

应用后，检查 pods 是否启动，服务是否退出：

kubectl get pods,svc
NAME                                                  READY   STATUS      RESTARTS        AGE
pod/aston-villa-app-deployment-5f5478b66d-592nd       1/1     Running     0               13m
pod/aston-villa-app-deployment-5f5478b66d-vvhq2       1/1     Running     0               13m

NAME                              TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)     AGE
service/aston-villa-app-service   ClusterIP   10.101.176.184   <none>        80/TCP      13m

现在，让我们通过从另一个 pod 向它发出请求来检查服务是否正常工作：

kubectl run -i --tty busybox --image=busybox -- sh
If you don't see a command prompt, try pressing enter.
/ # wget 10.101.176.184
Connecting to 10.101.176.184 (10.101.176.184:80)
saving to 'index.html'
index.html           100% |*****************************************************************************|   596  0:00:00 ETA
'index.html' saved
/ # cat index.html 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AstonVillaApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/images/as_logo.svg">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

请注意，我使用了 IP 地址10.101.176.184，因为它是service/aston-villa-app-service 的IP 地址。在你的情况下，它可能会有所不同。

【讨论】：

构建映像后我无法运行该映像，在使用 docker run 命令时，它只是挂在那个位置，没有将控制权交还给我，也没有显示任何执行日志..？ ?
能否请您提供您正在运行的确切docker run 命令？
现在可以使用了，谢谢。

【解决方案2】：

您可以使用 repo 中的工作 Dockerfile。您可以克隆 repo 并构建它。

如果你不能这样做并且想从 Dockerfile 中克隆 repo，你可以像这样修改它

### STAGE 1: Build ###
FROM node:12.7-alpine AS build
RUN apk update && apk add git
RUN git clone https://github.com/wkrzywiec/aston-villa-app.git
WORKDIR /aston-villa-app
RUN npm install
RUN npm run build --prod

### STAGE 2: Run ###
FROM nginx:1.17.1-alpine
COPY --from=build /aston-villa-app/dist/aston-villa-app /usr/share/nginx/html

构建和运行

docker build -t aston .
docker run -d -p 5000:80 aston

然后在浏览器中访问 http://localhost:5000/。

至于让它在 AWS/Kubernetes 上运行，我建议为此提出一个新问题。您应该在 Stackoverflow 帖子中只有一个问题。

【讨论】：