どうも、シローです。
前回(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ごとに設定を指定する。 |
今回作るもの
今回作るページはこちらです。
この猫の画像を別のディレクトリから取ってきて表示します。
ディレクトリ構成
1 2 3 4 |
sample-site ├── css │ └── style.css ├── index.html |
画像を置くディレクトリがないのに注目してください。
ソース一覧
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <meta charset="utf-8" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <div class="wrapper"> <h1>猫さん</h1> <img src="/image/sample.jpg" /> </div> </body> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.wrapper { position: absolute; background: #dcdcdc; width: 40%; top: 100px; left: 30%; text-align: center; } .wrapper img { display: block; width: 100%; height: auto; padding: 30px; box-sizing: border-box; } |
Nginxに画像ファイルは別のディレクトリを使うように設定を加える
次にNginxの設定ファイルを見てみましょう。前回と同じく/etc/nginx/sites-available/sample-site.confを編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
server { listen 8888; server_name sample-site.com; root /var/www/html/sample-site; access_log /var/log/nginx/sample-site/access_log; error_log /var/log/nginx/sample-site/error_log; location / { try_files $uri $uri/ =404; } location /image/ { # <= /image/から始まるURIはこのコンテキストが適用される root /var/www; # <= rootディレクトリを/var/www/を使う } } |
12 ~ 14行目に注目してください。
locationディレクティブで定義している内容は「/image/から始まるURIのソースファイルは/var/wwwを使うよ」ってことになります。
画像ファイルを置くディレクトリを作成&権限を付与
次にNginxが参照するパスにディレクトリを作成します。
1 |
$ sudo mkdir /var/www/image |
ここにNginxがアクセスできるように権限を与えます。
1 |
$ sudo chown -R www-data:www-data /var/www/image |
/var/www/imageのディレクトリは次のようになってます。(画像はなんでもいいです。
1 2 |
/var/www/image/ └── sample.jpg |
Nginxを再起動
最後にNginxを再起動すると設定完了です。
1 |
$ sudo service nginx restart |
実際にブラウザを開いて、上の画像のようなページが表示されたら完了です。
まとめ
NginxのlocationディレクティブではアクセスしたURIごとに設定をすることが可能です。
今回はrootディレクティブを使って画像のパスをソースファイルとは別のディレクトリを参照するようにしました。
それ以外にも別のサイトのURLを参照したりなどもできるので、興味のある方は調べてみると良いかもです。
nginxを現場で活用するための知識を、実践的なノウハウを交えて解説した書籍です。
nginxのインストール方法や基本的な設定方法からはじめ、nginxを利用した「静的コンテンツ配信サーバ」「HTTPSサーバ」「Webアプリケーションサーバ」「大規模コンテンツ配信システム」の構築方法をそれぞれ詳しく紹介しています。後半ではnginxサーバのモニタリングやログの収集、そして軽量スクリプト言語Luaでnginxを拡張する方法について解説しているので、nginxをこれから使う方はもちろん、さらに活用したい方にもお勧めです。