Zenn
👌

ラズパイでWebサーバーを構築し独自ドメインで外部公開する方法

2023/08/20に公開1件
Ubuntu
Raspberry Pi
Cloudflare
tech

本記事ではラズパイで独自ドメインを用いてhttps://practice.(ドメイン名)にアクセスすると下のようなNginxの初期ページが表示されるまでの手順を解説します。

外部公開するのはCloudflare Tunnelを使う以外の方法もたくさんありますが、Cloudflare Tunnelを使った方法だとAWSやレンタルサーバー、サーバー用PCなどラズパイ以外の機器の場合や、Webサーバー以外の場合でもほぼ同じ手順でできるので今回はこの方法で解説します。

以下の流れで解説します。
1.ドメインの取得
2.ラズパイのセットアップ
3.NginxでWebサーバー構築
4.Cloudflareの設定
5.ラズパイでCloudflare Tunnelの設定

1.ドメインの取得

ドメインを既に持っている方はこの項目はスルーしてください。
注意点としてドメインの所有は年間1200円ほどかかります。

ドメインを取得するサイトはお名前.comやGoogleドメインなどいろいろありどこでもよいですが、今回はお名前.comで取得します。

取得したいドメインを入力する


まずお名前.comのトップページで「取得希望の文字列を入力」の部分に取得したいドメイン名を入力します。例えば「togetine.com」を取得したいなら「togetine」と入力するといった感じです。入力したら検索ボタンを押します。

取得するドメインを選択する


そうするとドメイン一覧が表示されますのでその中から自分の欲しいドメインを選び、「お申し込みへ進む」をクリックします。「.com」か「.net」が無難でいいと思いますがどれを選んでも問題ないです。

メールアドレスとパスワードを入力する


内容を確認して問題なければメールアドレスとパスワードを入力して「次へ」をクリックします。新規登録なのでパスワードは作ってください。
下の「オプション」のほうに「Whois〜」や「ドメインプロテクション」がありますが無視でいいです。

会員登録する


会員情報を入力し「次へ進む」をクリックします。

支払い方法を選ぶ


支払い方法を選び「申込む」をクリックします。
下の方に「ご利用予定のレンタルサーバーをお選びください」があり「エックスサーバー」や「mixhost」などがありますが無視でいいです。

以上が終わると登録したメールアドレス宛にドメイン登録完了通知のメールが届きます。これで申し込んだドメインが使えるようになります。

もっと詳しい記事：https://tk-create.com/domain/original-domain-acquiring-method/

2.ラズパイのセットアップ

ここからはラズパイでWebサーバーを構築していきます。そのためにまずはラズパイのセットアップをします。
今回使うラズパイは「Raspberry Pi 3 model B」ですが、他のラズパイでも同様です。

Raspberry Pi Imagerのインストール

Raspberry Pi Imagerとは、ラズパイ向けのOSをmicroSDカードに書き込むことのできる公式のソフトです。

Windowsの場合

公式サイトのダウンロードページから、Windows版をダウンロードします。
ダウンロードしたファイルを開きインストールをします。

Macの場合


公式サイトのダウンロードページで「Download for macOS」をクリックしてmacOS版をダウンロードします。


ダウンロードしたファイルを開くと上のようなウィンドウが出るので、左のアイコンを右のフォルダにドラッグ&ドロップします。

microSDカードをPCへ挿す

microSDの容量はOSインストールだけなら8GBあれば十分ですが、Webサーバー構築したりいろいろしたりするなら16GB以上は欲しいです。

OSを選択

ラズパイのOSの代表例として「Rasberry Pi OS」がありますが、今回はラズパイ以外でも使うことのできるOSである「Ubuntu Server」でやっていきます。将来的に本格的なサーバーを触る機会があるかもしれないですし。

Raspberry Pi Imagerを開き「OSを選ぶ」をクリックします。

「Other general-purpose OS」をクリックします。

「Ubuntu」をクリックします。

「Ubuntu Server 23.04(32-bit)」をクリックします。記事随筆時点で最新が23.04なので選びましたが、基本的には最新のバージョンで問題ないです。
すると、下のような画面に戻ってくるはずです。

ストレージを選択する


「ストレージを選ぶ」をクリックします。

該当のストレージをクリックします。

OSをmicroSDカードに書き込み


「書き込み」をクリックすると書き込みが開始します。この時microSDカードに含まれているデータは全て消えるので注意してください。

書き込みには10分〜30分ほどかかりますので気長に待ちましょう。

「書き込みが正常に終了しました」の画面が出たら成功です。

ラズパイの初期設定

初回起動からIPアドレス固定までは以下の記事にまとめましたのでこちらを参照してください。
https://zenn.dev/togetine/articles/cb2b21342fb316

これ以降の作業はお使いのMacやWindowsからラズパイへSSHで接続して操作するのをおすすめします。

3.NginxでWebサーバー構築

ここからはNginxを使ってラズパイのローカル環境で動くWebサーバーを構築します。

Nginxインストール

$ sudo apt install nginx

インストールが完了したら次のコマンドで正しくインストールされたか確認します。

$ nginx -v

バージョンが表示されたらインストール完了です。

Nginxの設定ファイル確認

設定ファイルは/etc/nginx/sites-available/defaultです。
中身をcatコマンドなどで確認すると以下のような部分があります。

# Default server configuration
#
server {
	listen 80 default_server;
	listen [::]:80 default_server;
	....

ここにポート番号が設定されていて、上の場合(初期状態)だと80ですのでnginxはlocalhost:80で動くようになっています。今回はこの初期設定80のままで進めます。

補足
ポート番号を変更したい場合は80の部分を変更すれば良いです。
例）ポート番号3000へ変更

# Default server configuration
#
server {
	listen 3000 default_server;
	listen [::]:3000 default_server;
	....

変更したら以下のコマンドで設定を反映させます。

$ sudo nginx -s reload

Nginxの動作確認

$ curl http://localhost:80

これで次のようなHTMLファイルが出力されればOKです。

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
html { color-scheme: light dark; }
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>

これがNginxの初期ページの中身になっています。

4.Cloudflareの設定

ここまででラズパイ内でhttp://localhost:80でNginxの初期画面を出力させるとこまでできました。しかしこれではまだラズパイ内からしか見ることができません。
ここからは外部からhttps://practice.(ドメイン名)と入力するとラズパイ内のhttp://localhost:80に繋がる部分を作っていきます。

流れとしては
https://practice.(ドメイン名)
↓
トンネルID
↓
192.168.0.10
↓
http://localhost:80

この章ではそれに必要なCloudflareの登録の手順を解説します。

Cloudflareの登録

Cloudflareのトップページを開きます。


右上の「サインアップ」をクリックします。

メールアドレスとパスワードを入力し「サインアップ」をクリックします。

登録したメールアドレス先にメールが届きますので、メール本文に記載された認証リンクをクリックして登録完了します。

ドメインの登録

Cloudflareのダッシュボードを開きます。


「サイトを追加」をクリックします。


1章で取得したドメインを入力して「続行」をクリックします。例として「togetine.com」でやっていきます。


プランの選択画面が表示されるので無料で使える下の方にあるFreeを選び「続行」をクリックします。

ネームサーバーのセットアップ

今のままだとtogetine.comにアクセスするとドメイン取得をしたお名前.comのネームサーバーに飛んでしまうので、Cloudflareに飛ぶようにセットアップをします。


この画面で待機し、別タブでお名前.com Naviを開きログインします。

「ネームサーバーの設定」から「ネームサーバーの設定」をクリックします。

ドメインを選択し、「他のネームサーバーを利用」をクリックし、「プライマリネームサーバー」と「セカンダリネームサーバー」のところにそれぞれ先ほどのCloudflareのページにあったネームサーバーを入力し「確認画面へ進む」をクリックします。

確認画面が表示されるので「設定する」をクリックして、お名前.comでの作業はおしまいです。

Cloudflareの画面に戻って「ネームサーバーをチェック」をクリックします。

しばらくするとCloudflareに登録したメールアドレス宛にCloudflareから、ネームサーバー正しく変更できてて有効になったよ、といった旨のメールがきます。
これでネームサーバーのセットアップは完了です。

クイックスタート


「設定をレビュー」をクリックします。


「始める」をクリックします。


HTTPの自動リライトをONにして「保存」をクリックします。


常にHTTPSを使用をONにして「保存」をクリックします。


BrotliをONにして「保存」をクリックします。


「終了」をクリックします。

Cloudflare Zero Trustへの登録

Cloudflare Tunnelを使う上で必須ではないと思いますが、登録するとトンネルの一覧などが見えて良いです。
左メニューの「Access」から「Zero Trustを起動する」をクリックして登録画面に移ります。

自分は結構前に登録済みで登録の手順を覚えていないので解説できませんが、画面に従っていけば簡単に登録できたはずです。プラン選択がありますが無料のFreeプランで問題ないです。

5.ラズパイでCloudflare Tunnelの設定

ここからまたラズパイでの作業になりますので、MacやWindowsからSSH接続しましょう。

$ ssh ubuntu@<IPアドレス>
(例： $ ssh ubuntu@192.168.0.10)

cloudflaredのインストール

まずはcloudflaredをダウンロードします。
2023.7.3記事随筆時点での最新バージョンですので、最新バージョンを入れたい人はこちらから確認してください。

$ wget https://github.com/cloudflare/cloudflared/releases/download/2023.7.3/cloudflared-linux-armhf.deb

インストールします。

$ sudo apt install ./cloudflared-linux-armhf.deb

インストール後以下のコマンドでバージョンが表示されたらインストール完了です。

$ cloudflared --version

次に以下のコマンドでcloudflaredの認証をします。

$ cloudflared tunnel login


URLが表示されるのでこれをChromeなどのブラウザで入力します。


使用するドメインをクリックします。

完了したらウィンドウを閉じます。
するとラズパイに証明書ファイルがダウンロードされます。
ラズパイに/home/ubuntu/.cloudflared/cert.pemが作成されたらcloudflaredの設定は完了です。

Cloudflare Tunnelの作成

まずはhttps://practice.(ドメイン名)にアクセスしたらラズパイに到達するようにします。
図にすると下の赤枠の部分です。

そのためにCloudflare Tunnelを作成します。(ラズパイにSSH接続して実行)

$ cloudflared tunnel create <トンネル名>

今回は例としてトンネル名を「raspi」とします。

$ cloudflared tunnel create raspi

これで/home/ubuntu/.cloudflared内にtunnelの認証情報が書かれたjsonファイルが生成されます。xxxxx.jsonというファイル名のxxxxxの部分がトンネルIDになります。

Cloudflare Tunnelの設定

次にラズパイにpractice.(ドメイン名)が来たらhttp://localhost:80を参照させるようにします。
図にすると下の赤枠の部分です。

そのためにCloudflare Tunnelの設定ファイルを書いていきます。

/home/ubuntu/.cloudflaredに移動します。

$ cd /home/ubuntu/.cloudflared

config.ymlを作成します。

$ sudo vi config.yml

内容は以下のようにしてください。

tunnel: <トンネル名>
credentials-file: /home/ubuntu/.cloudflared/<トンネルID>.json

ingress:
  - hostname: practice.<ドメイン名>
    service: http://localhost:80
  - service: http_status:404

例）
トンネルID：61fd0ba8-8311-602e-659b-d29ad131fc2e
トンネル名：raspi
ドメイン名：togetine.com

tunnel: raspi
credentials-file: /home/ubuntu/.cloudflared/61fd0ba8-8311-602e-659b-d29ad131fc2e.json

ingress:
  - hostname: practice.togetine.com
    service: http://localhost:80
  - service: http_status:404

設定ファイルを書いて保存できたら以下のコマンドでトンネルとDNSを紐付けます。

$ cloudflared tunnel route dns <トンネル名> practice.<ドメイン名>

今回の例だと以下の感じです。

$ cloudflared tunnel route dns raspi practice.togetine.com

以下のコマンドでCloudflare Tunnelを立ち上げます。エラーにならず立ち上がったら完了です。

$ cloudflared tunnel run <トンネル名>

動作の確認

MacやWindowsでChromeなどのブラウザから　https://practice.<ドメイン名>へアクセスして下のような画面が出たら完了です。

まとめ

今回はラズパイでWebサーバーを構築し独自ドメインで外部公開する方法を解説しました。
今回の内容だけだとラズパイを再起動するたびにcloudflared tunnel run <トンネル名>をしないといけないので、また今度Cloud Tunnelの自動起動の設定方法の解説記事を書こうかなと思います。
他にも外部からラズパイへSSH接続する方法の記事も書こうかなと思っています。

ながーい解説でしたが、結局はCloud Tunnelを使うための準備的な内容が多かったかなと思います。Cloud Tunnelを使うことでラズパイ以外にも本格的なサーバーの構築も簡単にできるので、使えるようになって損はないものだと思います。

Discussion