Webアプリ実装までに必要なこと

どうも、りょすけです。

今日は実際にWebアプリを実装するまでに必要なプロセスを書きたいと思います。
Webアプリを作るのってプログラミングだけだと思いきや、意外とそれ以外に付随する作業もあるんです。

①開発環境構築
②フォルダ/データベースの作成
③プログラミング
④テスト
⑤本番環境構築

前提:MacbookRubyRuby on RailsAWSでの実装

①環境構築

まずやるのが開発環境の構築です。
プログラミング始めたばかりだとあまりピンと来ないんですが、
要は、言語とかフレームワークとかのインストールのことです。

コマンドラインツール
コマンドラインツールとは、その名の通りコマンドを入力してPCを操作するツールです。
f:id:ryosuke0711993:20180520110452p:plain:w200

こんなやつです。
これを入れてRubyのインストールやローカルサーバーを立ち上げたりします。

Homevbrew/rbenv/ruby-buildのインストール
簡単に言うと、プログラミングが便利になるパッケージをインストールしたりそのバージョンを管理したりするシステムです。
バージョン管理は、アプリケーションによっては同じRuby言語でも違うバージョンで作ったりするので必要になってきたりします。

Ruby/Ruby on Railsのインストール
開発用の言語をインストールします。
デフォルトで入ってないこともあるので、自分で言語を入れる必要があるんですよねー。 f:id:ryosuke0711993:20180520112307p:plain こんな感じでコマンドラインツールから入れていきます。

MySQLインストール
データベースです。
エクセルみたいな表形式のデータ格納ソフトウェアです。
ユーザーのデータや投稿されたツイートなどの保存をしたりします。 f:id:ryosuke0711993:20180520125139p:plain:w200

②フォルダ/データベースの作成

次に、プログラミングをするためのフォルダ作りとデータベースの作成を行います。
プログラミングも実はワードとかエクセルみたいなファイルのまとまりでできています。

実際のチャットアプリのフォルダ:
f:id:ryosuke0711993:20180520114522p:plain:w200

フォルダ作成/データベース作成:
f:id:ryosuke0711993:20180520114905p:plain これを打ち込むだけであらかたのフォルダとデータベースが作成されます。
これがRuby on Railsが便利と言われている所以でもあります。

③プログラミング

はい、メインのプログラミングです。
先ほど作ったフォルダに記載していきます。 f:id:ryosuke0711993:20180520115523p:plain:w500

色がついているのは、プログラミング用のテキストエディタというものを使っているからです。
種類ごとに色分けされているのでとても見やすいです!!

www.sublimetext.com

④テスト

プログラミングが終わったら、テスト用のコードを別に記載してプログラムが想定通りに動いているか確認します。
テスト用にプログラムを丸々別で記載するのでなかなか時間がかかります。 f:id:ryosuke0711993:20180520120303p:plain:h300

⑤本番環境実装

インターネット上に自分のWebサービスを公開する手順です。

EC2インスタンス生成
AWSの仮想サーバーのことをEC2インスタンスと言います。
AWSのサイトからログインしてEC2を生成、IPアドレスの設定を行います。 

アプリサーバーの構築
情報を処理して結果を返したりなど動的コンテンツの生成をするサーバーの設定をします。
有名なものでUnicornというサーバーがあります。Railsとのやりとりをするのもアプリサーバですね。これはファイルへの記述で割と簡単。

webサーバーの構築
HTMLなどの静的コンテンツの処理、アプリサーバーとのやりとりをするのがWebサーバーです。有名なものではnginxというものがあります。これもファイルへの記述で設定します。

サーバーの全体像はこちら:
f:id:ryosuke0711993:20180520122416p:plain:w400

まとめ

まとめると、全体の実装プロセスは下記のようになります。

①開発環境構築
コマンドラインツール
⑵Homevbrew/rbenv/ruby-buildのインストール
Ruby/Ruby on Railsのインストール
MySQLインストール
②フォルダ/データベースの作成
コマンドラインから作成していく。
③プログラミング
テキストエディタを使ってプログラミングしていく。
④テスト
テスト用にコードを書いて動作を確認していく。
⑤本番環境構築
⑴EC2インスタンスを生成する
⑵アプリサーバーを設定する
⑶Webサーバーを設定する

今回は細かいところは若干省いて、Webサービスを実際にネット上で公開するための全体概要を書いて見ました。
やって見て痛感したのはやっぱり、やっぱり結構作業が多い 笑

最後までお読みいただきありがとうございます。
細かいところでご質問等あればコメントくださいませ!