動的なwebサイトを初めて作成した話
作成しようと思った経緯
最近、生物学に興味が湧いたのでHTML+CSS+PHP+MySQL+AWSで顕微鏡を使用して撮影した写真を文章と一緒に投稿が可能なブログのようなサイトを作ろうと思いました。
※主は、エンジニアではありません。
開発環境(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を使用)
macのkeynoteを使用して、サイトの大まかな構成を作成しました。
いろいろな機能が欲しいな〜と思いつつも、とりあえずシンプルに動くものを最初に作ろうと思い、構成はシンプルにしました。
2日目(macbookを使用)
HTMLとCSSで、インデックスや投稿したい文と写真が表示できるページの作成をしました。
3日目(macbookを使用)
投稿した文と写真を表示するページのレイアウトが好みではなかったので、試行錯誤していました。
以前に登山中に撮影した写真をヒーローイメージにしたら見栄えがよくなりました。
(登山中に写真を撮っていた過去の自分に感謝です。)
掲示板を作成するにはPHPとMySQLが必要なのですが、両方とも使用した事がないのでオライリーの「初めてのPHP、MySQL、JavaScript&CSS」を購入しました。
4日目(centOS7を使用)
掲示板の文章を保存するのにDBが必要だが、MySQLとはなんぞやという感じなので、オライリーの「初めてのPHP、MySQL、JavaScript&CSS」を読みつつ、centOS7にLAMP環境を構築しました。
5日目(centOS7を使用)
※PHPのフォームが文字化けで表示されてしまった
PHPのphp.iniのmbstringsもutf8にしたが文字化けが直りませんでした。
最終的な文字化けの対処は、meta charset ute-8を設定した事で直りました。
7〜10日目(centOS7を使用)
グレイコードさんのサイトを見ながら、掲示板の作り方を練習しながら学びました。
ここでは、centOS7にLAMP環境を構築して練習していました。
※phpMyAdminのインストールに少し躓きましたが、ファイルをインストールして、unzipで解凍し、/var/www/htmlにphpMyAdminのファイルを移動したら起動できました。
11日目(macbookを使用)
macOSにApache、MySQL、PHPをインストールしました。
インストール時につまづいた箇所を別のハテナの記事に書きました。
12〜20日目(macbookを使用)
7〜10日目にグレイコードさんのサイトで学んだ事を参考にし、PHPとMySQLを自身のサイトに実装しました。
macOSの環境に実装していく事に少し手間取りましたが無事に実装できました。
21日目
デザインの本を読みながらCSSを使い、サイトのデザインを変更しました。
本を読んでいるとwebサイトの配色は3〜4色が扱いやすく、さらに見やすくて良いと書いてあったので、自然をイメージしやすい緑色や茶色をベースとした配色にしました。
現時点の配色では多様な色覚に配慮できていないので、今後改善する際には配慮をした配色にしたいと考えています。
デザインの本を一冊読んでみましたが、レイアウト・色・書体・画像について知らない事が多くあり、とても奥が深いと感じました。
22日目(macbookを使用)
Sketchの使い方の本を読みながらデザインツールであるSketchを使い、サイトに使う画像を作成しました。
23〜25日目(Amazon Linux2を使用)
AWSのEC2を使用したことがなかったので、EC2インスタンスの作成の方法・ターミナルの使用方法・コマンド操作の方法などの基本的な事をEC2を動かしながら学びました。
学んだ後に実際に本番環境用のEC2インスタンスを作成し、LAMP環境を構築し、gitからwebサイトのファイルをクローンしました。
26、27日目
EC2上に構築したwebサイトを公開しようとしたが、AWSとLinuxのセキュリティについて不安だったので、Linuxの本を何冊か読んだり、AWSのドキュメントを読みながらセキュリティのレベルを向上させました。
28日目
相場がわからないので高いのか安いのかは不明ですが、1年のドメイン使用料は12ドルでした。
29日目
作成したwebサイトをHTTPS化をしたかったので、AWSのRoute53・AmazonCertificateManager・ElasticLoadBalancerを使用しました。
無事にwebサイトをHTTPS化できたので、ここでひとまず完成とします。
完成
HTML+CSS+PHP+MySQL+AWSを使用して作成したサイトの画像です。
感想
今までLAMP環境を使用した動的サイトを作成した事がなく、様々な箇所でつまづいてしまい大変でしたが、webサイトを公開できて嬉しいです。
(上手い下手に関わらず、とりあえず最後まで完成させようという精神状態でした。)
普段、日常で使用しているwebサイトが多くの時間や人員、技術、知識の上で成り立っているという事を改めて実感しました。
参考図書
- 初めてのPHP、MySQL、JavaScript&CSS - 著Robin Nixon
- AWSではじめるLinux入門ガイド - 著トレノケート株式会社山下光洋
- パーフェクトPHP - 著小川雄大/柄沢聡太郎/橋口誠
- CSSグリッドで作るHTML5&CSS3レッスンブック - 著エビスコム
- UIデザイナーのためのSketch入門&実践ガイド - 著吉竹遼
- いちばんよくわかるWebデザインの基本きちんと入門 - 著伊藤庄平
- centOS7で作るネットワークサーバ構築ガイド - 著サーバ構築研究会
- 標準テキストcentOS7構築・運用・管理パーフェクトガイド - 著有限会社ナレッジデザイン大竹龍史/市来秀男/山本道子/山崎佳子
参考文献
Linuxについて
Apacheについて
MySQLについて
PHPについて
EC2について
AWS(EC2)を立ち上げてPHPを動かす話 - Qiita
セキュリティについて
HTTPS化について
最後に
大勢の方のブログや文献や書籍を読ませていただくことで作成する事ができました。
ありがとうございました。