こんにちは！今回は、「Webアプリケーションの開発の流れを解説」という題です。
「Webアプリケーションの開発の流れ」とネットで調べても、難しい記事だったり、開発から公開までの具体的な流れを、簡潔にまとめている記事は意外と出てきません。
そこで忘備録も含め、どのようにWebアプリケーションを作成していくかを、簡潔に紹介していきたいと思います。
こちらが、Webアプリを作る大まかな手順です。ご覧の通り、結構大変です・・。
Webアプリケーション開発9ステップ
- 自分のPCにIDEをインストールする。
- 自分のPCにプログラミング言語をインストールする。
- 自分のPCでプログラミングする（アプリケーションを作成する）。
- サーバを用意する。
- サーバにOSをインストールする。
- サーバにプログラミング言語をインストールする。
- サーバにミドルウェアをインストールする。
- ネットワーク、セキュリティの設定を行う。
- サーバに作ったアプリを置く。
目次
自分のPCにIDEをインストールする。
まずはプログラミングを行う環境を整えるため、IDEをインストールします。IDEとは、Integrated Development Environmentの略で、統合開発環境と呼ばれます。
アプリケーションを作成するには、プログラミングしたソースコードを、実行ファイル形式（exe、dllなど）にしたり、作ったアプリをテストする必要があります。IDEには、これらの必要な機能がすべて組み込まれています。
IDEに組み込まれている機能例
エディタ：プログラミング補助
コンパイラ：実行ファイル形式に変換
デバッガ：バグの発見
「エンジニアになりたい！」「プログラミングできるようになりたい！」と思っても「じゃあ実際に何を勉強すればいいのか？」と疑問に思う人は多いのではないでしょうか？２００種類以上あると言われているプログラミング言語の中から、エンジニアの種類ごとにおすすめのプログラミング言語を紹介したいと思います！ 続きを見る
使用するIDEは、プログラミング言語によって変わります。プログラミング言語に関してはこちらで詳しく解説しています。
参考どのプログラミング言語を学ぶべきか？エンジニアの種類ごとに解説！
Microsoftが提供しているVSCode（Visual Studio Code）は、対応プログラミング言語が多いかつ、無料で使用できるため、初心者にはおすすめのIDEです。
また、AWSのCliud9のように、Web上で開発環境を提供してくれるサービスもあります。そのようなサービスを利用する場合は、IDEのインストールは不要です。
自分のPCにプログラミング言語をインストールする。
次に、開発に使うプログラミング言語をPCにインストールします。インストールはプログラミング言語の公式ページから行います。
ただし、プログラミング言語によっては、予めPCにインストールされている場合もあります。例えば、C#やVBは標準でWindowsPCにインストールされています。
-
-
参考【5分簡単】Vue.jsをインストールしてHelloWorldを表示する
Vue.jsは、UI開発用のJavaScriptフレームワークの一つで、シンプルな設計と学習難易度が優しいことから、人気の高いフレームワークです。Vue.jsのインストールにはNode.js（正確にはnpm）のインストールが必要なので、Node.jsのインストール方法も同時に紹介します。
続きを見る
-
-
参考【5分簡単】Go言語をインストールしてHelloWorldを表示する
こんにちは！近年、多くのプログラミング言語の中で「稼げる言語」として人気が爆発しているのは、Googleが開発したGo言語です。本記事では、そのGo言語のインストール方法と、実際にプログラムを動かして、「Hello World」を表示するまでの方法を、丁寧に紹介していきます。
続きを見る
プログラミングする（アプリケーションを作成する）。
開発環境が整ってようやく、プログラミングしてWebアプリケーションの作成を行います。最終的に、実行可能ファイル形式に変換します（コンパイル）。
サーバを用意する。
作成したWebアプリケーションを動かすためには、サーバが必要です。
一昔前では、ハードウェア（PC）を購入して、そのPCにOSやミドルウェアなどの必要ソフトをインストールしていました。
しかし、料金が高額なのと、サーバの構築・メンテナンスに専門知識がいることから、ハードルがかなり高いです。
そこで、AWSやGCPなどのクラウドサービスを活用することを推奨します。
ここで紹介するのは、EC2（Amazon Elastic Compute Cloud）というAWS内のサービスです。
このように、OSやメモリなど、ガイドに沿って選択をしていけば、サーバの用意がたった5分で完了します。
また、サーバのスペックはサーバ作成後に変更可能なのが、EC2の素晴らしいメリット。徐々にスペックを上げていくことが可能なので、必要以上に費用がかかることがありません。
一部無料枠もあるので、ポートフォリオ作成を考えている人には、EC2がおすすめです。
これから先は、AWSのEC2を使うことを前提で解説していきます。
サーバにOSをインストールする。
通常サーバを用意した後は、まずOSのインストールが必要ですが、EC2を使う場合は、OSインストール済みのサーバが提供されます。したがって、不要な手順になります。
自前でサーバを用意する場合には、必要な手順です。
サーバにプログラミング言語をインストールする。
PCにインストールした時と同様に、サーバ側にもプログラミング言語をインストールします。環境変数など、PCにインストールした時と同じ設定が必要なので、設定内容は予めメモしておきましょう。
サーバにミドルウェアをインストールする。
次に、アプリケーションの動作に必要なミドルウェアのインストールを行います。必要なミドルウェアは、アプリケーションに依存します。
ミドルウェア例
Webサーバ：Apache、nginx など
DB：MySQL、PostgreSQL など
ドライバ：ODBCドライバ など
ネットワーク、セキュリティの設定を行う。
諸々のインストールが完了したら、グローバルIPアドレスや、ファイアーウォールなど、ネットワーク・セキュリティの設定を行います。
グローバルIPアドレスとは、サーバのインターネット上の住所のことです。ファイアーウォールとは、不正なアクセスを防止する仕組みのことです。これらの設定を行うことで、セキュリティ対策をしっかり行いつつ、求める通信・アクセスだけを通すようにします。
EC2の場合、これらの設定はWeb上の「AWSマネジメントコンソール」で手軽に行うことができます。
最終的に、インターネットを通してサーバにアクセスできるようにします。
サーバに作ったアプリを置く。
最後に作ったアプリケーションをサーバに置いて、完了です。ApacheやnginxなどのWebサーバを使用する際は、アプリケーションと紐付けるために、同じく設定が必要です。
さいごに
以上が、Webアプリケーション開発の流れ・手順になります。
Webアプリケーションの開発というと、プログラミングすることに目が行きがちですが、このような、多くの環境構築と設定作業が必要です。
そして、この流れを理解しておくと、エンジニアとしての価値・単価がグッと上がります。紹介したAWSなんかは、とても簡単にサーバ構築できるので、是非チャレンジしてみてください！
お疲れ様でした！