エンジニア転職 ポートフォリオ

【具体的手順】Webアプリケーションの開発の流れを解説【9ステップ】

Webアプリ作成手順

こんにちは!今回は、「Webアプリケーションの開発の流れを解説」という題です。
 
 
「Webアプリケーションの開発の流れ」とネットで調べても、難しい記事だったり、開発から公開までの具体的な流れを、簡潔にまとめている記事は意外と出てきません。
  
 
そこで忘備録も含め、どのようにWebアプリケーションを作成していくかを、簡潔に紹介していきたいと思います。
 
 
こちらが、Webアプリを作る大まかな手順です。ご覧の通り、結構大変です・・。

Webアプリケーション開発9ステップ

  • 自分のPCにIDEをインストールする。
  • 自分のPCにプログラミング言語をインストールする。
  • 自分のPCでプログラミングする(アプリケーションを作成する)。
  • サーバを用意する。
  • サーバにOSをインストールする。
  • サーバにプログラミング言語をインストールする。
  • サーバにミドルウェアをインストールする。
  • ネットワーク、セキュリティの設定を行う。
  • サーバに作ったアプリを置く。

自分のPCにIDEをインストールする。

自分の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にインストールします。インストールはプログラミング言語の公式ページから行います。
 

ただし、プログラミング言語によっては、予めPCにインストールされている場合もあります。例えば、C#やVBは標準でWindowsPCにインストールされています。

簡単Vueインストール方法
参考【5分簡単】Vue.jsをインストールしてHelloWorldを表示する

Vue.jsは、UI開発用のJavaScriptフレームワークの一つで、シンプルな設計と学習難易度が優しいことから、人気の高いフレームワークです。Vue.jsのインストールにはNode.js(正確にはnpm)のインストールが必要なので、Node.jsのインストール方法も同時に紹介します。

続きを見る

Go言語インストール
参考【5分簡単】Go言語をインストールしてHelloWorldを表示する

こんにちは!近年、多くのプログラミング言語の中で「稼げる言語」として人気が爆発しているのは、Googleが開発したGo言語です。本記事では、そのGo言語のインストール方法と、実際にプログラムを動かして、「Hello World」を表示するまでの方法を、丁寧に紹介していきます。

続きを見る

プログラミングする(アプリケーションを作成する)。

自分のPCでプログラミングする

開発環境が整ってようやく、プログラミングしてWebアプリケーションの作成を行います。最終的に、実行可能ファイル形式に変換しますコンパイル)。

サーバを用意する。

サーバを用意する

作成したWebアプリケーションを動かすためには、サーバが必要です。
 
 
一昔前では、ハードウェア(PC)を購入して、そのPCにOSやミドルウェアなどの必要ソフトをインストールしていました。
 
 
しかし、料金が高額なのと、サーバの構築・メンテナンスに専門知識がいることから、ハードルがかなり高いです。
 
 
そこで、AWSやGCPなどのクラウドサービスを活用することを推奨します。

  
ここで紹介するのは、EC2Amazon Elastic Compute Cloud)というAWS内のサービスです。

EC2紹介
 
このように、OSやメモリなど、ガイドに沿って選択をしていけば、サーバの用意がたった5分で完了します。
 
 
また、サーバのスペックはサーバ作成後に変更可能なのが、EC2の素晴らしいメリット。徐々にスペックを上げていくことが可能なので、必要以上に費用がかかることがありません。
  
 
一部無料枠もあるので、ポートフォリオ作成を考えている人には、EC2がおすすめです。
 
 
これから先は、AWSのEC2を使うことを前提で解説していきます。

サーバにOSをインストールする。

サーバにOSをインストールする

通常サーバを用意した後は、まずOSのインストールが必要ですが、EC2を使う場合は、OSインストール済みのサーバが提供されます。したがって、不要な手順になります。
 
 
自前でサーバを用意する場合には、必要な手順です。

サーバにプログラミング言語をインストールする。

サーバにプログラミング言語をインストールする

PCにインストールした時と同様に、サーバ側にもプログラミング言語をインストールします。環境変数など、PCにインストールした時と同じ設定が必要なので、設定内容は予めメモしておきましょう。

サーバにミドルウェアをインストールする。

サーバにミドルウェアをインストールする

次に、アプリケーションの動作に必要なミドルウェアのインストールを行います。必要なミドルウェアは、アプリケーションに依存します。

ミドルウェア例

Webサーバ:Apache、nginx など

DB:MySQL、PostgreSQL など

ドライバ:ODBCドライバ など

ネットワーク、セキュリティの設定を行う。

外部からアクセスできるようにする

諸々のインストールが完了したら、グローバルIPアドレスや、ファイアーウォールなど、ネットワーク・セキュリティの設定を行います。
 
 
グローバルIPアドレスとは、サーバのインターネット上の住所のことです。ファイアーウォールとは、不正なアクセスを防止する仕組みのことです。これらの設定を行うことで、セキュリティ対策をしっかり行いつつ、求める通信・アクセスだけを通すようにします。
 
 
EC2の場合、これらの設定はWeb上の「AWSマネジメントコンソール」で手軽に行うことができます。
   
   
最終的に、インターネットを通してサーバにアクセスできるようにします。

サーバに作ったアプリを置く。

サーバに作ったアプリを置く

最後に作ったアプリケーションをサーバに置いて、完了です。ApacheやnginxなどのWebサーバを使用する際は、アプリケーションと紐付けるために、同じく設定が必要です。

さいごに

以上が、Webアプリケーション開発の流れ・手順になります。
 
 
Webアプリケーションの開発というと、プログラミングすることに目が行きがちですが、このような、多くの環境構築と設定作業が必要です。
 
 
そして、この流れを理解しておくと、エンジニアとしての価値・単価がグッと上がります。紹介したAWSなんかは、とても簡単にサーバ構築できるので、是非チャレンジしてみてください!
 
 
お疲れ様でした!

-エンジニア転職, ポートフォリオ
-

© 2022 まいふぁんず