Nginx

Nginxのlocationディレクティブを使って画像を別のディレクトリで表示してみる。

どうも、シローです。

前回(https://shiro-secret-base.com/?p=449)はNginxでサイトを立ち上げることをやってみましたが、今回は画像を表示します。

ただ、「画像ファイルはプロジェクトとは別のディレクトリを使いたい!」

というケースにもNginxならlocationディレクティブを使って簡単にできますよってのをお伝えします。

locationディレクティブとは

locationディレクティブはアクセスするuriごとにログの場所や使うソースのディレクトリを指定したりするときに使われます。

また、server、locationコンテキスト内に記述できます。(ディレクティブとコンテキストについてはこちら  => https://shiro-secret-base.com/?p=436)

構文 location [ = | ~ | ~* | ^~ ] URI {...}
コンテキスト server, location
意味 マッチするURIごとに設定を指定する。

今回作るもの

今回作るページはこちらです。

この猫の画像を別のディレクトリから取ってきて表示します。

ディレクトリ構成

画像を置くディレクトリがないのに注目してください。

ソース一覧

index.html

style.css

 

Nginxに画像ファイルは別のディレクトリを使うように設定を加える

次にNginxの設定ファイルを見てみましょう。前回と同じく/etc/nginx/sites-available/sample-site.confを編集します。

12 ~ 14行目に注目してください。

locationディレクティブで定義している内容は「/image/から始まるURIのソースファイルは/var/wwwを使うよ」ってことになります。

画像ファイルを置くディレクトリを作成&権限を付与

次にNginxが参照するパスにディレクトリを作成します。

ここにNginxがアクセスできるように権限を与えます。

/var/www/imageのディレクトリは次のようになってます。(画像はなんでもいいです。

Nginxを再起動

最後にNginxを再起動すると設定完了です。

実際にブラウザを開いて、上の画像のようなページが表示されたら完了です。

まとめ

NginxのlocationディレクティブではアクセスしたURIごとに設定をすることが可能です。

今回はrootディレクティブを使って画像のパスをソースファイルとは別のディレクトリを参照するようにしました。

それ以外にも別のサイトのURLを参照したりなどもできるので、興味のある方は調べてみると良いかもです。

nginx実践入門
nginxを現場で活用するための知識を、実践的なノウハウを交えて解説した書籍です。
nginxのインストール方法や基本的な設定方法からはじめ、nginxを利用した「静的コンテンツ配信サーバ」「HTTPSサーバ」「Webアプリケーションサーバ」「大規模コンテンツ配信システム」の構築方法をそれぞれ詳しく紹介しています。後半ではnginxサーバのモニタリングやログの収集、そして軽量スクリプト言語Luaでnginxを拡張する方法について解説しているので、nginxをこれから使う方はもちろん、さらに活用したい方にもお勧めです。
  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

-Nginx
-

© 2021 Shiro's secret base