「スマホでも使いやすいようにVeu.jsを導入、ついでにコンテナ化 その⑦ やっと払い出し」わたしのWebサービス開発日記 #19

スポンサーリンク
個人開発
スポンサーリンク

主にこの記事に書いてある情報

  • docker composeを用いた証明書の自動更新
  • 本番環境への払い出しについて

今回対処したエラーは以下

  • [error] 9#9: *2 connect() failed (113: No route to host) while connecting to upstream
  • Invalid Host header
  • [error] 10#10: *1 upstream timed out (110: Connection timed out) while reading response header from upstream
  • Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

前回は

  • ✅プロダクトデザインから収益化をちゃんと考えたプロダクトを考える

を実施した。

今回は以下を対応する。

  • 🔲証明書の自動更新
  • 🔲一旦、払い出し（本番アップデート）

証明書の自動更新

何度かSSL証明書の期限が切れていて、手動で更新していた。

これを自動更新するようにしたかったので、今回実装する。

よろしくは無いが、今回はローカルで検証せず、本番環境にそのまま実行した。（ローカルと本番環境で差異が出ると考えたため←この状態も良くない。。）

今回参考にしたサイトは以下のサイト。

docker環境で let's encrypt のssl証明書を取得する - Qiita
はじめにこの記事では、dockerのnginxコンテナを使ったwebサイトのhttps化手順をまとめています。dockerコンテナと、let's encryptを使ってサイトのhttps化を目指…
qiita.com

そのままのことを本番環境で実施した。（これも良くない）

😈[error] 9#9: *2 connect() failed (113: No route to host) while connecting to upstream

docker composeを起動して、ブラウザからアクセスすると以下のエラー

 [error] 9#9: *2 connect() failed (113: No route to host) while connecting to upstream

これはそもそもvueが起動していなかった。

以下がvue側で出ていたエラー

sh: vue-cli-service: not found

ローカル環境からgitにpushした際に、.gitignoreファイル（vue.config.jsと同じ階層に置いてあるファイル）でmoduleのところが設定されていたため、gitにpushできていなかった。

以下、ハイライト部分のところのようにコメントアウトしてpushして、本番環境にpullしたらエラーは無くなった。

.DS_Store
# node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

一旦、保護されているところまでたどり着く。しかし、画面にはInvalid Host headerという文字が。

😈Invalid Host header

で、この現象を調べると以下の文言をvue.config.jsに追記するってのがちらほら見つかる。

  devServer: {
    disableHostCheck: true
  }

しかし、これは非推奨らしい。

DNS rebinding attack脆弱性を抱えてしまうらしい。

で、allowedHostsで対応した。参考は以下。

Vue.jsで’Invalid Host header’が出た時の対処(webpack 5対応版) #Vue.js – Qiita

で、解消されたようなんだけど、以下の画面に以下のエラーがでる。

ERROR
Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS. 
	at new WebSocketClient (webpack-internal:///./node_modules/webpack-dev-server/client/clients/WebSocketClient.js:49:19) 
	at initSocket (webpack-internal:///./node_modules/webpack-dev-server/client/socket.js:34:12) 
	at eval (webpack-internal:///./node_modules/webpack-dev-server/client/index.js?
protocol=ws&hostname=172.19.0.3&port=8080&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true:379:55) 
	at ./node_modules/webpack-dev-server/client/index.js?protocol=ws&hostname=172.19.0.3&port=8080&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true (https://appare99-system.net/js/chunk-vendors.js:214:1) 
	at __webpack_require__ (https://appare99-system.net/js/app.js:321:33) 
	at https://appare99-system.net/js/app.js:1530:83 
	at __webpack_require__.O (https://appare99-system.net/js/app.js:367:23) 
	at https://appare99-system.net/js/app.js:1533:53 at https://appare99-system.net/js/app.js:1535:12

スクショだと、以下のような感じ。

あと、アクセスすると、nginxがちょくちょくtimeoutエラーを起こすようになった。

timeoutエラーからまずは解消していく必要がありそう

😈[error] 10#10: *1 upstream timed out (110: Connection timed out) while reading response header from upstream

timeoutエラーは以下のようなもの

[error] 10#10: *1 upstream timed out (110: Connection timed out) while reading response header from upstream

topコマンドでメモリやCPUの使用量を確認する。

op - 09:51:31 up 447 days, 12:30,  6 users,  load average: 16.42, 15.63, 11.19
Tasks: 149 total,   3 running, 146 sleeping,   0 stopped,   0 zombie
%Cpu(s):  0.2 us, 29.4 sy,  0.0 ni,  6.0 id, 63.5 wa,  0.0 hi,  0.6 si,  0.3 st
MiB Mem :    971.0 total,     51.1 free,    878.2 used,     41.7 buff/cache
MiB Swap:      0.0 total,      0.0 free,      0.0 used.     13.2 avail Mem

「おわかりいただけただろうか」

まず、

load average: 16.42, 15.63, 11.19

だけど、

load averageは実行待ちのプロセス数を示しています。左から1分、5分、15分の平均負荷のこと。

ようは、システムがどれくらい忙しいかを示し、一般的にはload averageがCPUコアの数を超えるとシステムが過負荷になる。

単位は[個]。

1分で平均16.42個のCPUコア数を要している。

ということで、今回の状態は、負荷が高い。

timeoutの原因の可能性がある。

次に、

%Cpu(s):  0.2 us, 29.4 sy,  0.0 ni,  6.0 id, 63.5 wa,  0.0 hi,  0.6 si,  0.3 st

だけど、

プロセスをus、sy、ni、id、wa、hi、si、stという6種類に分類して、

それぞれが3秒間隔の間に何パーセントの割合で実行されているかを求めている。

多いところ、

29.4 syはカーネル空間プロセス使用時間の割合（単位は[%]）

63.5 waは読込みや書き込みの完了を待っているプロセスの実行時間の割合（単位は[%]）

—

高負荷になってるときに高くなる項目は以下みたい（ChatGPT先生より）

  1. us (%Cpu(s)): ユーザー空間でのプロセスのCPU使用率。これはユーザーアプリケーションがCPUをどれだけ使用しているかを示します。高い値は、ユーザーアプリケーションが多くのCPUリソースを消費していることを示します。
  2. sy (%Cpu(s)): システムレベルでのプロセスのCPU使用率。これはカーネルやシステムサービスがCPUをどれだけ使用しているかを示します。システムが高い負荷になると、この値が増加します。
  3. wa (%Cpu(s)): I/O待ち状態でのCPUの使用率。ディスクやネットワークなどのI/O操作がCPUを待機している割合を示します。I/Oがボトルネックになっている場合、この値が高くなります。

目安としては以下みたい（ChatGPT先生より）

  • us と sy が合わせて50%以上になると、CPUが高負荷状態になっている可能性があります。
  • wa が長期間にわたって10%以上の場合、I/O待ちが問題になる可能性があります。

ということで負荷が高い。

なんならメモリもほぼ使ってしまってるね。

MiB Mem :    971.0 total,     51.1 free,    878.2 used,     41.7 buff/cache

さくらVPSの一番安いのを使っているのが問題だね。

メモリ1G（笑）

コンテナで、4サービス動かすには荷が重すぎる（笑）

ということでメモリ2Gに変更。

月2000円くらい。

それなりにする…。

さくらVPS使いやすいのは確かなので、興味のある人は是非使ってみてほしい。勉強にはなるよ。

これでtimeoutエラーは無くなった。

😈Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

次にこれ👇に取り掛かる

ERROR
Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS. 
	at new WebSocketClient (webpack-internal:///./node_modules/webpack-dev-server/client/clients/WebSocketClient.js:49:19) 
	at initSocket (webpack-internal:///./node_modules/webpack-dev-server/client/socket.js:34:12) 
	at eval (webpack-internal:///./node_modules/webpack-dev-server/client/index.js?
protocol=ws&hostname=172.19.0.3&port=8080&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true:379:55) 
	at ./node_modules/webpack-dev-server/client/index.js?protocol=ws&hostname=172.19.0.3&port=8080&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true (https://appare99-system.net/js/chunk-vendors.js:214:1) 
	at __webpack_require__ (https://appare99-system.net/js/app.js:321:33) 
	at https://appare99-system.net/js/app.js:1530:83 
	at __webpack_require__.O (https://appare99-system.net/js/app.js:367:23) 
	at https://appare99-system.net/js/app.js:1533:53 at https://appare99-system.net/js/app.js:1535:12

まずnginxの設定をhttpからhttpsに変えてみる

    location / {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade; 
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_pass https://frontend:8080/; #★ここ
    }

すると以下のエラー

[error] 10#10: *6 SSL_do_handshake() failed (SSL: error:0A00010B:SSL routines::wrong version number) while SSL handshaking to upstream

これはポートを8080使っていて、443を使っていないことが原因。

ということで、nginxを以下のように変更し、

    location / {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade; 
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_pass https://frontend:443/; #★ここ
    }

docker compose fileも以下の★のところのように変更。意外とcommandのところを443に変えるの忘れがち。

version: '3.8'
 
services:
  nginx:
    image: nginx:latest
    container_name: nginx-container
    build:
      context: ./nginx
      dockerfile: ./Dockerfile
    restart: always
    ports:
      - "80:80"
      - "443:443" ## ★ここを追加
    environment:
      TZ: "Asia/Tokyo"
    # 20日おきにnginxを再読み込みする
    command: "/bin/sh -c 'while :; do sleep 20d & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - /etc/letsencrypt:/etc/letsencrypt
      - ./nginx/dist:/dist
    depends_on:
      - frontend
      - backend
    networks:
      - my_network

・・・【略】・・・

  frontend:
    container_name: frontend-container
    build:
      context: ./vue
      dockerfile: ./Dockerfile
    ports:
      - "8080:8080"
      - "8443:443" # ★ここを追加
    volumes:
      - ./vue/frontend:/app
    working_dir: /app
    tty: true
    command: sh -c "HOST=0.0.0.0 npm run serve -- --https --open --port 443" # ★ここを変更
    depends_on:
      - backend
      - db
    networks:
      - my_network

・・・【略】・・・

そして、やっとこさ払い出し

ここまでくればやっと払い出しできた！！！

サイトは以下なので良ければ遊びに来てね。

Season App
appare99-system.net

まとめ

今回は

  • ✅証明書の自動更新
  • ✅一旦、払い出し（本番アップデート）

を対応した。

これで対応したものは以下のようになった。（✅の項目が対応済みのもの）

  • ✅DjangoとVue.jsとの接続確認
  • ✅Nginxのコンテナ化（フロントエンド）
  • ✅Vue.jsのコンテナ化とVue.jsとNginxの接続（フロントエンド）
  • ✅Djangoのコンテナ化（バックエンド）
  • ✅mysqlのコンテナ化（バックエンド）
  • ✅djangoからvue cliへの移行（vue-leafletの実装など）
  • ✅Vue CLIの設定
  • ✅vueとdjangoとのデータのやり取り実装
  • ✅プロダクトデザインから収益化をちゃんと考えたプロダクトを考える（前回と変更した項目）
  • ✅証明書の自動更新
  • ✅一旦、払い出し（本番アップデート）

いやーーーーーやっと払い出せたね！！！

やっとアップデート完了！！！

前回はver 0.6だった。2023年9月29日の記事。

アップデートに半年ぐらいかけたわけだ。

今回はver 1.0.0だね。大幅アップデート。

あと、スマホで使いやすくなったかなんだけど、使いやすくなったね！！

before

after

僕も使っている、SakuraのVPSサーバー。この記事のサービスもこのVPSサーバーで動いています。👇

ドメインはこちらでも取得可能！👇

スポンサーリンク
タイトルとURLをコピーしました