読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

初心者向け | Nginxと静的サイトジェネレーターでWebページを公開するデモ

f:id:mochizuki_p:20170424223250p:plain

Nginxでは静的サイトを高速に配信することが可能です。

今回は静的サイトを実際にデプロイするのに、今時HTMLを直接コーディングするというやり方ではなく、Go言語で作成されたHugoやRubyで作成されたJekyllのような静的サイトジェネレーターを利用して、ブログツールのように静的サイトを作成するのが、海外ではトレンドのようです。

ここで、静的サイトとは何かについて説明すると、PHPやRubyなどのプログラムで動的にコンテンツを作成して、クライアントサイドに配信を実行する動的サイトとは異なり、HTML, JS, CSSなどのデータを直接配信するだけのWebサイトです。

今回はGo言語の静的サイトジェネレーターのHugoで作成した静的サイトをNginxで配信する構成です。

スペック・バージョン
環境 Conoha VPS 512MB 20GB SSD
OS Ubuntu 16.04
Nginx 1.10.0
Go言語 1.6.2
Hugo 0.20.3

前提条件: iptablesで適切な設定が済んでいること

最初にGit, Nginx Go言語をaptでインストールします。 実は、Hugoもaptを利用できるのですが、バージョンが古いので別にインストールします。

sudo apt-get install git golang nginx -y  

次にNginxの設定ファイルを開きます。

cd  /etc/nginx/sites-available


VimやNanoなどのテキストエディタを利用して編集します。

sudo vi default

コメントアウトされている箇所を除いた初期設定は以下にようになっているはずです。 Nginxの設定ファイルの構造はとても簡単です。server{… }に囲まれた箇所に、設定をコンマ区切りで書き込んでいく形式です。実はこの上位にnginx.confがあり、defaultをインクルードする形になっているのですが、今回は説明を省きます。

最初のlistenは、サーバーがリクエストを待ち受けるポート番号を指定します。 ここでは80番、つまり、httpで待ち受ける設定になっています。もしSSLを利用する場合は443に変更した上で、暗号化の設定を別に行う必要があります。

次の root には配信を実行したいデータを配置したディレクトリを指定します。 /var/www/html を見てみましょう。

cd /var/www/html  && ls 

index.nginx-debian.html というファイルがあるようです。 これを見てみます。

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

次のindexはドメイン名でパスを指定せずにアクセスした場合に表示されるデータを指定するものです。スペースで区切ることで、複数指定することが可能で、

index.html index.htm index.nginx-debian.html

と先に指定した方が優先されて配信されます。

server_name に任意のドメイン名を指定することで、特定のhostと一致した場合にのみリクエストを受け付けることが可能です。例えば、

server_name example.com www.example.com;

と指定することで、ホストがexample.comwww.example.comの場合にのみリクエストを受け付けるようになります。

_(ワイルドカード)を指定することで全てのホストを受け付けることができます。

ここではワイルドカードが指定されています。

location は任意のパスに対しての設定全般を行うディレクティブです。

ここではtry_filesを指定し、ファイルとディレクトリへの直接アクセスを404にリダイレクトする設定になっています。

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }
}

次にhugoをダウンロードします。前に説明した通り、最新版を入手するため以下のサイトにアクセスします。

github.com

wget https://github.com/spf13/hugo/releases/download/v0.20.3/hugo_v0.20.3_Linux-64bit.deb
sudo dpkg -i hugo_v0.20.3_Linux-64bit.deb

最新版が展開されます。

Selecting previously unselected package hugo.
(Reading database ... 105327 files and directories currently installed.)
Preparing to unpack hugo_v0.20.3_Linux-64bit.deb ...
Unpacking hugo (0.20.3) ...
Setting up hugo (0.20.3) ...

Hugoのプロジェクトを展開するためのディレクトリを作成します。

mkdir /opt/hugo  

cd /opt/hugo    

新しいプロジェクトを展開するには hugo new site に続いてプロジェクト名を指定します。

ここでは test とします。

  

hugo new site test  

テーマをインストールします。テーマを配置するのは /theme ディレクトリです。 今回は以下のデモと同じようにします

www.utali.io

www.utali.io

設定が完了したら、HTMLやCSSなどのWebサイトを配置するディレクトリを作成します。

mkdir /var/www/test  

次にサイトをこのディレクトリに展開します。オプションの -d で展開先のディレクトリを指定

hugo -d /var/www/test  

次にNginxの設定に戻ります。

/etc/nginx/site-available/default  

を以下のように書き換えます。

もちろんVPSのパブリックIPにAレコードでドメインを割り当てておいて下さい。


server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name example.com www.example.com; # ここはあなたの好きなドメインに変更

        location / {

                root /var/www/test;
                try_files $uri $uri/ =404;
        }
}

ここで、nginxを起動します。

sudo nginx start

ここでVPSのIPアドレスにアクセスすると、このようにウェブサイトが綺麗に表示されるはずです。

f:id:mochizuki_p:20170425221643p:plain