1.はじめに

株式会社エニプラでは、社内のチームごとにテーマを決め、
毎月行われるチーム会でテーマに沿った活動を行っています。
チーム会で行った内容は、年末に「エニプラアワード」という場で
全社員や来期の新卒に向けて発表を行っています。

今年度松田チームでは「AWS学習&Webページ作成」をテーマに活動してきました。
テーマを検討、決定した背景として以下の4点あります。

1．AWSに関する資格取得を目指す人が増えてきたこと
2．AWSというサービス自体は聞いたことがあるが、具体的なイメージが湧かない
3．Web・HTMLについて学習してみたい
4．取り組んだ成果を発表する上で実際に見られるものを作りたい

上記の4点をまとめた結果、「AWSを利用してWebページを作ってみよう」ということになりました。

2.全体スケジュール

約半年のチーム会活動全体を通して
図のようなスケジュールでエニプラアワードに向けて取り組みました。

まず、5-7月の期間でチーム全体でAWSそのものについての座学や、
Webページ作成に必要なインフラ・フロントの基礎知識を学習しました。
8月以降は自分の興味がある分野を選び、インフラチームとフロントチームに分かれ、
Webサーバ構築やWebページのコーディングに向けて、座学と実作業をそれぞれチームにて実施しました。

3.AWS全体学習

次に、実際にどのような内容の座学や実作業を行っていたのかについて紹介します。
まず、各チームに分かれる前にAWSについての学習を行いました。
下記にある画像は、『AWSome Day』と呼ばれる公式オンラインセミナーです。
セミナーの内容をベースに、AWSのビジネスモデル(従量課金制等)であったり、
システムを構築するうえでのオンプレとパブリッククラウドの考え方の違いや、
今回触ることになるAWS上の主要なリソースについて学習しました。

実際に皆が使えるようにAWS上にユーザーを作成していたので、
ログインしてAWSのWebコンソールを見てみるといったことも併せて行いました。

AWSome Dayとは

『AWSome Day』は定期的に実施されている公式オンラインセミナーです。
内容としては、AWS入門者向けにAWSの概要や基礎知識について解説するもので、
社内で実際に参加した人からは非常に解りやすい内容であったという感想が挙がっています。
これからクラウドを学ぶ人には、オススメです。

セミナー開催情報：AWSome Day

4.構成図

実際に作成したAWSの構成図がこちらになります。
要件として、無料枠の範囲内、つまり、お金がかからない範囲でやること、
Webサーバは1台で、Webページに掲載する画像はS3と呼ばれるAWSのストレージサービスに
配置してサーバから参照させるといった構成です。

5.インフラチーム学習内容-Part1

ここからはインフラチーム・フロントチームが、それぞれ行った学習・実作業について
説明させていただきます。
まず初めに、インフラチームは『Webサーバを構築する』というのが目標です。
実際に、構築業務経験があるメンバーが少ないため、
なるべく実際の構築業務に近い流れで行うことをコンセプトに、下記の要件を提示しました。

要件の確認

ミドルウェアとしてApacheを利用する
通信に使用するポートは80
ドキュメントルートは/var/www/html/＜作成したフォルダ名＞にする
インスタンス起動時にApacheが自動実行するようにする

これらを踏まえて、実際にWebサーバとして動作させるためには、
どういった作業が必要になるのかを洗い出しました。
メンバー間で協力しながら『Apacheとは何か』というところから、
インストール方法や設定方法、コンフィグの変更箇所などを洗い出しました。

Tips：Apacheとは

Webサーバ用ミドルウェアの一つ。
オープンソースソフトウェアとして公開され、無償で利用できる。

6.インフラチーム学習内容-Part2

要件の確認と作業の整理をしたのち、構築時に必要になるコマンドを調査し簡単な手順書を用意しました。
今回、OSはAmazon Linux2と呼ばれるAWS EC2インスタンス上で利用できるLinuxベースのOSです。
構築の流れとしては、デフォルトパッケージのアップデートから始まり、
Apacheのインストールと設定変更、それを反映するためのサービス再起動です。
手順として整理したコマンドは、下記記述の通りです。

コマンド整理

 1. パッケージアップデート
# yum update
 2．Apacheのインストール
# yum install httpd
 3．ポートが80となっていることを確認する
# cat /etc/httpd/conf/httpd.conf | grep Listen
 4．ドキュメントルートを"/var/www/html/＜作成したフォルダ名＞"配下に作成
# vi /etc/httpd/conf/httpd.conf
 5．サービス再起動
# systemctl restart httpd
# systemctl status httpd
 6．Apacheが自動起動するよう設定
# systemctl enable httpd.service

EC2インスタンスに接続して実際に構築

WebブラウザからグローバルIPにアクセスし、サンプルページが表示されることを確認

最終的にWebブラウザからAWS上のサーバにアクセスし、
デフォルトのサンプルページが表示されることを確認する。

以上がインフラチームで行った内容となります。

7.フロントチーム学習内容-Part1

続いて、フロントチームの学習内容を紹介いたします。
Webページを作成するために、まずWebページが何の言語を使用して
作成されているかを調査しました。
調査の結果、主にHTML,CSS,JavaScriptが使用されていることが分かりました。

HTMLとは

HTMLはウェブページを作成するために作られた言語です。

HTMLの学習内容としては、主に各HTMLタグの役割について学習しました。
HTMLタグはブラウザがWebページの構造を理解するために使用されています。
各ブラウザ毎に、表示に差が出るSelectbox等のHTMLタグを使用して
HTMLに従ってブラウザがWebページを理解し、表示していることを確認しました。

CSSとは

CSSはウェブページのスタイルを指定するための言語です。
HTMLと併せて文字や枠の色を変更したり、図形を作成したりと、装飾をするために使用されています。
CSSの学習内容としては、各プロパティの意味や使い方を学習しました。

JavaScriptとは

JavaScriptはプログラミング言語の一つで、Webページに動的な表現を付けるために使用されています。
今回は時間の都合上使用することができなかったのですが、次の機会があれば使いたい要素の一つです。
調査後、サンプルページを参考にレイアウトについて学習を進めました。
これはヘッダーやメインコンテンツ等、何処にどの要素があるかを理解しておくことが、
HTMLを書いていく上で非常に重要なためです。

8.フロントチーム学習内容-Part2

レイアウトの確認が終わった後、まずはVisualStudioCodeの使い方を学びました。
フロントチームでは、VScodeを触れたことがあるメンバーがあまりいなかったためです。
VScodeは予測変換や拡張機能が優秀なため、便利な機能をできるだけ使用する方向で進めました。

その後、実際にコーディングを行いました。
コーディング中は記載したHTML要素の配置やCSSの適用状況など、適宜ブラウザで確認しつつ行いました。
想定外の画面になっている箇所は、ブラウザのデベロッパーツール等で確認と修正を行い、
Webサーバに乗せるソースを完成させました。

以上がフロントチームで行った内容となります。

9.完成したサイト

インフラチームが作成したWebサーバに、フロントチームが作成したソースを配置し、
実際に完成したサイトがこちらになります。

※上記画像は、スマートフォンの操作画面となります。

実際のチーム会での活動風景や、実施内容が掲載されています。
スマートフォンで表示させた際にも自動的にリサイズされるような作りになっています。

10.まとめ

2020年エニプラアワードテーマは『AWS学習&Webページ作成』でした。
AWSオンラインカンファレンスの内容をベースにチーム全体でAWS基礎を学習しました。
インフラチームでWebサーバを、フロントチームでWebページのソースを作成しました。

半年間の活動を通して

AWSへの理解が深まり、個人でも触ってみようと思った。
HTMLとCSSでWebページが表示されていることが理解できた。
というご意見もありました。
自分もAWSのセミナーは興味あるものなので、機会がある際に参加してみたいです。

以上で、ご紹介を終わります。ありがとうございました。

AWSを利用してWebページを作ってみよう

目次