おうちk8sに自作アプリを乗せる③（案の定k8sが上手くいかない #13）

はじめに
各サービスの残課題の解消
1. 「Failed to load resource: the server responded with a status of 404 (Not Found)」　（frontend側のエラー）
2. backend側
最後に

はじめに

前回は、frontend側でハマったエラーについて記載しました。

後は残課題を解消してアプリが動くようにしたいと思います。

こちらの記事に備忘として残課題の解消方法について記載しようと思います。

各サービスの残課題の解消

「Failed to load resource: the server responded with a status of 404 (Not Found)」　（frontend側のエラー）

ブラウザにページが表示されず、

Failed to load resource: the server responded with a status of 404 (Not Found)

というエラー。

近場からcurlでアクセスができるかを確認し、問題個所を特定していく

frontendの自分自身へのcurlを確認できた

root@go-slim-frontend-6fcf4d48d7-ql2zk:/app# curl http://127.0.0.1:5173/src/main.js
import { createApp } from "/node_modules/.vite/deps/vue.js?v=651ea614"
// import './style.css'
import App from "/src/App.vue"
import { createHead } from "/node_modules/.vite/deps/@unhead_vue.js?v=2f834508"

import "/node_modules/bootstrap/dist/css/bootstrap.min.css"
import "/node_modules/.vite/deps/bootstrap_dist_js_bootstrap__min__js.js?v=357dd5ad"

・・・【略】・・・

nginxのpod→frontendのpodのcurlも確認できる

ingress-nginx-controller-8548795d68-hltjj:/etc/nginx$ curl http://10.244.2.155:5173/src/main.js
import { createApp } from "/node_modules/.vite/deps/vue.js?v=96c5e55b"
// import './style.css'
import App from "/src/App.vue"
import { createHead } from "/node_modules/.vite/deps/@unhead_vue.js?v=96c5e55b"

import "/node_modules/bootstrap/dist/css/bootstrap.min.css"
import "/node_modules/.vite/deps/bootstrap_dist_js_bootstrap__min__js.js?v=96c5e55b"

・・・【略】・・・

で最終的にはingressが問題でした。

ここは「/」でのアクセスになりますね。（ハイライトのところ）

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: go-slim-ingress
  namespace: go-slim
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  ingressClassName: "nginx" # 必要に応じて IngressClass を指定
  rules:
  - http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: go-slim-frontend-svc
            port:
              number: 5173

また、frontendのvite.config.jsをbackendのsvcに変更しておく必要があります。（ハイライトのところ）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  base: "/",
  plugins: [vue()],
  server: {      // serverオプション内でポート指定
      host: true,
      port: 5173,
      historyApiFallback: true,
      proxy: {
          '/food': {
              target: 'http://go-slim-backend:8000',
              changeOrigin: true
          }
      }
  },
  resolve: {
      alias: {
      '@': path.resolve(__dirname, './src')  // @をsrcフォルダに解決
      }
  }
})

backend側

backend側のDjangoではALLOW_HOSTSでアクセスできるホストを制限します。

k8sの場合はpodになるのですが、このpod名は起動するたびに名前が変わります。

このため、ALLOW_HOSTSはIPを動的にdeploymentでenv設定して対応する必要があります。

方法としては、

環境変数をdeployment.yaml側で設定し、その値を動的にDjangoのsetting.py側に設定します。

✅deployment.yamlは以下のようになります。（ハイライトのところ）

・・・【略】・・・
    spec:
      containers:
      - name: go-slim-backend
        image: appare99/go-slim-backend
        ports:
        - containerPort: 8000
          name: backend-port
        command: ["sh", "-c", "/code/entrypoint.sh"]
        volumeMounts:
        - name: go-slim-backend
          mountPath: /code
        workingDir: /code
        env:
          - name: DJANGO_ALLOWED_HOSTS
            value: "127.0.0.1,localhost,go-slim-backend-svc"
          - name: POD_IP
            valueFrom:
              fieldRef:
                fieldPath: status.podIP
      imagePullSecrets: 
      - name: regcred
・・・【略】・・・

✅Djangoのsettings.pyは以下のようになります。

・・・【略】・・・
allowed_hosts = os.getenv("DJANGO_ALLOWED_HOSTS", "").split(",")
pod_ip = os.getenv("POD_IP", "")

if pod_ip:
    allowed_hosts.append(pod_ip)

ALLOWED_HOSTS = allowed_hosts
・・・【略】・・・