Zenn
🖥️

next.jsで作った自宅サーバーを外部公開する方法 Ubuntu20.04, nginx

2023/05/25に公開
Next.js
webアプリ
自宅サーバー
tech

1. ルーターの設定

デフォルトで外部ネットワークから自宅サーバーに接続することはできません。なぜなら、セキュリティ的に良くないからです。ここで行う作業は、グローバルIPアドレス（外からアクセスするときのIPアドレス）とローカルIPアドレス（公開しようとしている自宅サーバーが使っている自宅LAN内でのIPアドレス）を繋げる作業です。この作業は、以下の2種類の実現方法があります。

  1. DMZ設定
  2. ポートフォワーディング設定

ここでは、ポートフォワーディング設定で進めていきます。こちらの方がポート番号ごとに設定できてセキュリティ対策がしやすいからです。

今回はWebサーバーと同時にssh接続も外部から行えるようにしたいので、この2つをポートフォワーディング設定で実現するために、以下のように設定します。また、ここではISPはNURO光、ルーターはHG8045Qという機種を使用しています。他の機種でもだいたい似たような設定画面になるので安心してください。

  1. http://192.168.1.1/にアクセスし、ログイン（デフォルトではアカウント名、パスワード共にadminになっていたりする。多少ルーターによるので調べてください）
  2. 「転送ルール」をクリック
  3. 「ポートマッピング設定」をクリック
  4. HTTP接続のための設定
  5. SSH接続のための設定（外部からssh接続しなくていい人はこの作業はスキップしてください）

HTTP接続のための設定は以下のようにできます。マッピング名は任意なので、自分が分かりやすい適当な名前にしてください。プロトコルにTCPを選ぶと自動的にポート番号のところに80を入力してくれるので便利です。

HTTP接続の設定

SSH接続の設定

2. nginxのインストール、設定

次にnginxが動くように設定していきます。

2.1 nginxのインストール

sudo apt update
sudo apt install -y nginx

インストールできたら、起動してみましょう。

sudo systemctl start nginx

何もエラーが起きなければ起動成功です。一応状態を確認してみます。

sudo systemctl status nginx

以下のような感じになっていればOKです。

Output
● nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Thu 2023-05-25 09:16:44 JST; 51min ago
       Docs: man:nginx(8)
    Process: 3533 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 3534 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 3535 (nginx)
      Tasks: 13 (limit: 57674)
     Memory: 12.2M
     CGroup: /system.slice/nginx.service
             ├─3535 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
             ├─3536 nginx: worker process
             ├─3537 nginx: worker process
             ├─3538 nginx: worker process
	     ...
             └─3547 nginx: worker process

 5月 25 09:16:44 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
 5月 25 09:16:44 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.

2.2 ファイアウォールの設定

次にファイアウォールの設定をしましょう。

sudo ufw app list

とすると、アプリケーションプロファイルの一覧が表示されます。

Output
Available applications:
  CUPS
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

今回はHTTP接続とSSH接続をしたいので、以下のように実行します。

sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'OpenSSH'

そして設定状態を確認します。

sudo ufw status

Output
Status: active

To                         Action      From
--                         ------      ----
Nginx HTTP                 ALLOW       Anywhere
80                         ALLOW       Anywhere
22                         ALLOW       Anywhere
80/tcp                     ALLOW       Anywhere

2.3 nginxの設定

nginxの設定では以下のステップがあります。

  1. /etc/nginx/sites-available/内に設定ファイルを追加
  2. nginxをrestart

まずは設定ファイルを作ります。デフォルトでは/etc/nginx/sites-available/内にdefaultというファイルがあるかと思いますが、それは削除してしまって新しいファイルを作ります。ファイル名は何でも良いです。ここではmywebsiteとでもしましょう。

cd /etc/nginx/sites-available
sudo rm default
sudo vi mywebsite  # nanoなど好きなエディタを使ってください

mywebsiteには以下のように書きます。

server {
    listen 80;
    server_name _;
    client_max_body_size 200M;
		location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

これを保存したら、以下のコマンドを実行します。

sudo nginx -t
sudo nginx -s reload
sudo systemctl restart nginx

3. next.jsのセット

3.1 yarnのインストール

いきなり

sudo apt install yarn

を実行すると、古いyarnがインストールされてしまうためかうまく実行できないことがあるので、以下のコマンドで実行します。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install -y yarn

インストールできたか確認します。

yarn -V

以下のような出力が出ればOKです。

Output
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.03s.

3.2 next.jsのインストール

念のため最新の情報を公式サイトを見ておきましょう。
next.js公式サイト

next.jsを置きたい場所で以下のコマンドを実行します。

yarn create next-app

するといろいろ聞かれて、選択していきます。基本デフォルトでかまいません。私はTypeScriptはYesにして、他はデフォルト設定にしています。TypeScriptを使いたくない方はNoを選択しましょう。

What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
Would you like to use ESLint with this project?  Y/N
Would you like to use Tailwind CSS with this project? Y/N
Would you like to use the `src/ directory` with this project? Y/N
What import alias would you like configured? `@/*`

もしもあなたがmy-appというアプリ名で作成したなら、my-appディレクトリに移動してnext.jsを起動します。

cd my-app
yarn dev

以下のような表示になれば起動成功です。

yarn run v1.22.19
$ next dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 1778 ms (306 modules)
- wait compiling...
- event compiled client and server successfully in 251 ms (306 modules)

ここで、まずは自宅サーバー上でhttp://localhost:3000にアクセスしましょう。以下のような画面がブラウザに表示されていれば成功です。

次に、外部ネットワークからアクセスできるか確認します。あなたのWiFiのグローバルIPアドレスが例えば113.161.110.49ならば、ブラウザで113.161.110.49にアクセスします。これで、上記と同じnext.jsのホーム画面が表示されていれば、見事next.jsのサイトを外部公開することができたことになります。

おわりに

いかがだったでしょうか。これでは動かない、おかしいということがあったらTwitterの方にご連絡ください。

Discussion