2020/10/01 授業で作成したECサイト
学校のとある授業でECサイトを作る機会があり、
友人3人と計4人チームで作成した。
期間は8月5日~9月30日の約二ヶ月。
とはいえ、他の授業やインターンなどで多くの時間はとれないのでかなりタイトなスケジュールだった。
まずはどんなECサイトを作るか。から始まり、デザイン設計、処理、データベース、インフラなど様々。
メンバーそれぞれが得意な分野で担当を分けた。
天才のリーダーのMくんはバックエンド担当
天才のメンバーSくんはフロントエンド担当
天才のメンバーNくんはコンテンツ担当
そして私はインフラ担当
このメンバーで開発スタート。
チーム名決め
まずはチーム名を決める。
今回のグループ演習は2回目で、今回のメンバーは前回のグループで
リーダを行っていた人で固まった。
リーダからメンバーに反転したので「Inverters」という名前に決まった。
ECサイトの方向性を決める
メンバーのNくんは筋トレが大好き。
なので筋トレグッズを販売するサイトにした。
授業の趣旨としてマーケティングに関する成分が強かったが、
私達は開発がやりたいだけだったので実際に運用できるようなサイトをつくる
という方向性ですすめることにした。
開発言語
サイトはPHPを利用する。時間もなく、フレームワークを経験がなかったため、
ノンフレームワーク。
インフラ
最終的にインフラはAWS上で動かす予定ではあったが、まずは検証環境を一人ひとりに用意する。
自宅のサーバにLAMP環境を構築し、バーチャルドメインで4人分のサブドメインで環境を提供。
その間に自分は今回利用したECSについて勉強をすすめる。
サイトのデザイン
インフラ担当だったが、画像や動画も好きだったので資料や画像周りも担当した。
まずは筋トレサイトということでブランド名を決めることにした。
筋肉を創り上げるという意味を込めて「Creare」と名付けることにした。
次はロゴ作成。
筋トレということでスポーツ系をイメージ。
また、あまり複雑なロゴではなく、シンプルなものが良かったのでそれも意識。
とりあえず紙にcreareをなぐり書き。ボケーッとcreareと書いてみてCを大きくしてみたり。
そんな感じで作成したロゴがこちら。
https://gyazo.com/d1e177a9ec6390e5da6ef056f95c12d8
Cは周りのカーブの部分。
aとeはくっつき、rの部分は右下にピヨッと出ている部分。
とりあえずそれっぽく完成。
ついでにInvertersのロゴも作成。
これはかなり適当。
https://gyazo.com/99c6469bc090e82d376849abc94711d8
続いて
サイトのデザインはAdobeのXDを利用し、プロトタイプを作成。
デザイン1
https://gyazo.com/73109d9131c74388fe2ff78e3b97c3ab
なんとなくサクサク作成され、この形になった。
これで進もうかと思っていたが、Sくんのブログっぽくね?の一言で変更。
Mくんと朝まで修正しつづけ、
https://gyazo.com/5d90bae8c5aa2b26ea4969718fbe796e
このような形に。
XDにて各ページを設計し、最終的に各ページのデザインが完成。
https://gyazo.com/971fd2fc4088823f98435696bbc8bb01
このように設計したが、このデザインを実際に作ってくれるのは天才Sくん。
各担当ごとに作業
インフラ
インフラと画像周りを担当した私はまずはインフラの検証と準備。
普段自宅のESXiでいろいろと行ってきたが、今回はAWS。
AWSでECSを利用するということで、最終的な構成図を考えつつも、検証。
最終的な構成図。※結局Auth0からのメールのリレーは行わず、PHPMailerで送信した。
https://gyazo.com/ab9e27752d3ebcda957a78279921fe7f
ECSの検証内容はここに軽く書いたとおり
この他にも、家からZabbixを用いたWeb監視を行い、DiscordにWebhookで送信。
メールのSPF,DKIM,DMARCあたりの設定
Dockerの勉強
AWS Clieant VPN
などなどいろいろやってみた。
これらをローカルで検証し、AWSにデプロイしてPHPとDBが動くところまで確認ができたので一段落。
また、ドメインも購入。
画像や動画
次にコンテンツの画像など。
コンテンツ担当のNくんが商品の画像と商品の詳細内容を作ってくれていたので自分は他の画像を用意。
商品画像に関して、16:9に加工する必要があったのだが、Photoshopのバッチ処理という便利な機能を見つけてしまった。
今回のサイトはBasic認証をかけ、クラス内のみ見せるつもりだったので商品画像は適当に持ってきたものでアウト。
なので自社の製品を作るべく、私はBlenderに向かった。
↑3Dに関するメモはこっち
今回作成するのは筋トレの王道、ダンベル。
形がシンプルで作成しやすい。
トーラスのプリミティブなオブジェクトからあんなふうにこんなふうにしてダンベルが完成。
https://gyazo.com/2a3bad8c5d8202af5c371005f85e9db0
ゴージャスな金のダンベルも用意。
https://gyazo.com/5e0f92d6957243077b4c9f67ea3f4cfd
あとはページのトップに来るスライダーの画像やバナー画像をphotoshopで作成。
https://gyazo.com/da149a38bd7e0b014ce696287087953f
発表時に作成する動画はAfterEffectで作成。
といっても凝ったアニメーションではなく、説明アニメーション。
これは早い段階で作成していたのでスムーズに進んだ。
バックエンド
バックエンドは天才のMくんが書いてくれた。
データベースが好きらしく設計をしてくれた。しゅごい。
データベースはあまりわからないので話を聞いて色々と勉強になった。
ECサイトを構築する上で様々なテーブルを用意するが、
まずは整合性が崩れないように設計すること。
ここではリレーションを張り、外部キー制約等を利用。
RESTRICT, CASCADE, SET NULL, NO ACTION
外部キーの参照先が削除されてしまうと整合性が崩れてしまうため、
子テーブルで使われている場合は削除出来ないようにするなど、上のような制約を掛ける必要がある。
他にも、トランザクション、ロックなどいろいろ。
他にも色々なことを実装してくれた。
PHPに関してもセキュリティに関する部分。
PayPal、Auth0など。
自分がバックエンドの中で関わった部分はメール送信の部分。
PHPMailerをcomposerでインストールして、送信させる処理とお問合せフォームの実装。
PHPMailerはsettingでPostfixの認証情報を書くだけ。
お問合せフォームは、フォーム→確認→確定 という流れ。
確定時に連打すると重複POSTしてしまうのでその対策で、Tokenを利用した。
フォーム部分のページに入ると、ランダムなトークンを発行。
このとき、セッションにトークンを格納する。
このトークンをフォームのhiddenに格納し確認ページにPOST
確認ページではPOSTされた値を同様にhiddenに入れ確定ページにPOST
確定ページではセッションの中身とPOSTされた値を比較し、正しければ送信。
正しくなければ送信しない。
送信と同時に、セッションのtokenを削除しているので、複数POST時に2回目以降は弾かれる。
ブラウザバックして更新してもセッションの中身は消えているので送信されない。
フロントエンド
フロントエンドは天才のSくんが行ってくれた。
HTML、CSS、JavaScriptをガッツリ書いてくれた。
PugとSassという効率化するものを利用していたようで、自分もパクろうと思う。
クラス名の命名規則やモジュール化など拡張性が高くキレイなコードを書いていた。
グリッドデザインなるものがあるらしく完全に理解したらしい。
自分はフレックスボックスから始めないといけない。
自分がフロントで関わった部分は特になし
強いて言うなら、Commentページの部分。
なんとなく各メンバーのコメントどうしようかなと考えていたらひらめいた。
各担当に関わったコードを使って感想かけば良さそうと。
それで調べると、「highlight.js」というものを発見。
それをコピーしてきて実装。
これは自分のコメント部。
docker-composeのYAMLを意識した。
ぶっちゃけdocker-composeは使ってないんだけども。
ちなみにこのhighlight.jsいろいろなスタイルを選択できる。
自分はvscodeで利用しているdracula。
https://gyazo.com/7a02dc8623ba4635100e120d7e008281
AWSに移行
ある程度完成したらAWSに移す作業。
とはいえ、githubで管理していたので簡単。
githubからクローンして、githubにアップ出来ないものを追加し、
docker buildでイメージ化、それをECRにプッシュするスクリプトを用意し、
実行するだけ。
データベースに関しても、AWS上にphpMyAdminを用意していたので、
検証環境のデータベースをエクスポートしてRDSにインポートするだけ。
本番
発表当日。
発表時間内に、体験時間を設け皆でワクワクしていたが、体験してくれる人はほぼおらず。
攻撃されたときの対策でいろいろ準備していたが、当然攻撃も来なかった。
海外からの攻撃は頻繁にやってきていた。
WAFでリージョンブロックしていたのでそこは遮断されていた。
ハマリポイント
このリージョンブロックでややハマリ。
今回メールはHTMLメールを利用、画像を入れる必要があった。
その画像は自分たちのWebサイトに置いていたが、メール受信時に表示されない。
Basic認証のせいかと思ったが、NginxでBasic認証から除外しているため問題ない。
原因はリージョンブロック。
Gmailは、画像などのコンテンツをGoogleのプロキシを通して取得する。
つまり、Googleの海外サーバを経由してサイトにアクセスしていたため、遮断されていた。
知らんかった。
そんな感じで2ヶ月の共同開発は終了。
なかなかいい勉強になった。
特にAWSはほぼ触っていなかったのでだいぶいい勉強に。
3000円程請求されたが、授業料だと思えば問題ない。
エデュケーションのアカウントが制限多くて使えない
以上
サイト紹介おまけ
トップ。スライダーは勝手に動く。
https://gyazo.com/70407e24f7c4ed212a3890eb8704a44f
https://gyazo.com/88b2f0b85bfaa36cda03f2e7067af13d
お問い合わせページ
https://gyazo.com/5e5bf7a4259b17c29c0aca4600993e7e
商品詳細ページ
https://gyazo.com/729fd9c6825e0394e84d566133eb21e0
ショッピングカートページ
https://gyazo.com/2547ace22c195e86f04cc08029cb3502
お支払ページ
https://gyazo.com/f570c7f89637ec7ed17acfe8b45b5456
https://gyazo.com/a18ad87478fb5bac16c0dc7cfc42002a
https://gyazo.com/7736b3c7b738f192fce875982e241596
Nくんが作ってくれたメール
https://gyazo.com/4399e57711d7f9d59d9a977790c06ce3