泳げないたいやきの日記

趣味でCSを勉強したことをまとめるノートです。誤字脱字や、誤った記事などがあればご教授いただますと幸いです。

動的なwebサイトを初めて作成した話

 作成しようと思った経緯

最近、生物学に興味が湧いたのでHTML+CSSPHPMySQLAWSで顕微鏡を使用して撮影した写真を文章と一緒に投稿が可能なブログのようなサイトを作ろうと思いました。

※主は、エンジニアではありません。

 

 

開発環境(1つ目)

macOS Big Sur 11.4

・Apache2.4

MySQL 8.0.25

 ・PHP 7.3

 

開発環境(2つ目)

centOS 7.6

・Apache2.4

MySQL 8.0.25

 ・PHP 7.3

 

本番環境

Amazon Linux2

・Apache2.4

MySQL 8.0.25

PHP 7.3

 

 

 

作成中の記録

1日目(macbookを使用)

mackeynoteを使用して、サイトの大まかな構成を作成しました。

いろいろな機能が欲しいな〜と思いつつも、とりあえずシンプルに動くものを最初に作ろうと思い、構成はシンプルにしました。

f:id:OyogenaiTaiyak1:20210722160936p:plain

簡単な構成図

 

2日目(macbookを使用)

HTMLとCSSで、インデックスや投稿したい文と写真が表示できるページの作成をしました。

 

3日目(macbookを使用)

投稿した文と写真を表示するページのレイアウトが好みではなかったので、試行錯誤していました。

以前に登山中に撮影した写真をヒーローイメージにしたら見栄えがよくなりました。

(登山中に写真を撮っていた過去の自分に感謝です。)

掲示板を作成するにはPHPMySQLが必要なのですが、両方とも使用した事がないのでオライリーの「初めてのPHPMySQLJavaScriptCSS」を購入しました。

 

4日目(centOS7を使用)

掲示板の文章を保存するのにDBが必要だが、MySQLとはなんぞやという感じなので、オライリーの「初めてのPHPMySQLJavaScriptCSS」を読みつつ、centOS7にLAMP環境を構築しました。

 

 

5日目(centOS7を使用)

PHPMySQLの接続を行う練習をしました。

 

PHPのフォームが文字化けで表示されてしまった

MySQL文字コードをutf8にして、

PHPphp.iniのmbstringsもutf8にしたが文字化けが直りませんでした。

最終的な文字化けの対処は、meta charset ute-8を設定した事で直りました。

 

7〜10日目(centOS7を使用)

グレイコードさんのサイトを見ながら、掲示板の作り方を練習しながら学びました。

ここでは、centOS7にLAMP環境を構築して練習していました。 

phpMyAdminのインストールに少し躓きましたが、ファイルをインストールして、unzipで解凍し、/var/www/htmlにphpMyAdminのファイルを移動したら起動できました。

 

11日目(macbookを使用)

macOSApacheMySQLPHPをインストールしました。

インストール時につまづいた箇所を別のハテナの記事に書きました。

 

12〜20日目(macbookを使用) 

7〜10日目にグレイコードさんのサイトで学んだ事を参考にし、PHPMySQLを自身のサイトに実装しました。

macOSの環境に実装していく事に少し手間取りましたが無事に実装できました。

 

 

21日目

デザインの本を読みながらCSSを使い、サイトのデザインを変更しました。

本を読んでいるとwebサイトの配色は3〜4色が扱いやすく、さらに見やすくて良いと書いてあったので、自然をイメージしやすい緑色や茶色をベースとした配色にしました。

現時点の配色では多様な色覚に配慮できていないので、今後改善する際には配慮をした配色にしたいと考えています。

デザインの本を一冊読んでみましたが、レイアウト・色・書体・画像について知らない事が多くあり、とても奥が深いと感じました。

 

22日目(macbookを使用)

Sketchの使い方の本を読みながらデザインツールであるSketchを使い、サイトに使う画像を作成しました。

f:id:OyogenaiTaiyak1:20210724204544j:plain

Sketchで作成したアイコン1

f:id:OyogenaiTaiyak1:20210724204620j:plain

Sketchで作成したアイコン2


 

23〜25日目(Amazon Linux2を使用)

AWSのEC2を使用したことがなかったので、EC2インスタンスの作成の方法・ターミナルの使用方法・コマンド操作の方法などの基本的な事をEC2を動かしながら学びました。

学んだ後に実際に本番環境用のEC2インスタンスを作成し、LAMP環境を構築し、gitからwebサイトのファイルをクローンしました。

 

26、27日目

EC2上に構築したwebサイトを公開しようとしたが、AWSLinuxのセキュリティについて不安だったので、Linuxの本を何冊か読んだり、AWSのドキュメントを読みながらセキュリティのレベルを向上させました。

 

28日目

AWSのRoute53を使用し、ドメイン名を取得しました。

相場がわからないので高いのか安いのかは不明ですが、1年のドメイン使用料は12ドルでした。

 

29日目

作成したwebサイトをHTTPS化をしたかったので、AWSのRoute53・AmazonCertificateManager・ElasticLoadBalancerを使用しました。

無事にwebサイトをHTTPS化できたので、ここでひとまず完成とします。

 

完成

HTML+CSSPHPMySQLAWSを使用して作成したサイトの画像です。

f:id:OyogenaiTaiyak1:20210722173835p:plain

作成したwebサイト



 

感想

今までLAMP環境を使用した動的サイトを作成した事がなく、様々な箇所でつまづいてしまい大変でしたが、webサイトを公開できて嬉しいです。

(上手い下手に関わらず、とりあえず最後まで完成させようという精神状態でした。)

普段、日常で使用しているwebサイトが多くの時間や人員、技術、知識の上で成り立っているという事を改めて実感しました。

 

 

 

 

参考図書

  • 初めてのPHPMySQLJavaScriptCSS - 著Robin Nixon
  • AWSではじめるLinux入門ガイド - 著トレノケート株式会社山下光洋
  • パーフェクトPHP - 著小川雄大/柄沢聡太郎/橋口誠
  • CSSグリッドで作るHTML5&CSS3レッスンブック - 著エビスコ
  • UIデザイナーのためのSketch入門&実践ガイド - 著吉竹遼
  • いちばんよくわかるWebデザインの基本きちんと入門 - 著伊藤庄平
  • centOS7で作るネットワークサーバ構築ガイド - 著サーバ構築研究会
  • 標準テキストcentOS7構築・運用・管理パーフェクトガイド - 著有限会社ナレッジデザイン大竹龍史/市来秀男/山本道子/山崎佳子

 

 参考文献 

Linuxについて

qiita.com

qiita.com

Apacheについて

www.rem-system.com

 

MySQLについて

dev.mysql.com

 

www.dbonline.jp

 

qiita.com

 

note.com

 

onoredekaiketsu.com

 

 PHPについて

qiita.com

 

gpaim.com

 

www.bnote.net

 

EC2について

AWS(EC2)を立ち上げてPHPを動かす話 - Qiita

 

qiita.com

 

 

qiita.com

 

qiita.com

aws.amazon.com

qiita.com

 

itneko.com

 

miyabi-lab.space

 

docs.aws.amazon.com

 

n2p.co.jp

 

qiita.com

 

www.acrovision.jp

 

qiita.com

 

セキュリティについて

dev.classmethod.jp

 

www.ipa.go.jp


aws.amazon.com

 

www.early2home.com

 

HTTPS化について 

dev.classmethod.jp

 

dev.classmethod.jp

 

qiita.com

 

最後に

大勢の方のブログや文献や書籍を読ませていただくことで作成する事ができました。

ありがとうございました。