Imshoo

独学で勉強しているプログラミングのメモ

nginxでSPAのサイトを公開する

ubuntu server:20.04

初めてnginxを使うのでメモ。
今回は設定ファイルの記述に関しては細かいことは書かずあとで調べて別の記事にしたい...

ということでまずはnginxをインストールする

  sudo apt install nginx

versionの確認

  nginx -v

インストールした時点でデフォルトで設定されているページを見れるはずなので確認してみるといいかも。

自作サイトの公開

まずは公開するサイトを配置するディレクトリを作成する。今回は適当にmyspaというディレクトリを作成してみる。
nginxのデフォルトページが/var/wwwというディレクトリにあるのでここに作成するのがいいかも?

  mkdir /var/www/myspa

次に自作サイト用のnginx設定ファイルを/etc/nginx/sites-availableの中に〇〇.confという名前で作成して設定を書く。

  vim /etc/nginx/sites-available/myspa.conf

  // 内容はこんな感じにしてみた
  server {
    listen 80;
    server_name [server ip];
    charset utf-8;
    access_log /var/log/nginx/myspa.log;
    error_log /var/log/nginx/myspa_error.log;

    root /home/var/www/myspa; // 公開したいサイトが配置されているディレクトリを指定
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

そして/etc/nginx/sites-enabledに先程作成した設定ファイルのシンボリックリンクを作りnginxをリロードする

   ln -s /etc/nginx/sites-available/myspa.conf /etc/nginx/sites-enabled/myspa.conf

   systemctl reload nginx

これで自作サイトを見れるようになる。
設定ファイルのsyntaxチェックもできるので活用してみるといいかも

   nginx -t

公開するのをやめたい場合はシンボリックリンクを削除するだけでいい。

   unlink /etc/nginx/sites-enabled/myspa.conf

/etc/nginx/nginx.confのhttp内に記述されている include /etc/nginx/sites-enabled/;という設定で/etc/nginx/sites-enabled内の設定を読み込み、その設定に基づいて公開しているみたいで複数のサイトを公開することもできるらしい。
/etc/nginx/nginx.confのinclude /etc/nginx/sites-enabled/
;が書いてあるかは確認した方がいいかもしれない。

APIサーバー

nginx側では何もしなくてよく、apiサーバーがlistenしてるportにリクエストしたらちゃんとデータが返ってくる。

が、実際にnginxで何も設定せずにサーバーを起動し(port:8080)一日経過後にアクセスログを見てみたらPHP脆弱性を狙った攻撃がたくさんきてて怖くなった。

おそらくportを変えれば攻撃はなくなりそうだし、そもそもPHPじゃないので大丈夫だとは思うけど、必要以上にportをあけて運用する必要もないかと思いnginxのリバースプロキシの設定を加えた。

リバースプロキシにしたところでセキュリティには関係ないかもしれないけど気分的に怖いので...

サイト公開時に設定したmyspa.confにリバースプロキシ用のlocationを追加することでできる。

location /spa/ {
    proxy_pass http://127.0.0.1:8080;
}

上の設定なら80番portにspaから始まるパスでアクセスしてきたときにローカルホストの8080番にリクエストを送るようになる。

設定はこれだけでいいが、もしもAPIサーバー側でアクセスログを取っていた場合、アクセス元のIPがローカルホストになってしまう。
元のIPが知りたい場合はnginxにhttpのヘッダーへx-forwarded-forを追加してもらう必要がある。

location /spa/ {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; <-この部分を追加
    proxy_pass http://127.0.0.1:8080;
}

ちなみにx-forwarded-forとはリバースプロキシなどを使う際に元のIPが何だったのかをセットする部分らしく

X-Forwarded-For: client1, proxy1, proxy2

というようにサーバーを通過するごとに追記していくみたいだ。
ただし好き勝手にこのフィールドをいじれるので信頼できるかどうかはネットワークの構成によるっぽい。 今回は問題ないはず。

セキュリティ

  • /etc/nginx/nginx.confのhttpディレクティブにserver_tokens off;を追加。

  • nginxのデフォルトページとして/var/www/html/〇〇.htmlというのがあるはずなので内容を適当なものに変更

server_tokensやデフォルトページでnginxのversionが推測でき、攻撃者に情報を与えてしまうことになるので必ずやっておくべき

終わり

サイトを公開する最低限の設定はこれでいいはず。
もしもほかにあれば追加したいと思う。