初めまして！
こんにちは！開発ユニットの伊藤と申します。
今年の4月にIT未経験の新卒として入社し、今回が初めての技術勉強会です。
IT未経験ということもあり、雪崩のようになだれ込んでくる知識と戦う日々です。
そんな日々を過ごしていく中で、今の自分に何が足りないのだろうか…と考えてみました。
見えてきた課題は
今年の4月にIT未経験の新卒として入社し、今回が初めての技術勉強会です。
IT未経験ということもあり、雪崩のようになだれ込んでくる知識と戦う日々です。
そんな日々を過ごしていく中で、今の自分に何が足りないのだろうか…と考えてみました。
見えてきた課題は
「なぜ・どうやってインターパークのサービスをみんなが利用できているのか、よく知らない！」
でした。
なので、この技術勉強会を通して勉強してみよう！といった経緯で、軽くて簡単な静的サイトを作って公開することに挑戦してみました。
何か目標になるサイトがあればいいなと思い、「軽い」で有名な阿●寛のホームページを元にインターパークverのサイトを作りました。
目新しい技術は出てきませんので、子供の自由研究を見るくらいの気持ちで読んでいただけると幸いです（保身）。
また、私と同じようにまったくの未経験でIT業界のエンジニアという職種を選んだ新卒の方などがいつかこの記事を見つけてくれて、理解のきっかけの一つになってくれたら嬉しいです。
では本題です！
なので、この技術勉強会を通して勉強してみよう！といった経緯で、軽くて簡単な静的サイトを作って公開することに挑戦してみました。
何か目標になるサイトがあればいいなと思い、「軽い」で有名な阿●寛のホームページを元にインターパークverのサイトを作りました。
目新しい技術は出てきませんので、子供の自由研究を見るくらいの気持ちで読んでいただけると幸いです（保身）。
また、私と同じようにまったくの未経験でIT業界のエンジニアという職種を選んだ新卒の方などがいつかこの記事を見つけてくれて、理解のきっかけの一つになってくれたら嬉しいです。
では本題です！
第1章 まずはHTML・CSSでサイトを書いてみよう！
まずは公開したいサイトをHTMLとCSSで書いてみます。
コンセプトとしては軽くて簡単な静的サイトを作りたい、だったのでかの有名な「阿部寛のホームページ」のインターパークverを作ることを目標にします。
現時点で必要な最低限のフォルダ構成は以下の通りです↓
コンセプトとしては軽くて簡単な静的サイトを作りたい、だったのでかの有名な「阿部寛のホームページ」のインターパークverを作ることを目標にします。
現時点で必要な最低限のフォルダ構成は以下の通りです↓
ただ書くだけならこれだけ十分なんですね～
ここからAIにあれこれ指示を出して作成したページがこちらです！↓
ここからAIにあれこれ指示を出して作成したページがこちらです！↓
…いかにも平成味を感じるページが完成しました。
プロンプトを工夫しながらAIを使っていけば、初心者でも2，3時間でここまで作れちゃうんですね。
このAI時代にIT業界に入ってよかったと心底思いました。
次はこのサイトをローカルで表示できるようにします。
プロンプトを工夫しながらAIを使っていけば、初心者でも2，3時間でここまで作れちゃうんですね。
このAI時代にIT業界に入ってよかったと心底思いました。
次はこのサイトをローカルで表示できるようにします。
第2章 ローカルで表示する
今表示できているのは、自分のPCの中にある生身のファイルです。
ただ、最終的には自分以外の人間にも見てもらいたいのですが、全世界の人間に自分のPCにアクセスしてもらうわけにはいかないので、「サーバー」という大きなPCにこのファイルを置く準備をします。
しかし、いきなり本番のサーバーに…というのはなかなか難しいので、まずは手元（＝ローカル）で仮想のサーバーを立ててみます。
ただ、最終的には自分以外の人間にも見てもらいたいのですが、全世界の人間に自分のPCにアクセスしてもらうわけにはいかないので、「サーバー」という大きなPCにこのファイルを置く準備をします。
しかし、いきなり本番のサーバーに…というのはなかなか難しいので、まずは手元（＝ローカル）で仮想のサーバーを立ててみます。
この仮想サーバーを立てるのに最適なのが「Docker」というサービスです。Dockerでは仮想サーバーのことを「コンテナ」と呼びます。
ということで、まずはコンテナを立てるところからスタートです。
コンテナを簡単に起動・管理するために、.yaml（ヤムル）ファイルを作成します。
このファイルを作成することで、docker compose up -d」とコマンドを打つだけでコンテナが作成・起動されます。
イメージは「開けゴマ！」で洞窟の扉が開くように準備している感じですね。
ということで、まずはコンテナを立てるところからスタートです。
コンテナを簡単に起動・管理するために、.yaml（ヤムル）ファイルを作成します。
このファイルを作成することで、docker compose up -d」とコマンドを打つだけでコンテナが作成・起動されます。
イメージは「開けゴマ！」で洞窟の扉が開くように準備している感じですね。
こんな感じでyamlファイルを書いてみて、「docekr compose up -d」と唱えてあげると…
ローカルで表示できた！
今、状態としては自分のPCの中で完結していたものが、少し手から離れて仮想サーバー上にあるサイトを見ている形になります。
ただ、今の状態ではセキュリティやキャッシュなどなど…細かな設定ができないため、いろいろ準備しなくてはいけません。
次は、その細かな設定を行っていきます。
ただ、今の状態ではセキュリティやキャッシュなどなど…細かな設定ができないため、いろいろ準備しなくてはいけません。
次は、その細かな設定を行っていきます。
第3章 Apache
Webサーバーとは、ブラウザのリクエストを受け、それに応じたファイルを返したり、Webページの公開・制御に関わる設定をしたりするソフトのことです。
htmlファイルはただのファイルなので、自分で勝手にブラウザに表示されたりはしません。ブラウザとhtmlファイルの間に仲介役が必要です。その仲介役がWebサーバー、ということです。
今回は、実務の勉強も兼ねてApacheというWebサーバーを使ってみます。
以下のファイルを作ることでApacheの設定をカスタマイズできます。
htmlファイルはただのファイルなので、自分で勝手にブラウザに表示されたりはしません。ブラウザとhtmlファイルの間に仲介役が必要です。その仲介役がWebサーバー、ということです。
今回は、実務の勉強も兼ねてApacheというWebサーバーを使ってみます。
以下のファイルを作ることでApacheの設定をカスタマイズできます。
①httpd.conf
Apache全体の設定を行うファイルです。
今回は以下のような設定を行いました↓
・公式イメージ（＝コンテナの設計図）の設定を土台にして設定を追加
・サーバーの情報を外から見えないように隠す
・見えていいディレクトリを指定、見えちゃいけないファイルをブロック
・ブラウザに対してセキュリティのルールを渡す
今回は以下のような設定を行いました↓
・公式イメージ（＝コンテナの設計図）の設定を土台にして設定を追加
・サーバーの情報を外から見えないように隠す
・見えていいディレクトリを指定、見えちゃいけないファイルをブロック
・ブラウザに対してセキュリティのルールを渡す
②vhosts.conf
サイトごと（ドメインごと）の設定を行うファイルです。複数のサイトを一つのコンテナで表示させたい時はこのファイルを作成します。
そのコンテナ内にあるサイトが単一の場合、httpd.confに設定を書けば良いので不要です。
今回サイトは一つしかありませんが、同一コンテナに複数のサイトの設定を書くことはよくあるので、実務を意識してvhosts.confを書きました。
そのコンテナ内にあるサイトが単一の場合、httpd.confに設定を書けば良いので不要です。
今回サイトは一つしかありませんが、同一コンテナに複数のサイトの設定を書くことはよくあるので、実務を意識してvhosts.confを書きました。
③Dockerfile
カスタムした①、②のファイルをイメージに組み込むのに必要なファイルです。
ApacheのようなWebサーバーだけではなく、必要なツールやライブラリのインストール、ポート公開（どの窓からサイトが見れるかどうか）の設定などができます。
このDockerfileがあることで、どんなPCでもDockerがインストールされていれば、同じ環境を再現できる、という優れモノです。
ApacheのようなWebサーバーだけではなく、必要なツールやライブラリのインストール、ポート公開（どの窓からサイトが見れるかどうか）の設定などができます。
このDockerfileがあることで、どんなPCでもDockerがインストールされていれば、同じ環境を再現できる、という優れモノです。
見た目の変化はありませんが、裏ではいろいろと設定が必要なんですね。
第4章 AWSでDockerコンテナを起動する
次はAWSのサーバーにさっき作ったコンテナを作成します。
※作成したファイルを直置きするのがベターですが、ひとまずサイトを作ってみよう！というスモールステップで始めたことと、あれこれいろいろ設定するのに難易度が高そう…ということで断念いたしました。
AWSのEC2という、簡単にサーバーを借りることができるサービスを使用します。
サーバーを立てるには以下のような設定が必要です。
※作成したファイルを直置きするのがベターですが、ひとまずサイトを作ってみよう！というスモールステップで始めたことと、あれこれいろいろ設定するのに難易度が高そう…ということで断念いたしました。
AWSのEC2という、簡単にサーバーを借りることができるサービスを使用します。
サーバーを立てるには以下のような設定が必要です。
OSの選択
スマホで言うと、iOSかAndroidかを選ぶようなイメージ。今回は Docker を使うため、Linux環境で最も一般的な Amazon Linux 2023 を選択。
インスタンスタイプ
サーバーの性能（CPUやメモリのスペック）を選ぶ。性能が高いほど料金も高くなるので、サービスに見合ったものを選ぶ必要がある。今回は軽量なサイト・研修用なのでt3.microを選択。
キーペア
サーバーにSSH接続（リモートで操作）するための鍵を作ったり指定したりできる。サーバーを家に例えると合鍵のようなもの。
ネットワーク設定
EC2サーバーという家をVPC（仮想ネットワーク）という街の中に配置し、住所（IPアドレス）や門番（セキュリティグループ）などを設定する場所。
ストレージ設定
サーバーのハードディスクの容量を選択する。サーバーがどれくらいの情報量を持てるようにするのかを決める。
上記の設定をし、インスタンスを起動します。
しかし、デフォルトではEC2 の初期状態は最低限のOSだけで、Dockerやdocker composeは入っていません。
そのため、Webサーバーを動かすために必要なツールをインストールします。
ローカルでやったように、サーバー内でコンテナを起動すると…
しかし、デフォルトではEC2 の初期状態は最低限のOSだけで、Dockerやdocker composeは入っていません。
そのため、Webサーバーを動かすために必要なツールをインストールします。
ローカルでやったように、サーバー内でコンテナを起動すると…
表示できた！
これで外部からアクセスができるようになりました！
ここまで来たので採点してもらおう
PageSpeed Insightsという、Google が提供しているWebサイトの速度と品質を測るツールを使って、自分が作ったサイトを採点してもらいます。
サイトをURL入力すると、以下をチェックして点数・改善ポイントを出してくれます。
・読み込み速度
・画面の動きの安定性
・操作できるようになるまでの速さ
・画像・コードの最適化度合い
採点してみると…
サイトをURL入力すると、以下をチェックして点数・改善ポイントを出してくれます。
・読み込み速度
・画面の動きの安定性
・操作できるようになるまでの速さ
・画像・コードの最適化度合い
採点してみると…
いろいろと問題がありそうですね…
一つずつ解決していき、100点満点のお手本のような静的サイトを目指していきます。
一つずつ解決していき、100点満点のお手本のような静的サイトを目指していきます。
第5章 いろいろ工夫してみる
WebサーバーをNginxにする
これまでずっと実務勉強のためにApacheを使用していましたが、実はもっと静的サイトに適したWebサーバーがあります。
それが「Nginx（エンジックス）」です。
以下の理由で静的サイトに向いたWebサーバーと言えます。
・高負荷時の同時接続処理能力が高い
・静的ファイル（HTML・CSS・画像）の配信が爆速
・メモリ消費が非常に少ない
などなど…
そのため、WebサーバーソフトをNginxに変更した同じサイトを作り、完璧な静的サイトを作成します。
それが「Nginx（エンジックス）」です。
以下の理由で静的サイトに向いたWebサーバーと言えます。
・高負荷時の同時接続処理能力が高い
・静的ファイル（HTML・CSS・画像）の配信が爆速
・メモリ消費が非常に少ない
などなど…
そのため、WebサーバーソフトをNginxに変更した同じサイトを作り、完璧な静的サイトを作成します。
Nginxの設定を書く
Nginxを使うために必要なファイルは以下の通りです↓
・nginx.conf
・Dockerfile
Apacheと比べて一つ減りましたね。DockerfileはWebサーバーの設定に必要なので、Apacheに限らず必要です。
nginx.confの構造としては以下の通りです。
・nginx.conf
・Dockerfile
Apacheと比べて一つ減りましたね。DockerfileはWebサーバーの設定に必要なので、Apacheに限らず必要です。
nginx.confの構造としては以下の通りです。
このファイルを書くことでNginxを使用したサイトを作成することができました。
HTTPS通信の対応
これまではずっと通信が暗号化されていないHTTP方式でサイトを表示していましたが、現代ではセキュリティと信頼性のために暗号化されたHTTPS方式が主流です。
100点満点のサイトにするには必須の対応なので挑戦します。
HTTPS通信に対応するには「本物であること」と「通信が暗号化されていること」を証明する「SSL証明書」を取得する必要があります。
今回はCertbotというツールと、Let’s Encryptという無料で証明書を発行してくれるサイトを使用しました。
100点満点のサイトにするには必須の対応なので挑戦します。
HTTPS通信に対応するには「本物であること」と「通信が暗号化されていること」を証明する「SSL証明書」を取得する必要があります。
今回はCertbotというツールと、Let’s Encryptという無料で証明書を発行してくれるサイトを使用しました。
1．ドメインの取得
HTTPS通信に対応するにはドメインが必要です。今回は「お名前.com」というサービスで無料で取得しました。
DNSレコード設定でドメインがサーバーに向くよう設定を追加します。
DNSレコード設定でドメインがサーバーに向くよう設定を追加します。
ドメイン名で接続できるようになったので、一気に本物のサイト感が出ましたね。
2．証明書の発行
Certbotとは、Let’s Encryptから自動で証明書の発行、更新、ファイル保存を行ってくれる便利なツールです。
「ACMEチャレンジ」を行うことで証明書を発行してくれます。
流れは以下の通りです。
「ACMEチャレンジ」を行うことで証明書を発行してくれます。
流れは以下の通りです。
証明書を発行してもらったら、Certbotが所定の場所に自動で保存してくれます。
あとはこの証明書を使えるようにNginxの設定をするだけです。
あとはこの証明書を使えるようにNginxの設定をするだけです。
3．Nginxの設定を調整
以下のように設定します。
・443番ポート（HTTPS通信用の窓）を解放
・証明書と秘密鍵があるディレクトリ・フォルダを指定
・安全な暗号方式のみ使うことを明記
・443番ポート（HTTPS通信用の窓）を解放
・証明書と秘密鍵があるディレクトリ・フォルダを指定
・安全な暗号方式のみ使うことを明記
細かな調整
ほかにもいくつか警告が出ていたので、警告が出ないよう調整しました。
画像に width / height を付けてレイアウトシフトを改善
表示速度の指標であるLCPや、画面がガタつくレイアウトシフトの警告を消すため、すべての ![]()
タグに元の画像サイズをwidthとheightで指定。
CSS の読み込み最適化
ブラウザが HTML 読み込みと同時に CSS を読み込めるよう設定を追加。これにより表示速度が改善する。
キャッシュ設定
2回目以降のアクセスを爆速にするため、静的ファイル（CSS、JS、画像など）をブラウザ側に一定期間保存しておくキャッシュ設定を追加
gzip（圧縮）設定
最初に読み込むデータ量を減らすため、HTMLやCSSをgzip形式で圧縮して送信する設定を追加
HTTPSのバージョンを http2 に変更
HTTPS通信の効率を高めるため、プロトコルを HTTP/1.1 から HTTP/2 にアップグレード
以上の設定を完了すると…
以上の設定を完了すると…
点数が大幅に上がりました！
すべてステータスが緑色になりました！
気持ちがいいですね。
気持ちがいいですね。
さいごに
初めて自分でサイトを作ってみて苦労したところもありましたが、全体通して結構気軽に作れたな、というのが本音です。
ただ、これをAIの手助けなしにやれ、と言われるとできる気がしません…。改めてAIがある時代にエンジニアを目指してよかったと思いました。
自分で何か作ってみる、という経験は今後の業務上で役立つと思うので、これからも一人前のエンジニアを目指して精進していきたいです。
また、次はもっとレベルを上げて、自分や会社に何か役に立つ生産的なものを作ってみたいです。
ただ、これをAIの手助けなしにやれ、と言われるとできる気がしません…。改めてAIがある時代にエンジニアを目指してよかったと思いました。
自分で何か作ってみる、という経験は今後の業務上で役立つと思うので、これからも一人前のエンジニアを目指して精進していきたいです。
また、次はもっとレベルを上げて、自分や会社に何か役に立つ生産的なものを作ってみたいです。