【Web制作】個人サイトの空き容量をNexcloudでストレージにする

レンタルサーバーの余り容量

わぁ、余ってるぅ~

個人サイトの空き容量を活用し、Nexcloudで自分だけのクラウドストレージを設置していく。

400GB中9GBしか使ってない。この空き容量を、Dropboxみたいにストレージ活用しよう。

「個人サイト楽しいよ」って言っても、そう簡単にみんな動かないでしょ? 「クラウドストレージ設置に使って、その片隅で個人サイトやろ」って言って、個人サイトに興味をもたせる作戦です。SNS激動の時代に自分の拠点がある安心感も手に入れよう。

「Win/Android/ロリポップのベーシックプラン/独自ドメイン」の場合でやっていきます。自分と同じか、似てる環境であれば動くと思う。ロリポじゃなくともSSL/データベースが作れるならできるよ(念のためサブドメインを分けたのは、セキュリティのため)

Nextcloudって?

Nextcloudロゴ

  • クラウドストレージを自分のサーバーに構築
  • オープンソースなので無料
  • スマフォでのファイル共有可能

GoogleOneやDropboxのようなクラウドストレージを、自分のサーバーに構築できる。

オンプレミス型の自サーバーだから、ハッキングにも強い(もちろんそれなりの対策が必要、後にやり方を記載)

レンタルサーバー契約があれば無料。

パスワード保護で共有できるので執筆者にテンプレデータを配布する、データの提出フォルダを作る等プチオンリーの共同作業での利用もオススメ。

Nextcloudインストール手順
  • 手順1
    ロリポップでDBを作る
    サブドメインをSSLにしデータベースを作る
  • 手順2
    Nextcloudインストール
    phpファイルをアップロードして設定
  • 手順3
    セキュリティの設定
    別記事有り
  • 手順4
    PCと同期/スマフォでも使えるようにする
    アプリのインストールと設定

ロリポップ側の準備

データベースが必要なため、ライト以上のプランで利用可能。

同期する場合、画面変遷のスピードに関わってくるので、できればLiteSpeedが使えるベーシックプランでの利用をオススメ。

ライトプランはデータベースが1つだけ。WordPressに使わないのであれば、てがろぐ+Nextcloudがいける。いけるが……、ライトプランはSSHによるシェルログインができない。セキュリティ面がコストダウンされてるからこそあの値段。容量の差ではない、セキュリティの差。このご時世、セキュリティにはコストを払い、安全は金で買え(教訓)

ロリポは全てのプランで倉庫利用OKなのでいけます。ついでにロリポは同人サイトも応援してるね!

サブドメインの設定とSSL化

ロリポップでサブドメインを作成する1

サーバーの管理設定→[サブドメイン設定]→[新規作成]

サブドメインの名前を決める。これがブラウザ上でのアドレスとなる。

今後のことも考え、他と被らず短いといいかも。公開フォルダはFTPのときに自分がわかればいい。ここではlogにします。

なんでもいいわけではなく、一応命名ルールはあることにはある。システムで予約されている(www/ftp/smtp/pop/mail等)以外。

Googleは「m」で始まるサブドメイン名=モバイル用ページと認識されるので、できればm始まりは避ける(ex.ヤフーのモバイルは「m.yahoo.co.jp」)

5分ぐらいかかる。ページを更新しサブドメインが作成されているか確認する。

独自SSL

ロリポップでSSL化をする

サブドメイン項目の下に「まだSSL化されてないよ!」が赤文字で出てるので、クリックし有効にする。

必ずSSLにする。HTTPSはNextcloudの最低条件。SSL化はドメインを持っていれば独自SSL無料なのでそれを使う。


ロリポップは「ドメインずっと無料キャンペーン中」らしいよ。

昔から使ってるユーザーにもなにかキャンペーンやってくれよな!! 従来のユーザにも楽しげなことくださいよ。この前高そうな金かかった箔押し感謝ポストカード送ってくれたね……。そうじゃなくて……。そうではなくて………。新規ユーザーだけではなく既存のユーザーにも……。

後ほどの設定で「ドメインすべてがSSL化されているかどうか」が関わってくるので、すべてをSSL保護有効にする。

まだ個人サイトがSSLになっていないなら一旦中止し、SSL化してからにしよう。SSLについてはdoさんのところみてね。

doさんのところに書いてないけど、常時SSL化はセキュリティだけではなく、表示がかなり速くなる(HTTP/2接続になるため)

データベースの設定

ロリポップでデータベースを作成する

5個ぐらい候補が出るのでプルダウンで選択。サーバーがMySQLであることを確認する。選べるもので一番新しいバージョンを選択。

画像のMySQL5.7のサポートは2023年10月に終了。
追記:MySQL8.0が2024年2月時点で最新。

データベース名は2文字以上の英数字。ここではサブドメと同じlogとしました。

データベース名の先頭が数字だと、エラーになる可能性がある。数字を使うなら末尾にする(01logではなくlog01)

IDとパスワードは必ずメモしておく。メモ帳アプリを立ち上げてコピペか、スクショを撮っておく。

Winは[Windows]キーを押しながら、[Print Screen]キーで[ピクチャ]→[スクリーンショット]のフォルダに入る

WAFと海外アタックガードを無効にする【重要】

ロリポのWAFは仕事をするので、このままではインストールができない。

ロリポップでWAFを無効にする

ロリポップで海外ガードを無効にする

インストールするときだけこの2つを無効にする。※インストールが一通り終わったら、有効に戻す。

まだここには何もデータが入ってないので、攻撃されたところで痛くもない。個人サイトもWordPressもガードされたまま無事です。

こういう事があるので、データベースはサブドメインにして区画を分けると設置が楽。

Nextcloudのインストール

WAFが無効になるのに10分ぐらいかかるので、その間にNextcloud側の作業に移る。いくつか方法があって、簡単なWebウィザードを使ったインストールでやる。

ここから英語です。

[setup-nextcloud.php]ファイルをダウンロード

公式サイトで[setup-nextcloud.php]ファイルをダウンロードしに行く。

↑ここから直でインストールデータDLのページに飛ぶ。

NextcloudのインストーラーをDLする

[Community Projects]→[web Installer]→[here]

デスクトップ等わかりやすいところに、phpファイルを一旦保存。

ロリポップサーバーへアップロード

おそらくもうWAF/アタックガードが無効になっているので、そのうちにインストールする。無効の時間は少ないほうがいいのでね。

ダウンロードしたファイルをロリポップサーバーへアップロード。サブドメインで設定したフォルダ(ここではbackupフォルダ)ができているはず。その直下にアップする。

FTPでインストールphpファイルをアップロード

わかりやすくFTPページからの操作にしたけど、FTPソフトからアップしてもいい。

[setup-nextcloud.php]にブラウザでアクセスする

[https://自分のサーバー/setup-nextcloud.php]にブラウザでアクセス。

※今回はhttps://log.juliet-project.com/setup-nextcloud.phpというアドレスになる。サブドメ時に指定したbackupフォルダは不要(https://log.juliet-project.com/backup/setup-nextcloud.phpではない

Nextcloudインストール画面

Setup Wizardが表示されるのでNEXTで次へ。

【Setup Wizardが表示されない場合】
1.ブラウザ側かPCのファイアウォール/セキュリティで引っかかってる場合があるので見直す。
2.setup-nextcloud.phpのパーミッションを変更して対応。
3.転送モード:ASCIIでアップし直す。

Nextcloudをインストールするディレクトリーを設定

「ディレクトリーはどうする?」って聞いてくるので、フォルダを作りたければフォルダ名、PHPファイルと同直下に入れたければ「.」(ドット)を記入。

ディレクトリを作りたければここで決める。https://log.juliet-project.com/cloudにしたければ、[cloud]と記入。

少し時間がかかるので休憩。

初期設定

ログイン画面が表示されたら初期設定をやっていく。

Nextcloud初期設定 データベースの種類に注意

ユーザー名とパスワードを決める。パスワードは緑になるように強めにしてほしい。

データベースMySQLにする

デフォルトで[SQLite]になっているので、[MySQL]を選択【必ず】

ロリポ側でMySQL5.7で作ったんだし。

データベース

データベースはサポート外なので自己責任な

データベースを作った時にメモした内容を入力。メモし忘れたらロリポのデータベースの項目を確認する。ポート番号は指定しなくても行けた。

Nextcloud推奨アプリの選択

推奨アプリをインストールするか聞いてくる。データ置き場として利用なら不要。一応インストールしておきます(あとから消したり足したりできる)

Nextcloudインストール成功

インストール成功

この画面が出ればインストールは完了。ヤッタネ! もうGoogleのファイル検閲に怯えなくていいんだね。

※WAFと海外アタックガードを有効に戻してください。

下の方にあるカスタマイズで、天気やステータスを消せる。トークもカレンダーもいらないね。メモ帳だけ残してある。

png形式のファイルは写真機能では表示されない。jpgだけ。
この写真機能、ちょっとあれなjpgも写真一覧に表示されてしまうので、社会性を守るため隠しファイル設定にしよう。
※Winの場合、ファイルを右クリック→[プロパティ]→[隠しファイルにチェック] 

Nextcloudのセキュリティ対策

使い始める前に、セキュリティをできる限り強化していく。

責任はサーバー管理人。設置したら終わりではない。週1で接続して、アプリの更新とNextcloudを最新版にしていく。WordPressもだけど、データベースは放置ダメ、ゼッタイ。

個人情報を隠す

使い方はGoogleOneと同じ。アカウント名がm始まりならアイコンがMになるところも似てる。

Nextcloud個人設定

右上のアイコンをクリック→[個人設定]

ここでメールやアイコンを変えられる。日本語にしたければ言語を変更。タイムスタンプがずれないように、居住地を変更。

個人設定をすべて隠す

必要以上に個人情報を入力しなくていい。データ置き場なのでね。

二要素認証とファイルの暗号化

個人設定→[セキュリティ]→[二要素認証]→[TOTP (Authenticator app)]

二要素認証はGoogle Authenticatoを利用する。自分が使ってるやつでOK(iPhoneには付いてるのかな?)

twitterやWordPress等色んなところで使うので、Google Authenticatoはこの機会に入れておこう。

スマフォをなくすと全てが終わる世界は怖い。スマフォが使えなくなる場合もあるので、バックアップコードも発行して控えておく。

ファイルの暗号化

アップされるファイルを念のため暗号化する。

これは念のためなので、同期利用で動作が重くなる場合は外す。データ置き場ならONにしたほうが無難。

Nextcloudの暗号化と2段認証

グループにも認証を要求しとこう

「パフォーマンス劣化」これも翻訳が変なだけ。

暗号化するとファイル容量が30%増えることを覚えておく(これをパフォーマンスの劣化と表現しているだけ)100MBのファイルが135MBぐらいに増える。

メールのSMTP設定【重要】

管理→[基本設定]→[メールサーバー]

メール機能を使わないにしても、パスワードを忘れたときのリセットにこの設定が必要。

ここで設定するメールアドレスは、個人設定→メールの項目と一致してる必要がある。

ロリポップメールの場合

※ドメインをもらったときに設定できるメール。ドメインとると無限にメアド作れちゃう。メール→新規作成でなければ作る。

Nextcloudメールの送信設定

  • 送信モード:SMTPを選択
  • 暗号化:SSL/TLS
  • 送信元アドレス:空欄でOK
  • サーバアドレス:自分のSMTPサーバドメイン名(ロリポのポート番号は465)
  • 認証方法:ログインを選択
  • 資格情報:翻訳が変なだけ(メアドとパスワードになる)

メール送信後、Nextcloudから確認メールが届けば成功。

Googleメールの場合

  • 送信モード:SMTPを選択
  • 暗号化:STARTTLS
  • 送信元アドレス:空欄でOK
  • サーバアドレス:smtp.gmail.com(gmailのポート番号587)
  • 認証方法:ログインを選択
  • 資格情報:Googleメールのメアドとパスワード

「Gmailのメールサーバーのポート番号は?」って聞いたらすぐに答えてくれるChatGPT優秀。

セキュリティの度合いは587>465なので、やはりGoogleのセキュリティ意識は強い。ロリポップのメアドよりGoogleのメアドでの登録をオススメ。

メールのポートは587(STARTTLS)か465(SSL/TLS)になるので、自分のが使ってるところを確かめる。

※まれにポートが25のところがある。暗号化できないのでそんなメールを使うのはやめろ! そんな危険なフリメを使うな!

連携アプリの利用

WordPressのプラグインみたいなやつで拡張していく。WordPressのプラグイン同様に、セキュリティ強化のため適宜アップデートが必要。

推奨インストールでいれたトークやカレンダーが不要なら、ここで削除する。

オススメはスマフォ連携とMUSIC。必要であればPCとの同期。

スマフォとの連携

AndroidのNextcloud

iOS/Androidともにスマフォアプリが有る。ストアで「nextcloud」で検索。これまた無料で利用可能。今のところだけどね。

スマフォNextcloudアップロード設定

管理しやすくするために日付別にサブフォルダ作ってもらう。

他にも写真だけ、動画だけが選べる。「動画だけNextcloudにアップする」ということもできる。

もう、GoogleOneの容量に怯えなくていい! 無尽蔵(とまではいかないが)に写真も動画もバックアップできる。

ゲームジャンルの人は、SwitchのスクショをNextcloudに保存するのがおすすめ。GoogleOneの半分がSwitchのスクショ画像だった。作画資料に大量にスクショしてるから容量を食ってる。

音楽を再生したい場合

音楽データ(mp3等)をアップロードしていれば、Nextcloud上で再生できる。

再生アプリはいろいろある。「MUSIC」は公式のやつ。一般名詞をアプリ名にするな、混乱するだろ。

アプリ→[「MUSIC」を検索]→[有効にする]

上メニューバーに♫アイコンが出るので、クリックでファイルを選ぶ(mp3をお気に入りタグにするとすぐ該当の曲が出るよ)

「MUSIC」アプリの利用

豆腐になってる!(よくある)

これでSpotifyにない音楽と、ドラマCDを車の中で再生できるようになる。もう車はディスプレイオーディオになってしまい、CD搭載されてないから………。

PCとの同期【クライアントアプリが必要】

同期させておけば、バックアップ機能で過去にさかのぼってファイルを取りだせる。

結構細かく保存してくる。この間隔をやファイル数を指定することはできないっぽい。クリスタだと容量がすごいことになる。※このPC同期は最大アップロード制限の影響を受けない。

サーバーがLiteSpeedでない場合、同期にラグが発生するかもしれない(ライトプランはApache)LiteSpeedが使えるサーバーがいいって。

作業中の同期データはDropboxで、Nextcloudはバックアップの場所として使ってる。1日の作業ごとに手動でアップはしている。

セキュリティ&セットアップ警告

管理→[概要]で自動チェックをしてくれる。ログインしたら、必ずここを見てエラーが出ていないか確認する。

セットアップに関して警告がいくつかあります

このままだといくつか警告が出ているハズ。容量制限だけは外して欲しい。

【Web制作】Nexcloudの警告エラー修正とセキュリティ対策
Nextcloudインストール後、いくつかエラーが出るので修正する。赤文字と黄文字を解消する方法。

できる人向けのエラーの修正を↑別記事にまとめてあります。わかる人が自己責任でやってください。

スポンサーリンク

所感

てがろぐが設置できてるか、WordPressを動かせてるなら、そんなに難しくないはず(無責任なことをいう)

「個人サイト興味あるけど、サーバー代を1年も払い続けるほど運営できるかな?」という人は、「200~400MBのクラウドサーバーとしてなら払い続けてもいいかもね」ぐらいにはなりませんかね? どうですかね?

Dropboxの無料が2Mで、次は2Tで1500円になり中間がない。500Mで3~500円ぐらいのプランがあればいいのにって思う。

すでに個人サイトを持っていて容量がダダ余りな人向け。是非自サーバーを構築してみてね。データのバックアップは複数あっていいので。

複数人でアンソロやプチオンリーの企画を主催する人に、利用を強く進めたい。

Qiitaに構築記事がたくさんあるので、使ってるレンタルサーバーや、エラー表示で検索するとだいたい解決する。

※log.juliet-project.comのアドレスにアクセスしても、ログイン画面が現れないか、404になるはず。そういう指示を.htaccessに出している。


ロリポップ紹介記の際には公式サイトの画像が利用できます! 価格表などの画像を使用いただき、ご紹介ください。

とあるので、公式サイトからロリポおじさんをやっと見つけた(もう存在が消えたかと思った)ナウでヤングなレンタルサーバーであることを、わたしだけは覚えておくからね。ロリポおじさんがコヤマドライビングスクールで免許取った話を覚えてるの、私ぐらいだと思う(メルマガ熟読)

ナウでヤングだった頃のロリポ

【WEB制作】VS Codeの「SFTP」を使いサーバーにアップする
【Web制作】Nexcloudの警告エラー修正とセキュリティ対策
【Web制作】個人サイトの空き容量をNexcloudでストレージにする
【Web制作】約物半角フォント「Yaku Han JP」とてがろぐ検索避け
【Web制作/お知らせ】サーチエンジン登録&てがろぐ設置
タイトルとURLをコピーしました