ダッシュで奪取

ゲーム、読書、人生

トップ > Tech > nginxでHTML表示できるところまで

nginxでHTML表示できるところまで

Tech Tech-nginx

前回 kyoruni.hatenablog.com

環境

やりたいこと

  • サーバーに配置した .html ファイルをブラウザで見たい

設定ファイルのパスを探す

  • --conf-path= のところにパスが出ている
  • /etc/nginx/nginx.conf のようだ
$ sudo nginx -V
nginx version: nginx/1.25.1
built by gcc 12.2.0 (Debian 12.2.0-14) 
built with OpenSSL 3.0.9 30 May 2023
# 省略
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf

設定ファイルの確認

  • /etc/nginx/nginx.conf 内で、/etc/nginx/conf.d/*.conf を読み込んでいた
  • 初期状態では /etc/nginx/conf.d/default.conf に80番ポート（ HTTP ）の設定が書いてあるようなので、そちらを確認する
/etc/nginx/conf.d/default.conf
  • location の root より、/usr/share/nginx/html が html のディレクトリであることが分かる
  • この中に .html ファイルを配置することで、ブラウザからアクセスできるようになる
server {
    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
# 以下省略

html ディレクトリの中身を確認

  • index.html がある
$ ls  /usr/share/nginx/html/
50x.html  index.html

index.html の確認

  • デフォルトで作成されていたファイル
/usr/share/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>


<p><em>Thank you for using nginx.</em></p>
</body>
</html>

VPS の IP アドレスを調べる

  • ~/.ssh/config に書いてある or コントロールパネルから確認できるのでそれを見てもよかったけど、面倒なのでこの場で調べる
$ curl ifconfig.io
xxx.xxx.xxx.xxx

index.html をブラウザで表示してみる

  • ブラウザで http://<自分のIPアドレス> にアクセスする
  • 表示された！ﾔｯﾀｰ

ページを追加してみる

  • /usr/share/nginx/html 内に、以下の内容で test.html を作成してから、ブラウザで http://<自分のIPアドレス>/test.html にアクセスする
    • ページは表示された！が、タイトルが文字化けしてしまった……。
      • 繝�せ繝� になっていた
      • 文字コードが設定されていないからのようだ
/usr/share/nginx/html/test.html 
<html>
  <head>
    <title>テスト</title>
  </head>
  <body>
    <p>hogehoge</p>
  </body>
</html>

文字コードを設定する

/etc/nginx/nginx.conf
http {
# 省略
    sendfile       on;
    #tcp_nopush    on;
+   charset        utf-8;

設定ファイルの再読み込み

  • 再読み込みしてから、もう一度 http://<自分のIPアドレス>/test.html にアクセスする → OK ﾔｯﾀｰ
    • ページをリロードしただけだと反映されなくてちょっと焦った
    • キャッシュが効いていたようで、Chrome の「ハード再読み込み」したら反映された

参考

おわりに

  • 大したことしていないんですけど、表示されるとめちゃくちゃうれしいですね