「季節を感じれるサービスへのアップデート」 わたしのWebサービス開発日記 #28

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

はじめに

2024年12月28日現在までのアップデート記録。

webサービスを少しずつアップデートをしています。

今までは、アップデートの度に記事を書いていましたが、まとめて一気に書いてしまおうと思います。

大まかなざっくり進捗

このサービスのテーマが定まってきたのが、大きな進捗です。

もともと、「最適に景色を変えられる、ワクワク感の感じる羅針盤サービス」というテーマを以前の記事で決めました。

このタイミングでは仮決めでもあったのですが、今回である程度、テーマが定まってきました。

それは、

「日本の四季を感じられるサービス」

です。

日本にいるからには是非、四季を感じたい。

それは、旅行先でも。家でも。

旬な食べ物は楽天のリンクを用意しており、家でも取り寄せればその季節を楽しめます。

勿論、旅行先で食べた方がおいしいけどね😊

前回から今回までの間でアップデートした内容

アップデートした内容は以下です

  • 前回まで「宿泊場所を見つける」、「観光地を見つける」、「旬の食材を見つける」の3つの機能だったが、「観光地を見つける」、「季節を感じるスポットを見つける」、「旬の食材を見つける」に変更した
    • 季節を感じるサービスにしたいため、宿泊場所の検索は不要と判断
    • また、「季節を感じるスポットを見つける」に関しては、改めて、スポット情報を更新しました。
      • 現段階では、「桜」、「紅葉」、「花火」、「蛍」の4つがあります。
  • 「季節を感じるスポットを見つける」と「旬の食材を見つける」はDBのデータを正規化して整えた
    • 詳細は以下の以前の記事にて記載
      • https://apao-m-appare99999.com/?p=14277
      • https://apao-m-appare99999.com/?p=14297
      • https://apao-m-appare99999.com/?p=6274
  • 旬の食材、楽天から購入できるリンクを追加
    • 旬の食材を以下のように表示するようにしました。
    • 一言:取得の過程でまだ表示されている内容と異なるリンクが貼られているところもあるので、そのデータは随時削除中

リファクタリングについて(django)

機能のアップデートとは別にdjangoのviews.pyファイルをリファクタリングしました。

views.pyが肥大化していたので、複数のファイルに分割しました。

参考にしたサイトは以下です。

django開発で肥大化したview.py を複数ファイルに分割する方法 - Qiita
Djangoフレームワークを使って開発する中で、得た知見やクリティカルな情報が見つからなかったものを小ネタ的に書きます。環境Python:3.7.2django:2.1.5課題django…

もともと、529行がありましたが、

1ファイル最大でも210行になりました。

ちなみに、viewフォルダ配下は以下のようになっています。

├── __init__.py
├── recommend_sightseeing.py
├── sample.py
├── season_food.py
├── season_spot.py
├── sightseeing.py
└── station.py

対応したエラーたち

本番環境に払い出すに際して幾つかのエラーに対応しました。

CACError: Unknown option --https

frontend-container  | file:///app/node_modules/vite/dist/node/cli.js:444
frontend-container  |           throw new CACError(`Unknown option \`${name.length > 1 ? `--${name}` : `-${name}`}\``);
frontend-container  |                 ^
frontend-container  |
frontend-container  | CACError: Unknown option `--https`
frontend-container  |     at Command.checkUnknownOptions (file:///app/node_modules/vite/dist/node/cli.js:444:17)
frontend-container  |     at CAC.runMatchedCommand (file:///app/node_modules/vite/dist/node/cli.js:642:13)
frontend-container  |     at CAC.parse (file:///app/node_modules/vite/dist/node/cli.js:581:12)
frontend-container  |     at file:///app/node_modules/vite/dist/node/cli.js:914:5
frontend-container  |     at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
frontend-container  |     at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

これはvue側で発生したエラーです。

docker composeファイルのfrontendの実行コマンドのところを以下のように変更することで解消できました。

command: sh -c "HOST=0.0.0.0 npm run serve -- --port 443"

SSL_do_handshake() failed (SSL: error:0A00010B:SSL routines::wrong version number) while SSL handshaking to upstream, client

ブラウザからアクセスすると502のサーバーエラーが表示されてしまっています。

nginx側のログでは以下のようなエラーが確認できました。

2024/11/10 23:19:29 [error] 11#11: *6 SSL_do_handshake() failed (SSL: error:0A00010B:SSL routines::wrong version number) while SSL handshaking to upstream, client: 60.132.245.37, server: appare99-system.net, request: "GET / HTTP/2.0", upstream: "https://172.19.0.4:443/", host: "appare99-system.net"

これに関しては以下、frontend側のviteの挙動をよく見てみると、httpになっていました。。

frontend-container  |   VITE v5.4.7  ready in 604 ms
frontend-container  |
frontend-container  |   ➜  Local:   http://localhost:443/
frontend-container  |   ➜  Network: http://172.19.0.4:443/
frontend-container  |   ➜  press h + enter to show help

いや、これはなかなか気づかない。。。

ということで、nginxのconfファイルのフロントエンドへの宛先を以下のように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:443/;
    }

👇👇👇


    location / {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade; 
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_pass http://frontend:443/; ★ここを変更
    }

これで解消しました。

タイトルとURLをコピーしました