Nginxを使ってローカルで手っ取り早くサイトを立ち上げる手順

前回に続いて、実際にNginxを使ってローカル環境でサイトを立ち上げて見ましょう。

作業環境

OS Ubuntu 18.04.3 LTS
nginx -v 1.14.0 (Ubuntu)

ローカルでサイトを立ち上げるために

サイトを立ち上げるのに必要なものはざっくり

  • ドメイン
  • サーバ

です。

サーバはお手持ちのパソコンです。

ドメインはIPアドレスのあだ名で外部に公開するためにはドメインを購入しなければ行けないのですが、ローカル環境で確認したい場合ならそれは不要です。

/etc/hostsファイルに記述するだけで好きなドメインのサイトを立ち上がることができます。

/etc/hostsとは

/etc/hostsファイルとは、ブラウザがサイトを開くときに、一番最初にドメインに紐づくIPアドレスを返却するファイルです。

このようにドメインに紐づくIPアドレスを返却するサービスをDNS(Domain Name System)サービスと言います。

DNSサーバは実は自分のPCにも立ち上がっており、最初にアクセスする場所でもあります。

実際ファイルの中身をみてみますと。

て書かれていると思います。

今までローカルでWebサービスを立ち上げて”localhost”って打つとサイトが閲覧できるのは/etc/hostsファイルが「localhostのIPアドレスはウチやん(127.0.0.1)」って教えてくれるからです。

 

適当なドメインを書き込んでみる

/etc/hostsに設定を書き込めばローカル環境で好きなドメインで立ち上げたサイトを見れるので実際に記述してみます。

今回追加したドメインはsample-site.comです。これを後ほどNginxで表示できるようにします。

 

Nginxの設定ファイルを作成する

nginxの設定ファイルを実際開いてみましょう。大体の環境ではファイルパスは”/etc/nginx/nginx.conf”になっていると思います。

“include /etc/nginx/sites-enabled/*;”によって/etc/nginx/sites-enabledディレクトリ配下のファイルも読み込まれるようになってます。

nginxでは独自の設定ファイルを置くディレクトリとして/etc/nginx/sites-availableディレクトリと/etc/nginx/sites-enabledディレクトリが用意されています。

それぞれの役割は

sites-available 独自設定ファイルの実態を置くディレクトリ
sites-enabled Nginxが読み取るsites-availableのファイルのリンクを配置するディレクトリ

となってます。

独自設定の追加の手順は

  1. sites-availableにファイルを追加
  2. sites-enabledに追加したファイルのリンクを追加
  3. rootディレクティブで指定した場所にソースファイルを記述し、Nginxが実行できるように権限を与える
  4. Nginxを再起動

でおこないます。

sites-availableにファイルを追加

では実際にファイルを編集します。

 

1.sites-availableディレクトリに移動

2.ファイルを追加して編集

設定ファイルの中身

includeをしているコンテキストがhttpなので、serverディレクティブを一番外に記述できます。(ディレクティブとコンテキストの関係はこちらを確認 => https://shiro-secret-base.com/?p=436)

それぞれのディレクティブの意味はコメントの通りです。

 

sites-enabledに追加したファイルのリンクを追加

リンクとは内容が同期される自身の分身です。通常ファイルのコピーを作るときはcpコマンドを使いますが、これだとコピー元が変更されても内容をコピー先に反映されないので、

毎度このコマンドを実行しないといけません。そこで、コピー元の変更をコピー先に自動で反映されるリンクを作成します。

リンクの作成にはlnコマンドを使います。

次のようにsites-enabledにリンクを作成します。

lsコマンドで確認して”sample-site.conf -> /etc/nginx/sites-available/sample-site.conf”てなっていれば成功です。

rootディレクティブで指定した場所にソースファイルを記述し、Nginxが実行できるように権限を与える

rootディレクティブでは”/var/www/html/sample-site”と記述されていますが、まだディレクトリとHTMLファイルなどは設置されていないので、追加します。

HTMLの中身(てきとー

ファイルを作成したら、これをNginxが読み込めるように権限を与えます。

権限を与える時にはchownコマンドを使うのですが、細かい説明は省略します。こうやればNginxがHTMLファイルを読み込めるという解釈で大丈夫です。

Nginxを再起動する

Nginxの設定ファイルも追加して、表示するHTMLも用意できたのでNginxを再起動して設定を反映します。

ただ、もしかしたらNginxの設定ファイルに間違いがあるかもしれないので、それをチェックします。

特に問題がなかったら上のような結果になります。

それでは再起動します。

ブラウザで見てみましょう。今回はドメインは”sample-site.com”でポート番号は”8888″なので、ブラウザで”sample-site.com:8888“と入力するとアクセスできます。

閲覧できたら、完了です。

まとめ

  • /etc/hostsファイルはPCが一番最初にドメインに紐づくIPを探す場所、ここに”127.0.0.1    好きなドメイン”で追加したドメインでローカル環境のサイトを閲覧できる。
  • Nginxには独自設定ファイル管理するディレクトリとしてsites-available,sites-enableがあり、sites-availableで追加した設定をリンクでsites-enableに反映させる。
  • rootディレクティブで指定した場所にHTMLファイルなどを置いて、Nginxを再起動すれば設定が反映されローカルでサイトが閲覧できる。

以上です。

返信を残す

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