この記事をおすすめしたい人
- SynologyのNASでWebサーバを構築しようとしている人
- つまりオレ
今回はSynology社製のNAS上にウェブ開発環境を構築していく第一弾です。
以前、QNAP NASでも同じことをやって、己のあまりの無知さに気が狂いそうになったのだけれども、懲りずにやっていきます。
Synologyのパッケージ(アプリのようなもん)「Web Station」を導入して、WordPressやNuxt.jsを動かすための下準備をしていきます。
簡単な経緯
えー、うちの開発環境はNAS上にありまして、ずっとQNAPのものを使っていたんですが、2021年4月にまたもやランサムウェアによる被害にあいまして、これを機に開発環境として注目していたSynologyに乗り換えました。
購入したのはDS720+。 急な出費だったのであまり予算がなかったのと、Synology初号機のため、とりあえずHDD2台モデルでいいかなと。
なぜこれを選んだかはNAS自体のレビューとしてやるかもやらないかも。 やりたい。
Web Stationのインストール
僕はSynology社製のNASの完全初心者なので、備忘録がてらチョー簡単なことも書いていきます。 各自の知識に合わせて必要なところから読んでください。
パッケージセンターを開く
NASのセットアップが一通り終わった状態でNASにログインします。
Windowsで言うところのデスクトップに「パッケージセンター」なるものがあるので開きます。
Synologyではアプリのことを「パッケージ」と呼ぶようです。
Web Stationをインストール
パッケージセンターにはSynology純正のパッケージ、サードパーティ製のパッケージの2種類に大きく分けられていて、お目当てのWeb Stationは純正の方です。
パッケージはデフォルトでは名前昇順で並んでいるので、Web Stationは「Synology」内の下の方にあります。
画像は既にインストール済みの状態なので「開く」ボタンになっていますが、未インストール状態では「インストール」表記になっているのでボタンを押すとインストールが始まります。
10秒くらい？で終わります。
インストール後のWeb Stationの状態
このままでも最低限動いているようです。
NASのIPアドレスを「192.168.0.10」とすると、ブラウザのURL欄に「192.168.0.10」や「http://192.168.0.10」と入力するとこんな↓画面がでます。
「Web Stationが使えるようになったけど、まだ設定が完了してないからマニュアル読んでね」みたいな感じでしょうか。
エラーっぽい内容ですがこれ別にエラーが出ているわけではなくて、初期設定で開くHTMLがこの内容になっているだけです。
共有フォルダ「web」を開く
Web Stationをインストールすると共有フォルダに「web」というフォルダが追加されています。
デフォルトではこのフォルダがそのまま公開されているようです。
中身を見てみると、
- index.html
- web_images/bg.png
- web_images/icon.png
先ほどのエラーメッセージっぽい画面のHTMLと使用画像が入っていました。
ここに任意のフォルダを作ってHTMLファイルを置いていけばサイトを作っていくことができます。 「ore-dev/index.html」を作れば「http://192.168.0.10/ore-dev/」でアクセス可能。
Web Stationの設定
パッケージセンターからWeb Stationを開くと、Web Stationの設定ができます。
「状態」タブ
インストール済みのサーバソフトウェアや、PHPのバージョンが確認できます。
ここで「インストール済」となっているものが以降の環境設定で使えます。 デフォルトでは「Nginx」のみインストールされていました。
「全般設定」タブ
デフォルトで使うサーバソフトウェアや、PHPのバージョンを指定できます。 インストール済みのものしか選択できないので、足りない場合は先に「状態」タブから必要なものをインストールしてください。
あと「パーソナルウェブサイトを有効にする」。
僕はひとりで使ってるので触ってませんが、説明を見る感じ、複数ユーザでNASを使っているケースでそれぞれで別のサイトを作れるようになるってことでしょうか。
有効にすると、共有フォルダに「home」が追加され直下に「www」フォルダが、「homes」にはユーザ名のフォルダが作られその中に「www」フォルダが出来ていました。 どうやってアクセスするのかは不明。
こちらもデフォルトのサーバソフトウェアとPHPを指定できます。
「PHP設定」タブ
インストール済みのPHPごとに、拡張モジュールやphp.ini、その他の設定ができます。
これは次回のWordPress導入編で解説予定です。
「仮想ホスト」タブ
おそらく知識ある人には「仮想ホスト」でピンとくる表現なんだと思うんですが、僕は無知なので分かりません。
僕にも分かる言葉でいうと、「複数サイトを管理する場合の設定」です。
これは次に説明します。
複数サイトを管理する場合
Web Stationの「仮想ホスト」タブから設定します。
新規サイトを作る場合は「作成」ボタン、既存の設定を変更する場合は「編集」ボタンを押します。
するとこの↓ような画面が出てきます。
以下、各項目の説明。
「名前ベース」と「ポートベース」
全然詳しくないんですが、僕に必要だった範囲の知識で説明を。
「名前ベース」というのは指定した名前をURLとしてアクセスする方法です。
例えばこのサイトのテスト環境として「ore-dev.local」という名前を指定すると、Windowsのhostsファイルを書き換えることで、「http://ore-dev.local」で該当フォルダにアクセスできるようになります。
hostsファイルの書き換え
Windows10の場合だと、「C:\Windows\System32\drivers\etc」に「hosts」というファイルがあります(拡張子なし)。
これをメモ帳なんかのテキストエディタで開いて設定を追加することで、特定のURLでアクセスされた際にどのIPアドレスを参照するかを設定できるようです。
NASのIPアドレスが「192.168.0.10」、上で設定した名前が「ore-dev.local」だった場合、「192.168.0.10 ore-dev.local」と追加します。 複数追加する場合は後ろの「ore-dev.local」の部分を指定した名前に変更してさらに追加。
対して「ポートベース」というのは、NASのIPアドレスとポート番号でアクセスします。 NASのIPアドレスが「192.168.0.10」でポート番号「60001」を指定した場合、「http://192.168.0.10:60001」でアクセスできるようになります。
ポートベースの方は使用済ポートと重複するとややこしいことになるのかなーと思ったのと、僕がその辺の知識が全くないこともあって、僕は名前ベースの方を選択しました。
ドキュメントルートの設定
上で設定した方法でアクセスがあった場合に「どのフォルダを参照させるか」という設定です。
今回の例だと共有フォルダ「web」の「ore-dev」とします。
希望のフォルダをまだ作っていない場合は「参照」を押した後に「フォルダの作成」から、任意の場所に任意の名前のフォルダを作って指定してください。
HTTPS設定
全く知識がありません。
「HSTS」というのはMDNによると、HTTPの代わりにHTTPSを使うよう指示する設定だそうです。
「HTTP/2」はアレですね。 なんか速いやつ。
なんとなく両方オンにしました。
HTTPバックエンドサーバの設定
サーバソフトウェアを選択します。
これまた全く知識がなかったので、最終的にアップロードする環境のXSERVERを調べたところApacheのVer.2.4.6になっていたので、これに合わせて「Apache HTTP Server 2.4」を選択。
希望するものがなかった場合は「状態」タブから追加でインストールすることができます。
PHPの設定
使用するPHPのバージョンを指定できます。
これまたXSERVERに習い、推奨となっていた7.4を選択。
それ以外のバージョンを使用する場合は、先に「状態」タブから希望するバージョンをインストールしておくと選択できるようになります。
以上の設定をまとめると、最終的にこんな↓感じになりました。
まとめ
Synology社製のNASでとりあえずWebサーバを稼動させるところまでいきました。
複数サイトを管理する場合もQNAPの場合とそんなに大差ない感じで、Synologyの方が細かく設定でき、QNAPは僕のような知識のない人間でもお手軽に設定しやすい、という感じでしょうか。
次回はもう少し実践的な内容としてWordPressを稼動させるところまでやってみます。
既にWordPressもNuxt.jsも稼動済みですが、まぁトラブりましたよ。
以上、WordPressからお届けしました！
Synology NASでウェブ開発の目次
- 第1回 Web Station導入編(このページ)
- 第2回 WordPress導入編
- 第3回 Nuxt.js導入編