Introduction

こちらは継続的な記事で、少しずつ加筆します。

きっかけ

過去インターネットのサービスをいくつも利用してきました。現在はWebエンジニアとして働いています。しかし、未だにWebサイトとWebアプリの境界線がフワッとしています。自分自身のポートフォリオを作成したいと考えてもう3~4年経過しています。

ブログは書いたことありますし、こうしてQiitaでも執筆しています。文章ならばいくらでもインターネット上に公開した経験はあります。しかし自分自身で作成したPythonファイルをインターネット上に公開するのはどうすれば良いのでしょう。(過去に業務でクラウドを用いてWebアプリをいくつも作成した経験はあります。)

サーバーレス開発を何度もしている人間が、サーバーを用いたWebアプリ開発で四苦八苦した記録をここに残します。

結論は、AWSマジパネェッス。です。

要するに下記の隔たりがどれほどの隔たりなのかを検証する記事となっています。
ローカル環境へのデプロイと、Webへのデプロイの間にはどれほどの違いがあるのかを検証する記事となります。過程はこの記事含めて幾つかに分けて公開します。(それぞれ単品でも楽しめる内容となっています)

- Pythonでプログラミングする。
- Pythonのアプリを作る。
- ローカル環境(localhost)にデプロイする。
↑ここまでは経験があります。



↓これを達成したいわけです。
- Pythonアプリをインターネットに公開する。

上記の隔たりは、ローカル環境へのデプロイのコマンドを少し変える程度なのか。はたまた全然別次元の違いがあるのか。

サーバーレス開発ばかりやってるクラウドネイティブの人間が、いわゆるサーバーレスでないサーバーを触ってみるとどうなるのか。¹
いざ尋常にやってみましょう！

なお今回の記事は三部作となっております。

WebサイトとWebアプリの違い <-イマココ
Webアプリの開発(ローカル)
Webアプリの公開(Heroku)

です。

今回作成したアプリはこんな感じです。

BottleとVueCLIを用いて作成しました。
Webアプリの詳細に関しては下記の記事をご覧ください。

ローカルで動くBottleとVueJSで作成したアプリの詳細はこちらをご覧ください。

さらに今回のWebアプリをローカル環境だけでなく、インターネットで公開するまでの軌跡に関しては以下にまとめました。。

Herokuに載せてみた。Pathまわりが結構大変でした。特にURLを公開とかはしていません。

自己紹介

自己紹介ページ

Let's Start

Webサイトを調べてみた。

この記事執筆の動機は、手元で動かしているPythonアプリを友人に見せたい。かといって、いちいち会いに行って見せるのも面倒です²。例えるなら、SNSやチャットツールでURLを共有したら、親や友人が見られるようにしたい。 ~~そしてすごいと言われたい~~
なんならポートフォリオサイトみたいなものを作って、技術力を誇示したい。とかが原動力となっています。

やりたいこと

ポートフォリオサイトが作りたい。
作ったものを友達に見せたい。
直接会わなくても見せられるようにしたい。

独自ドメインが必要。
独自サーバーが必要。
ということくらいは知ってます。というか、なんならAWSを用いてWebアプリの開発自体は何度もしたことがあります。全体像はわかります。お金はありません。出来ることならなるべくお金を使わないで試してみたいと思いました。³

調査の結果を端的にまとめると、無料でWebサイトを公開できるようなサービスはいくつかあるようです。
Notionだったり、Netlifyだったり、Github pages系は、WebアプリではなくWebサイトを作るサービスというものみたいです。
HTML + CSS + JavaScriptだとWebサイトで十分ですが、Pythonを裏側で動かしてDBにデータを保存するようなWebアプリはダメみたいです。

最近はEverNoteから、もっぱらNotion沼にハマっているわけですが、NotionのWeb公開を使って簡単にWebアプリのデプロイができると思っていたけれど、全然ダメでした。

色々調査した結果、(正確な定義はよくわかりませんが、)本記事ではWebサイトとWebアプリは異なる。Webサイトはホスティングするだけ。ブログサービス系。Webアプリは入力された値に応じて、計算したものを返すものということがわかってきました。

クラウドしか勝たん。

なるほど。サーバーサイドでPythonを動かすものは、Webサイトとは呼ばないみたいですね。レンタルサーバーを契約してLinux上で諸々動かす道を考えたのですが、あまりにも道のりが遠そうです。

下記に羅列します。

レンタルサーバーには、PythonのライブラリをDLする必要があるようです。(よくわかりません。)
環境構築やOSの選定も必要みたいですね。(憶測です。)
無料である程度試せるHerokuが良さそうです。（経験に基づいています。）

そういえば、過去に使ったことがあったので、Herokuを再利用してみましょう。

普段はAWSでLambdaとAPI GatewayやS3とCloudFront、はたまたAmplifyで簡単にWebのREST APIを開発しています。クラウドを用いると、簡単に公開できます。
そのノリでPythonアプリを簡単に公開してやろうと目論んでいましたが、全然ダメでした。文字通り全く全然ダメでした。Herokuのデプロイを済ませたところで、まだまだ使いづらいものでした。

ここから壮大な旅がはじまります。と同時にAWSの破壊力に驚嘆するばかりでした。なんてこったい。。。

両者の違い(結論ともいう。)

なお、この記事を書き終えた頃にWebサイトとWebアプリは、下記のような違いがあることを理解しました。

Webサイト：ブログのようなもの。事前に作成した文章をWeb上でまとめたもの。QiitaもWebサイトですね。
Webアプリ：ユーザーの入力した内容をサーバー側で処理して値を返すもの。例えば電卓のようなものですね。
完全な定義は自分もわからないです。詳しい方教えてください。
違うんです。Computer Scienceを前提とした厳密な定義とかが知りたいわけじゃないんです。なんかこう、おぼろげにフワッと知りたかっただけなんです。というかフロントエンドを大して勉強せずともPythonを用いて、いい感じのWebアプリを作りたいだけなんです。

過去には、こんなものを試したこともあります。

To be Continued

終わりに

今後もTwitterでこのようなデータの可視化を発信しています。興味があったらご覧ください。 ~~大抵はくだらないことです。~~

Sempleのツイッター

今後調べる予定のもの

バックエンドとフロントエンド(サーバーサイドとクライアントサイド)
同じような概念を表す言葉が多いですわよ！
SSLって何ですか。どうして独自ドメインの購入以外に、SSL証明書を購入する必要があるのかしら？
サーバーには、メールサーバーやネームサーバーなどもあるらしい。

サーバーレスじゃないサーバーってなんですかね？　ジェネレーションギャップですね。 ↩
令和の時代ですしね。 ↩
経験のあるAWSを使わなかった大きな理由はここにあります。なんか安価で(無料で)できないのかな？とか思ってました。 ↩