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を参照したりなどもできるので、興味のある方は調べてみると良いかもです。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です