はじめに
前回は、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
・・・【略】・・・最後に
これでアプリをブラウザにて確認するところまでできました。
どのようなアプリかは全世界に公開したら記事にしようと思います。
