データベースを利用したWebアプリを公開したい

Question

質問・疑問

超・初歩的な質問になります．

現在，WSL上でVue.jsを利用したWebアプリを開発しており，最終的にはGithub Pagesで公開したいと思っています．
また，WebアプリにはMySQLなどのデータベースを利用してデータを管理したいと思っています．（データは取得のみ）

1. まずそもそも，データベースを利用したWebアプリを作成するためには，有料のVPSなどを借りて開発するしかないのでしょうか．（なんでも無料で容量が使えるとは思うなということですかね・・？）
2. WSL上にMySQLをインストールしてデータベースを用意し，それを参照するWebアプリを作成した場合，Github Pages上に公開したときは動作しないと思うのですが，どうでしょうか．
3. Github Pages上でもデータベースを動作させたいときは，自分のVPSにあるMySQLなどでデータを管理し，それにアクセスする方法しかないのでしょうか．
4. そもそも，最終的に公開したいと思うWebアプリを開発するときは，最初からWSL上で開発し始めてはダメということでしょうか．表示だけのWebアプリならば問題ないと思いますが，データベースが絡んでくる時点でVPS上で直接開発した方がいいのかと思いまして．

最後に，Vue.jsとデータベースを利用したWebアプリケーションをデプロイして公開するまでを，丁寧に解説する本やWebサイトをご教授願いたいです．かれこれ，VueやMySQLやデプロイについて十何時間も調べてますが，一向に全体像がつかめず，何度も挫折しかけています・・

Answer 1

回答

500円～1000円/月くらいの安いもので良いのでVPSを借りてみることをお勧めします。

補足

まずそもそも，データベースを利用したWebアプリを作成するためには，有料のVPSなどを借りて開発するしかないのでしょうか．（なんでも無料で容量が使えるとは思うなということですかね・・？）

• 無料でデータベースも使えるレンタルサーバー
• 無料枠のあるパブリッククラウド

等はあるのですが、よほど無料にこだわる理由が無ければ有料のVPSを借りるのが初学者向けだと思います。

WSL上にMySQLをインストールしてデータベースを用意し，それを参照するWebアプリを作成した場合，Github Pages上に公開したときは動作しないと思うのですが，どうでしょうか．

その通りです。

Github Pages上でもデータベースを動作させたいときは，自分のVPSにあるMySQLなどでデータを管理し，それにアクセスする方法しかないのでしょうか．

GithubPagesで安全にMySQLと連動させるのはほぼ不可能です。
Firebase等のクライアントサイドJavaScriptからのアクセスを前提としたmBaaSを利用する手もありますが、
RDBMSとはまた違うものなので、設計から変更する必要があります。

そもそも，最終的に公開したいと思うWebアプリを開発するときは，最初からWSL上で開発し始めてはダメということでしょうか．
表示だけのWebアプリならば問題ないと思いますが，データベースが絡んでくる時点でVPS上で直接開発した方がいいのかと思いまして．

直接VPSで開発しても良いですし、そういう開発環境も存在します。
ただ、それだと複数人数での開発が困難だったり、リリース後に開発するのに開発用のVPSを借りたりしないといけなくなるので

• 他の環境にデプロイすることを前提とした開発手法を確立して、ローカル環境で開発する

というのがよくある方法です。

が、最初は（自分だけがアクセスできる状態にした上で）VPS上で開発するのはありだと思います。

最後に，Vue.jsとデータベースを利用したWebアプリケーションをデプロイして公開するまでを，丁寧に解説する本やWebサイトをご教授願いたいです．かれこれ，VueやMySQLやデプロイについて十何時間も調べてますが，一向に全体像がつかめず，何度も挫折しかけています・・

VPS等を借りれば比較的楽に実現できると思いますよ。
初学者が独学で全体像を掴むのは数か月あっても簡単なことでは無いですが、
WSLで出来ているのであれば、新たに掴まなければいけないところはそんなに多くないです。

ただ、質問全体の印象からだと、サーバサイドで動作するプログラムとクライアントサイドで動作するプログラムという理解が足りていない様に思います。
一度、PHPでもPythonでもRubyでも何でもいいのでサーバサイドでしか動かないプログラム言語＋クライアントサイドJavaScriptでごく簡単なアプリケーションを作ってみると理解が進むかもしれません。

Comments

[aheshiyu_tt]

ご回答ありがとうございます．

やはり，Github Pagesでは動的なサイトは難しいんですね．
VPS等を借りることが，最初の一歩になりうることも分かりました．

1点お尋ねですが，「他の環境にデプロイすることを前提とした開発手法を確立して、ローカル環境で開発する」とおっしゃっていましたが，この方法は人によって（あるいは企業によって）異なるものでしょうか．
どの解説サイトもその環境で動けば良いように解説しており，他の環境にデプロイすることまで解説するサイトは少ないと思いました．

tanatさんが思い浮かぶ限り，どのような開発手法が候補に挙げられますか？
また，どのような方向性で調べるとヒットしますか？

[tanat]

> 1点お尋ねですが，「他の環境にデプロイすることを前提とした開発手法を確立して、ローカル環境で開発する」とおっしゃっていましたが，この方法は人によって（あるいは企業によって）異なるものでしょうか．
どの解説サイトもその環境で動けば良いように解説しており，他の環境にデプロイすることまで解説するサイトは少ないと思いました．
> tanatさんが思い浮かぶ限り，どのような開発手法が候補に挙げられますか？
また，どのような方向性で調べるとヒットしますか？

典型的には、DB接続情報やドメインなどの環境によって変わる情報を環境変数や.envに記載する（.envに記載する場合は、gitignoreに.envを登録してgitにはコミットされないようにする）
とか
DB定義とマスターテーブルへのデータ登録は定義ファイルに記載して、フレームワーク付属のコマンドを使うと不要なデータの入っていない＆アプリケーションは動作するDBが一発で構築される
というのは最近のフレームワークでは標準搭載されていますね。
自力で作るアプリケーションなら、
CREATE TABLEやマスターテーブルへのINSERT文を分離しておいて、
デプロイするときはファイルから流し込む　というのをやってみると感覚が掴めるかもしれません。

> どの解説サイトもその環境で動けば良いように解説しており，他の環境にデプロイすることまで解説するサイトは少ないと思いました．
初学者向けの解説サイトだとどうしてもそうなってしまうので、（敷居は上がりますが）公式ドキュメントをしっかり読んでみることをお勧めします。

[aheshiyu_tt]

ご返信ありがとうございます．

Dockerのコンテナ内にMySQLやWebアプリケーションを開発し，それを本番環境で展開してもOKですか？

[tanat]

何をもってOKとするかは、そのプロジェクトの責任者が決めればいい事なので、学習用途の場合はご自身が問題無いと判断すればＯＫですよ。
やってみて、躓いたら質問するというのもありです。

技術的な懸念点があるかどうかという意味であれば、
「本番環境で展開」＝「Dockerコンテナ内のソースやDBダンプをVPSに展開」という意味であれば、
MySQLやその他のバージョンを合わせておく（本番環境に合わせられるコンテナを選んでおく）ことを注意すれば特に大きな懸念点は無いです。
「本番環境で展開」＝「Dockerコンテナをそのまま本番環境に展開」という意味であれば、
"VPS Docker"とかであらかじめ調べてみると良いでしょう。
躓きポイントは前者と変わってくるでしょうが、そこまでハードルは高くならないと思います。

Answer 2

まずそもそも，データベースを利用したWebアプリを作成するためには，有料のVPSなどを借りて開発するしかないのでしょうか．（なんでも無料で容量が使えるとは思うなということですかね・・？）

作成・開発するだけなら有料のVPSが必要ではありません。ローカル環境（自分でお使いのPCなど）でも開発が可能です。DockerやWSL2などを使うと、本番環境に近い開発ができるのでいいかと思います。

WSL上にMySQLをインストールしてデータベースを用意し，それを参照するWebアプリを作成した場合，Github Pages上に公開したときは動作しないと思うのですが，どうでしょうか．

どこでWSLが動いてるかにもよりますが、通常のPCを使ってるのであれば、Github PagesからMySQLへのアクセスができない（できないこともないけど、通常の方法では無理）ので、「動作しない」という意味ではそうだと思います。

Github Pages上でもデータベースを動作させたいときは，自分のVPSにあるMySQLなどでデータを管理し，それにアクセスする方法しかないのでしょうか．

Github Pagesは静的ホスティングサービスなのでPHPのようなプログラムが動作しませんので、直接データベースへのアクセスはできないと考えた方がいいです。データベースを絡めたいならJavaScriptを使ってWEB APIを介してデータベースにアクセスするのが一般的な方法かと思います。WEB APIはデータベースに近いところ（VPSなど）に設置する必要があるでしょう。一般的にはPHPなどのサーバサイドプログラムを使ってWEB APIを設置する必要があります。

そもそも，最終的に公開したいと思うWebアプリを開発するときは，最初からWSL上で開発し始めてはダメということでしょうか．表示だけのWebアプリならば問題ないと思いますが，データベースが絡んでくる時点でVPS上で直接開発した方がいいのかと思いまして．

最初に書きましたが決してダメではないです。最終的な本番環境に近づけて開発すれば、デプロイの手間はそれほど大きくはなりません。Github Pagesのような静的ホスティングサービスを使うのであれば、それに近い環境をDockerなりWSL2なりで作って開発すればいいだけです。

最後に，Vue.jsとデータベースを利用したWebアプリケーションをデプロイして公開するまでを，丁寧に解説する本やWebサイトをご教授願いたいです．かれこれ，VueやMySQLやデプロイについて十何時間も調べてますが，一向に全体像がつかめず，何度も挫折しかけています・・

いきなり自分のレベルに合ってない難しいことをしようとしてるからではないでしょうか？ Vue.jsとかいったん忘れて、まずはPHPとかのサーバサイドプログラミング言語とMySQLの単純な組み合わせで始めたらどうでしょうか？