皆さん、こんにちは。

今日は今まで習ってきたウェブサイトのデプロイの仕方をちょっと工夫してみます。

特に、ドメインはいらないけど、複数のポートを開けておいて、各ポートに応じたウェブサイトがユーザーに届けられるようにしたい！という時を想定しています。

下記に、例を挙げます。

  • 社内のアプリケーションで、複数のアプリケーションを同じサーバーからデプロイしたい。
  • プログラムのポートフォリオを同じサーバーにまとめておきたい。

しかし覚えておきたいのはIPアドレスでユーザーがアクセスできるという事は、HTTPSにできない。つまり、ユーザーとやり取りするデーターが暗号化できないので個人情報のあるフォーム等を使う事は絶対に避けましょう。

もし、ドメインを購入して、ドメインごとに対応したウェブサイトを同じサーバーからデプロイすることもできるので、その場合は別の記事を参考にしてください。

今日の目的

Ubuntuサーバーから２つのサイトをデプロイさせる。ユーザーはIPアドレスとポートを見てそれぞれのサイトにアクセスできるようにする。

今日の環境

  • Ubuntu 22.04

下準備

では、下記の記事にnginxのセットアップの仕方が記載されているので、まずはそちらを見てください。

Nginxをインストールする方法

この記事の通りに進めてIPアドレスでNginxのデフォルトのページが見れるところまで進めてください。

サーバーブロックの設定

ここも前回の記事を参考に一つ目のサイトとなるファイルを作成していきます。

詳しい説明は前回の記事を参考にしてください。

各ウェブアプリケーション事でサイトを作成します。まずは一つ目のサイトをasameshisoft.comと名前を付けてそのフォルダーを作成します。

（今回はドメインは購入しないのでIPアドレスで参照します。）

sudo mkdir -p /var/www/asameshisoft.com/html

sudo chown -R $USER:$USER /var/www/asameshisoft.com/html
sudo chmod -R 755 /var/www/asameshisoft.com

ランディングページを作りましょう。

今回はテストだけなので適当にテキストを書いておきます。

nano /var/www/asameshisoft.com/html/index.html
<html>
    <head>
        <title>AsameshiSoft</title>
    </head>
    <body>
        <h1>Testing Nginx</h1>
    </body>
</html>

nginx

sudo nano /etc/nginx/sites-available/asameshisoft.com
server {
        listen 80;
        listen [::]:80;

        root /var/www/asameshisoft.com/html;
        index index.html index.htm index.nginx-debian.html ;

        server_name 172.105.218.191;

        location / {
                try_files $uri $uri/ =404;
        }
}

Nginxの指定したsites-enabledディレクトリにリンクさせます。

sudo ln -s /etc/nginx/sites-available/asameshisoft.com /etc/nginx/sites-enabled/

nginxのテストをします。sucessと出れば成功です。

sudo nginx -t

Nginxのサービスをリスタートします。

sudo systemctl restart nginx

これでポート80をリッスンするサイトが完成しました。

２つ目のサイトのポートを開ける

今回はポート８０と８１を使ってサイトを公開します。ポート８１はまだ何もしていないのでこれから設定していきましょう。

sudo ufw allow 81/tcp

２つ目のサイトを設定

先ほどと同じことを繰り返します。

ポートを81にして、サイト名（ただの名称）をasameshiapp.comにした場合です。

sudo mkdir -p /var/www/asameshiapp.com/html
sudo chown -R $USER:$USER /var/www/asameshiapp.com/html
sudo chmod -R 755 /var/www/asameshiapp.com
nano /var/www/asameshiapp.com/html/index.html
<html>
    <head>
        <title>AsameshiApp</title>
    </head>
    <body>
        <h1>Welcome to asameshi app</h1>
    </body>
</html>
sudo nano /etc/nginx/sites-available/asameshiapp.com
server {
        listen 81;
        listen [::]:81;

        root /var/www/asameshiapp.com/html;
        index index.html index.htm index.nginx-debian.html;

        server_name 172.105.218.191;

        location / {
                try_files $uri $uri/ =404;
        }
}
sudo ln -s /etc/nginx/sites-available/asameshiapp.com /etc/nginx/sites-enabled/
sudo nano /etc/nginx/nginx.conf





では２つのブラウザをオープンしてサーバーのIPとポートを指定してエンターします。





  • 172.105.218.191:80
  • 172.105.218.191:81





皆さんも自分のサーバーのIPで同じことを行い、それぞれのHTMLが返ってきたら成功です！















ではお疲れさまでした。