みなさんこんにちは！
デジタル創作サークルUniProjectのあかつきゆいとです。
今回はNextJSで作られたぼくのサイトをArgoCD経由でK8sで動かしたら環境変数でつまづいた話を書いていこうと思います。
ちなみに、今回はK8sで動かしていますが、普通のDockerでも同じことが起こると思うので、Dockerで困っている人も見てくれればなと思います。
何にハマったか
ぼくのサイトはSpotifyAPIが使われています。
そして、GitHubActions側でDocker Build & Pushを行なっています。
ですが、いつものようにビルドしていたところ、**環境変数が、NULL！！**となったので、トラブルシューティングの一部始終をつらつらと書きたいと思います。
DockerImageをつくる
K8sで動作させるにはDockerImageが必要ですね。
なので、DockerImageをまず作ります。
FROM node:20-alpine
WORKDIR /nextjs
COPY . .
RUN rm -rf node_modules
RUN rm -rf .next
RUN npm install
RUN npm run build
CMD ["npm", "start"]
DockerImage側でNextJSのビルドを行っています。
ArgoCD
K8sのマニフェストファイル側も設定していきます。
apiVersion: apps/v1
kind: Deployment
metadata:
name: yuito-work
labels:
app: yuito-work
spec:
replicas: 2
selector:
matchLabels:
app: yuito-work
template:
metadata:
labels:
app: yuito-work
spec:
containers:
- name: yuito-work
image: registry.uniproject-tech.net/yuito-it/yuito-work:3.1.4
envFrom:
- secretRef:
name: spotify
optional: true
volumeMounts:
- name: spotify
mountPath: /app/tmp
ports:
- containerPort: 3000
imagePullSecrets:
- name: harbor-registry-secret
volumes:
- name: spotify
persistentVolumeClaim:
claimName: spotify
ここで、envFromで指定されているのはSpotifyの認証情報が入ったシークレットです。
なので、これでSpotifyAPIにアクセスできるはずでした。
いざ、デプロイ！！
いざデプロイしてサイトにアクセス...
Spotifyが表示されない！！
なぜだ...とログを見に行くと、認証できていない模様...
何かがおかしい...
ローカルでは動くのに...
まず、Podに入って、環境変数を確認しました。
echo $SPOTIFY_CLIENT_ID
echo $SPOTIFY_CLIENT_SECRET
echo $SPOTIFY_REDIRECT_URI
全てnull...
どういうことだ...
NextJSの落とし穴
実はNext.jsでは、Buildの時点で環境変数がセットされているらしいいです。
私はGitHubActionsでBuildしていたので、GitHubActionsに環境変数をセットしなければならなかったのですね...
しかし、そんなことはしたくない。
というか、この理論だと、DockerImageをPullした人は環境変数が丸見えなのです。
ということで、ゴリ押しました。
どうしたか
CMDでbuildもするようにしました。
# Use the official Node.js 14 image as the base image
FROM node:20-alpine
# Set the working directory inside the container
WORKDIR /app
# Copy package.json and package-lock.json to the working directory
COPY package*.json ./
# Install project dependencies
RUN npm install
# Copy the rest of the project files to the working directory
COPY . .
# Expose the port that the Next.js app will run on
EXPOSE 3000
# Start the Next.js app
CMD ["sh","init.sh"]
npm run build
npm run start
これで、正常に動作しました。
難しいですね。
Buildしたときにenvがセットされるのは、結構よく使うことかと思うので、覚えておきたいですね。