質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2134閲覧

webアプリケーションを構築する上でwebサーバーとDBサーバーの繋げ方で困っています

TanakashiXr

総合スコア57

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2020/03/23 15:58

編集2020/03/23 16:26

前提・実現したいこと

とあるデータをPythonでMongoDBに収集して、そのデータをLiteSpeedとvue.jsで作成したwebサイトに
ランキング形式で表示させるwebアプリケーションを作りたいと思っています。

現状の環境

イメージ説明

発生している問題・エラーメッセージ

MongoDBにデータを収集して、LiteSpeedとvue.jsを使ってwebサーバーを作成できたのはいいですがデータベースと連携(?)する方法が分かりません。
データをどのようにしてwebサーバーに渡すのでしょうか。

試したこと

調べたらAPサーバーをwebサーバーとDBサーバーの間に挟むというような記述を見ました。
0. APサーバーとしてTomcat、Node.js、Netty、Unicornなど様々なものがありどれを使うのがよいか分かりません。

  1. jsonファイルの直読み込み、Firebaseの使用も試みましたがデータが6万件ほどあり膨大であまり現実的ではないのかと思いました。

webアプリケーションの構築経験のある方いらっしゃいましたらご意見、ご教授頂きたいです。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2020/03/23 16:18

イメージ図が現状とやりたいことのどちらか分かりませんが、LightSpeed で作ったものが AP サーバーなのでは。また、AP サーバーと DB サーバーは同じマシンで動かしても構いません。あと、vue.js はクライアントで動くものなので、クライアントの所に書いた方がいいと思います。
nskydiving

2020/03/24 04:27

この質問に PHP のタグが付いているのに、質問欄の図には Python とあります。どちらなのでしょうか?
guest

回答2

0

ベストアンサー

とあるデータをPythonでMongoDBに収集して、そのデータをLiteSpeedとvue.jsで作成したwebサイトに

ランキング形式で表示させるwebアプリケーションを作りたいと思っています。

LiteSpeedはWebサーバですが、
本質的なWebサーバとは違い、多少簡略化した端折った存在です。

まずそこを解説しておかなければどういう行動を取るべきかも判断出来ません。


WebサーバはChrome等のブラウザからHTTPリクエストを受け付けて
情報を文字列化して送り返す仕組みを指します。

LiteSpeedやApache等のWebサーバアプリは、
ハードディスク上に保存した特定のフォルダ配下を、
Webサーバのルートだ!…とみなして、スラッシュ記号で区切ったファイルのパスをHTTPリクエストで指定すると、ファイルの中身をHTTPレスポンスとして送り返すという思想で運用する思想で作られたWebサーバです。

このHTTPリクエストやHTTPレスポンスはインターネットを作った人達が準備したルールに従って行います。
規約(プロトコル)とか言われています。

なのでHTTPリクエストを受け付けて、
HTTPレスポンスを正しく返す仕組みならば
全て妥当なWebサーバ足り得るのです。


調べたらAPサーバーをwebサーバーとDBサーバーの間に挟むというような記述を見ました。

APIサーバの事を言いたいのかな?

HTTPリクエストを受け取って、
HTTPレスポンスを投げ返すという本質で言えば
これは単なるWebサーバですね。

HTTPリクエストを受け取って、
Node.jsなりPHPなりのコードを実行して、
MongoDBに通信を行い集計や検索等の処理を挟んで情報を取得し
泥縄でHTTPレスポンスを生成してから投げ返す事になります。

こういったやり方でHTTPレスポンスを返すものを動的コンテンツと呼びます。

参考記事: 静的コンテンツと動的コンテンツ


APサーバーとしてTomcat、Node.js、Netty、Unicornなど様々なものがありどれを使うのがよいか分かりません。

大抵のプログラミング言語は、
HTTPリクエストを受け付けて、
HTTPリクエストを返すためのモジュールが用意されています。

JavaでもNode.jsでも、PHP、Ruby、Python...全て目的のものを作る事が可能です。
自分がこの言語なら開発出来ると思った言語を使ってWebサーバを開発してください。

ただし、MongoDBが裏にあるならMongoDBと通信して情報を読み書き出来るモジュールがあるかものの方が楽でしょう。
参考記事: MongoDB Drivers and ODM


データをどのようにしてwebサーバーに渡すのでしょうか。

どうやって開発するのかはさておき、
下記のWebサーバが完成したとしましょう。

  • LiteSpeedを利用した静的ファイルの配信Webサーバ
  • MongoDBを読み込んで結果を返すAPIサーバ

このままでは通信を行う事は出来ません。

HTTP通信を待ち受けるデフォルトのポート番号は80番(HTTPSは443番)で世界共通です。
例えばhttp://teratail.com:80/questions/248961という風にドメイン名の後ろに明示的に:80という文字列をくっつける事で80番ポートを利用した通信を行う事が可能です。

マシン上で起動したアプリケーションはOSに80番ポートの専有許可をもらいます。
後からきたら弾かれます。
なのでこの2つのサーバは共存できません……なんてこった。

そこでリバースプロキシを利用します。
LiteSpeedに80番ポートを使わせておき、MongoDB用のAPIサーバは適当に8000番ポートでも割り振っておきます。

LiteSpeedの設定を変更、
/api配下のパスにHTTPリクエストが届いたら、APIサーバの8000番ポートにリクエストを受け流して代わりに結果を返してもらう!
これにより実現可能です。

このリクエストを受け流す仕組みをリバースプロキシと呼びます。
LiteSpeedは設定等がApache互換だそうなので、
「Apache リバースプロキシ」みたいなワードでググればなんとかなるんじゃないでしょうか?

投稿2020/03/24 06:23

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TanakashiXr

2020/03/24 08:33

Node.jsなりPHPなりのコードを実行して、APIリクエストを送りAPサーバーでそのリクエストを処理しレスポンスするということでしょうか?
miyabi-sun

2020/03/24 08:40

Node.jsでもPHPでも何でも良いですが、MongoDBに接続してくれるWebサーバが必要です。 仮にNode.jsでやるとしましょう(他の言語はNode.jsという単語がその言語になるだけです) HTTPサーバ用のモジュールを組み込んだ状態でNode.jsのコードを書いて立ち上げます。 すると設定したポート番号で待ち受けるWebサーバとして稼働します。 HTTP通信に使える80番ポートは1個だけなので、このままではLiteSpeedと緩衝してしまいます。 そこで80番ポートはLiteSpeedにもたせて「リバースプロキシ」の設定を施して特定のアドレスへのアドレスを自前のWebサーバに受け流します。 簡単に言うとこんな流れになります。 回答欄はそれを長い文章にしただけのものなので、もっと具体的な手順を知りたいなら、適宜ググりながら理解を深めてください。
TanakashiXr

2020/03/24 12:43

凄く分かりやすくやっと理解が出来ました。ご丁寧にありがとうございます!
guest

0

MongoDB取り扱ったことないですが基本的には「アプリケーション側から取りに行く」のでは?
今回ですとPHPから接続しに行って取りに行くということですね。
PHPマニュアル:MongoDB クラス

投稿2020/03/23 21:07

m.ts10806

総合スコア80850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問