RaspberryPiでwindowsファイル共有を使ったお手軽練習用webサーバを作り公開する手順

11636 ワード
RaspberryPi samba UbuntuServer HTML WEBサーバ HTML テキストリンク

RaspberryPiで簡易的な練習用webサーバを作り公開する手順

はじめに

HTML, CSS, Javascriptを学ぶために、普通はローカルでHTMLファイルを作成し、それをChromeなどに読み込ませる。
しかし、この方法だとwebページを公開している感じがしない。
このページでは、学習中のテストページをWANに公開しながら作成する方法を簡単に解説する。
これで、学習のモチベーションが保てたらいいんじゃないですかね。
ファイルのアップロードは、難しいことを考えずに、windowsのエクスプローラからできるようにします。

目次

  • RaspberryPiを購入
  • RaspberryPiにOSをインストール
  • 初期設定
    • Wifi接続
    • IP固定
    • アップグレード
    • ファイアウォール設定
  • SSHインストール
    • windowsクライアントの設定
  • Webサーバソフトインストール (Nginx)
  • ファイル共有ソフトインストール (samba)
    • 設定ファイル変更
  • ルータのポート開放

RaspberryPiを購入

テスト用のwebサーバなので性能は必要ないです。
おすすめはRaspberryPi 3 model A+ (3300円)
フルサイズのHDMIがささります。
どの機種を選ぶにしても、必ず64bit対応モデルを選ぶこと。

OSをインストール

UbuntuServer20.04をインストールします。

以下のサイトからRaspberryPi専用のOSインストールツールRaspberry Pi imagerをダウンロードし、インストール
https://www.raspberrypi.org/downloads/

インストールしたソフトを起動

書き込むSDカードを指定

OSを選択

OSとSDカードが正しく選択されていることを確認し、WRITEを押下

起動

ラズパイに書き込んだSDカードを差し込み、HDMIと電源をつなげば起動する。

OSの初期設定

①初回ログイン

User : ubuntu
Pass : ubuntu

注意　起動後数分間はこのユーザとパスワードでログインしようとしてもできません。謎の文字列が表示されるまで待ちましょう。

初回ログインが通るとパスワード変更が促されるので変更します。

②日本語キーボードに変更

sudo dpkg-reconfigure keyboard-configuration

Generic 105-key PC (intl.) → Japanese → Japanese → The default for the keyboard layout → No compose key → Yes
の順に選択

③wifiの接続

ネットワークアダプタの名前を調べる

ip a

設定ファイルを開く

nano /etc/netplan/50-cloud-init.yaml

設定ファイルを編集

編集前

# This file is generated from information provided by
# the datasource.  Changes to it will not persist across an instance.
# To disable cloud-init's network configuration capabilities, write a file
# /etc/cloud/cloud.cfg.d/99-disable-network-config.cfg with the following:
# network: {config: disabled}
network:
    ethernets:
        enp5s0:
            addresses: []
            dhcp4: true
            optional: true
    version: 2

編集後

network:
    ethernets:
        enp5s0:
            addresses: []
            dhcp4: true
            optional: true
    wifis:
        "ネットワークアダプタ名":
            addresses: []
            dhcp4: true
            optional: true
            access-points:
                "SSID":
                    password: "password"
    version: 2

④IP固定も同じファイルで設定するので同時にやってしまう

今回は192.168.1.101に固定
サブネットマスク(/24)をアドレスの後ろにつけることを忘れずに。

編集後

network:
    ethernets:
        enp5s0:
            addresses: []
            dhcp4: true
            optional: true
    wifis:
        "ネットワークアダプタ名":
            addresses: [192.168.1.101/24]
            dhcp4: false
            dhcp6: false
            optional: true
            gateway4: 192.168.1.1
            nameservers:
                addresses: [192.168.1.1, 8.8.8.8, 8.8.4.4]
            access-points:
                "SSID":
                    password: "password"
    version: 2

いったん再起動

sudo reboot

⑤アップデート

sudo apt update
sudo apt upgrade

E: Could no get lock /var/lib/apt/lists/lock. It is held by process 1847 (apt-get)というエラーが出る場合は以下のコマンドを実行する

sudo rm /var/lib/apt/lists/lock
sudo rm /var/cache/apt/archives/lock

とりあえずこれで治る

⑥ファイアウォール設定

ファイアウォール有効化

sudo ufw enable

デフォルトで禁止設定にする

sudo ufw default deny

HTTP用に80番, 443番
SSH用に22番

sudo ufw allow 80
sudo ufw allow 443
sudo ufw allow 22

設定リロード

sudo ufw reload

OpenSSHインストール

①Ubuntu側でインストール

sudo apt install ssh

②windows側でSSHクライアントインストール

Puttyダウンロード
https://www.chiark.greenend.org.uk/~sgtatham/putty/

RaspberryPiのipを入力する

うまく接続できていれば一度警告画面が表示され、以下のようなログイン画面に移ります

webサーバソフトインストール

今回は性能の低いRaspberryPiで実行しているので軽量なNginxを利用する

sudo apt install nginx

ブラウザに http://192.168.1.101 と入力するとデフォルトページが表示される

ファイル共有ソフトインストール

データベース接続などは少しハードルが高いので、今回はnginxのデフォルト公開ディレクトリをファイル共有し、windowsのエクスプローラから簡単に操作できるようにする。
デフォルトの公開フォルダは/var/www/htmlに設定されている。

①Sambaインストール

sudo apt install samba

②Samba共有設定

Ubuntu上にSamba接続用のユーザを作成。今回のユーザ名は"WebServer"

sudo useradd WebServer

上で設定したユーザをSambaユーザに設定する

sudo pdbedit -a WebServer

ここで作成したユーザとパスワードが、windowsのエクスプローラからアクセスするときのユーザとパスワードになる。

③Samba設定ファイルの変更

設定ファイルを開く

sudo nano /etc/samba/smb.conf

設定ファイルの最後に以下の記述を追加する

/etc/samba/smb.conf
[WebServer]
path = /var/www/html
browseable = yes
writable = yes
valid users = WebServer

共有フォルダの権限を変更

sudo chmod -R 777 /var/www/html

Samba設定反映

sudo service smbd restart

ファイアウォールでSambaのポートを開ける

sudo ufw allow samba

④windowsエクスプローラから共有フォルダにアクセス

エクスプローラ上部のPath入力枠に直接"\\192.168.1.101"と入力する。（\はwindows上では￥と表示されます）

ユーザ名とパスワードはSambaユーザを登録したときに設定したもの

いま、デフォルトの公開ディレクトリ内にはデフォルトページのHTMLファイルがあることがわかる。
ここにHTMLファイルをコピーすれば公開される。

ルータのポート開放

ポート開放設定

WANから来たパケットをRaspberryPiに渡すためにルータ側で設定をする
HTTPとHTTPsのポートである80と443を開放する

ポート開放テスト

グローバルIPから目的のポートにアクセスできるか確認する

グローバルIP確認

確認したグローバルIPを入力して先ほどと同じページが表示されたらweb公開成功