Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@sawady_dev

ゼロからGKEにDjango+Reactをデプロイする(5)Deployment

Last updated at Posted at 2020-05-06

ゼロからGKEにDjango+Reactをデプロイする(5)Deployment

(4)クラスタの作成とコンテナPUSHの続きです。

やりたいこと

Djagno+Reactの構成でアプリケーションを開発してGoogle Kubernetes Engineにデプロイしたいけれどもまとまったチュートリアルが有りそうで無かったので書きました。

ただまだ完全ではない点があると思いますが、少し経験がある方ならすぐに利用できるんじゃないかと思っています。

注意

これは未経験の趣味エンジニアがポートフォリオを作成するためにデプロイと格闘した記録です。
不備があれば何卒御指摘をお願い致します。。

目指す姿

環境

$ node --version
v12.14.1

$ npm --version
6.13.7

$ python --version
Python 3.7.4

$ docker --version
Docker version 19.03.8

OS windows10 pro

デプロイ

Frontendのデプロイ

kubernetesクラスターはkubernetesのリソースを記述したマニフェストファイルを適用することでクラスターの構成を組立ていくことができます。

複数のコンテナが一緒になったPodを追加するため、Deploymentファイルを作成します。

まずはfontendのDeploymentを作成してfrontendのPodをデプロイします。
Deploymentとして frontend-react.yml というファイルを作成します。

# マニフェストファイルを格納するディレクトリを作成
$\gke-django-tutorial\mkdir manifests
$\gke-django-tutorial\cd manifests

# Deploymentファイルの作成
$\gke-django-tutorial\manifests\type nul > frontend-deployment.yml

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: frontend
  labels:
    app: frontend
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: web-front
          image: gcr.io/gke-django-tutorial/web-front:latest
          imagePullPolicy: Always
          command: ["npm", "start"]
          ports:
            - containerPort: 3000
        - name: nginx-front
          image: gcr.io/gke-django-tutorial/nginx-front:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 80

Deploymentの中身はdocker-composeと非常によく似ています。Pod内は Nginx+React で構成されています。

クラスターへのデプロイはkubectlを使って行います。インストールしてあることを想定しています。

# Deploymentをデプロイ
$\gke-django-tutorial\manifests\kubectl create -f frontend-deployment.yml
deployment.extensions/frontend created

# 確認
$\gke-django-tutorial\manifests\kubectl get pods
NAME                        READY   STATUS              RESTARTS   AGE
frontend-77f75d4c47-lgzv6   0/1     CrashLoopBackOff   6          9m39s

frontendのCrashLoopBackOff

STATUS が CrashLoopBackOff となってしましました。ログを確認してみます。

$ kubectl logs frontend-77f75d4c47-lgzv6

> frontend@0.1.0 start /code
> react-scripts start

[34mℹ[39m [90m｢wds｣[39m: Project is running at http://XX.XX.X.X/
[34mℹ[39m [90m｢wds｣[39m: webpack output is served from
[34mℹ[39m [90m｢wds｣[39m: Content not from webpack is served from /code/public
[34mℹ[39m [90m｢wds｣[39m: 404s will fallback to /
Starting the development server...

Reactの環境構築周りに問題があるらしいことがわかります。

どうやら react-scripts が悪さをしているようです。

frontend\package-lock.json を確認すると react-scripts のバージョンは 3.4.1 でした。
3.4.0 でインストールし直したあと、もう一度GCRへします。

# 3.4.1をアンインストール
$\gke-django-tutorial\frontend\npm uninstall react-scripts@3.4.1

# 3.4.0をインストール
$\gke-django-tutorial\frontend\npm install react-scripts@3.4.0 --save

# frontendコンテナイメージの再ビルド
$\gke-django-tutorial\docker image build --no-cache -t gcr.io/[YOUR_PROJECT]/web-front:latest ./frontend/web-front/.

# GCRへのアップロード
$\gke-django-tutorial\gcloud docker -- push gcr.io/[YOUR_PROJECT]/web-front:latest

# frontendのpodを削除して新しいPodを立ち上げる
$\gke-django-tutorial\manifests\kubectl delete pod frontend-77f75d4c47-lgzv6

# 確認
$\gke-django-tutorial\manifests\kubectl get pods

問題なくfrontendのPodがデプロイできていることが確認できました。

Backendのデプロイ

frontendと同じようにbackendのDeploymentを作成してデプロイします。

backend-deployment.yml を作成します。

$\gke-django-tutorial\manifests\type nul > backend-deployment.yml

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: backend
  labels:
    app: backend
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: web-back
          image: gcr.io/gke-django-tutorial/web-back:latest
          imagePullPolicy: Always
          command: ["gunicorn", "-b", ":8000", "config.wsgi"]
          env:
            - name: DATABASE_USER
              valueFrom:
                secretKeyRef:
                  name: cloudsql
                  key: username
            - name: DATABASE_PASSWORD
              valueFrom:
                secretKeyRef:
                  name: cloudsql
                  key: password
            - name: SECRET_KEY
              valueFrom:
                secretKeyRef:
                  name: secret-key
                  key: SECRET_KEY
          ports:
            - containerPort: 8000
        - image: gcr.io/cloudsql-docker/gce-proxy:1.16
          name: cloudsql-proxy
          command:
            [
              "/cloud_sql_proxy",
              "--dir=/cloudsql",
              "-instances=gke-django-tutorial:asia-northeast1:websql=tcp:5432",
              "-credential_file=/secrets/cloudsql/credentials.json",
            ]
          volumeMounts:
            - name: cloudsql-oauth-credentials
              mountPath: /secrets/cloudsql
              readOnly: true
            - name: ssl-certs
              mountPath: /etc/ssl/certs
            - name: cloudsql
              mountPath: /cloudsql
        - image: gcr.io/gke-django-tutorial/nginx-back:latest
          name: nginx-back
          imagePullPolicy: Always
          ports:
            - containerPort: 80
      volumes:
        - name: cloudsql-oauth-credentials
          secret:
            secretName: cloudsql-oauth-credentials
        - name: ssl-certs
          hostPath:
            path: /etc/ssl/certs
        - name: cloudsql
          emptyDir:

backend側のPodは web-back(Django) , nginx-back(Nginx) , cloudsql-proxy のコンテナがまとめられています。

Django側で必要な環境変数を作成したSecretsから参照していることが確認できます。
backendのイメージは既に作成してGCRにpushしてあるので、早速デプロイします。

# backendのデプロイ
$\gke-django-tutorial\manifests\kubectl create -f backend-deployment.yml

# 確認
$\gke-django-tutorial\manifests\kubectl get pods
NAME                        READY   STATUS    RESTARTS   AGE
backend-989b96b5-ldc9b      3/3     Running   0          35s
frontend-77f75d4c47-f2fdl   1/1     Running   0          28m

$\gke-django-tutorial\manifests\kubectl logs backend-989b96b5-ldc9b web-back
[2020-04-29 14:55:11 +0000] [1] [INFO] Starting gunicorn 20.0.4
[2020-04-29 14:55:11 +0000] [1] [INFO] Listening at: http://0.0.0.0:8000 (1)
[2020-04-29 14:55:11 +0000] [1] [INFO] Using worker: sync
[2020-04-29 14:55:11 +0000] [8] [INFO] Booting worker with pid: 8

$\gke-django-tutorial\manifests\kubectl logs backend-989b96b5-ldc9b nginx-back

$\gke-django-tutorial\manifests\kubectl logs backend-989b96b5-ldc9b cloudsql-proxy

STATUSがRunningになっているので問題なく機能しているようです。

frontend, backendのDeploymentを追加することができました。

⇒(6)ServiceとIngressを追加する

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?