個人学習プロジェクト 「Security Learning Lab（SLL）」 の学習記録です。
今回は、Nginxで独自のHTMLファイルを表示させる実践と、Nginxの設定ファイル(nginx.conf)を読み解いた内容についてまとめます。
学習時間
約1時間
今日やったこと
- nanoエディタでHTMLファイルを直接編集する練習
- 日本語部分が文字化けするトラブルに遭遇し、原因を調査・解決
- heredoc(
cat > ファイル << 'EOF')を使った確実なファイル書き込み方法を実践 <meta charset="UTF-8">を追加して文字化けを解消- Nginxの設定ファイル(nginx.conf、配置場所はetcディレクトリ配下のnginxフォルダ)の中身をcatコマンドで確認
学習内容
nanoエディタの基本操作
sudo nano ファイル名でファイルを直接編集できる。保存はCtrl+O→Enter、終了はCtrl+X(Macのcommandキーではなくcontrolキーを使う点に注意)。
文字化けの原因と対処
ブラウザは、HTMLに文字コードの宣言(<meta charset="UTF-8">)がないと文字コードを推測して表示しようとするため、宣言漏れがあると文字化けが起きる。<head>内にこの1行を入れることで解消できる。
heredocによる安全なファイル書き込み
日本語などの複数バイト文字は、ターミナルへの貼り付け方によって文字化けすることがある。cat > ファイル名 << 'EOF' 〜 EOFという書き方(heredoc)でファイルをまるごと書き込むと、文字化けを避けやすい。
nginx.confの構造
listen 80;:80番ポート(HTTP)で待ち受ける設定server_name _;:どんなドメイン名・IPアドレスでアクセスされても応答する、ワイルドカード的な指定root /usr/share/nginx/html;:Webサイトのファイルが置かれている場所の指定。この場所にあるindex.htmlが自動的に表示される仕組み- ファイル末尾に、HTTPS(443番ポート)用の設定が
#でコメントアウトされた状態で用意されている(まだ無効)
困ったこと・つまずいたこと
日本語部分の文字化け
- 何に困ったか:nanoでHTMLを編集し保存したところ、日本語部分だけ文字化けして表示された
- どう解決したか:heredocで書き直しても文字化けが続いたため、原因を調べたところ
<meta charset="UTF-8">の宣言漏れだと判明。追加したところ解消した
nano保存時にファイルパスを誤って消してしまった
- 何に困ったか:保存時の「File Name to Write」画面で、表示されていたパスを誤って消してしまった
- どう解決したか:正しいパス(
/usr/share/nginx/html/index.html)を入力し直すことで解決した
今日の学び・気づき
- 文字化けの原因が「サーバー側の問題」ではなく「ブラウザの文字コード解釈」にあると分かり、見た目のトラブルでも原因の切り分け方によって全く違う場所を疑う必要があると実感した
- nginx.confの
rootの場所を実際に確認したことで、「なぜindex.htmlを書き換えるとブラウザの表示が変わるのか」という仕組みが、単なる暗記ではなく理屈として理解できた - HTTPS用の設定がすでに用意された状態でコメントアウトされていることを知り、次のステップ(HTTPS化)が具体的にイメージできるようになった
今日の達成
Nginx設定ファイル読解
独自HTMLの表示とNginxの設定ファイル(nginx.conf)の構造を理解し、Webサーバーの仕組みを一段深く把握した。
次回やること
- Phase2の続き(独自ドメインの紐付け、HTTPS化)
今日のひとこと
ファイルパスを誤って消したときは焦った。command＋zで取り消しもできないし、どうしたものかと慌ててしまった。Claudeに相談したら、すぐに正しいパスを教えてもらったので事なきを得る。普段使っているCUIと違って、コマンドだと勝手が違うのでもっと慣れていきたいと思う今日この頃です。
