プロフィール

髭山髭人(ひげひと)

自分の書いた記事が、一人でも誰かの役に立てば...
活動信条の一つとして「貴方のメモは、誰かのヒント」というのがあります。

このサイトについて

本家HP packetroom.net から切り離した いわゆる技術メモ用のブログで、無料レンタルサーバーにて運用しています。広告表示はその義務なのでご容赦。
XREA さんには長年お世話になっています

モバの箱舟 - ローカル鯖をプロデュース

何に関する記事?

お察しください

何か気になる点・詰まってしまった部分あれば、件のDiscordサーバー内 で伝えてもらえれば。

ビジョン

「(環境さえ整えれば)誰でも、モ○マス本来のフォーマットをある程度保ったまま、一部要素がローカル上で確認できる様にしたい」 という理念で動いてます。

  • ウェブサイト形式でそのまま再現 & あからさまな公開スタイルにすると、マズそう
  • しかもサーバーなどの維持費が地味にかかる筈
  • かといってクローズドなサイトにすると、誰でもモ○マスアーカイブ(のようなもの)に触れる機会が失われる

💡 じゃあ、ローカルで動くような仕組みだけ作成して、
何処かに放流すればいい(そっちのが体裁的に"まだマシ")じゃね 理論

最終的に、仮想ドメインの https://imas.cg/ にて稼働させるスタンスです。

容量目途

アイドルギャラリー系とぷち縛りでも、
10GB は普通に行くと思う...ってのが現在の所感です。

  • カード画像系 : 4GB
  • カード付随ボイス群 : 2GB
  • ぷちエピ .swf + 音声 : 560MB
  • 思い出エピソード /cjs/ : 430MB

他にも立ち絵系と、エピソードの swf などがまだあります。

もっと突っ込んでいくと、親愛UP / 親愛MAX swf
ぷちの構成画像系...

別カウントですが、ここに劇場や動画系も混ぜると
もっと膨れ上がるのでしょうね...(;゚ω゚)

こんな理屈と運用イメージ

XAMPP ってソフトを使って、PC内部にサーバーを立ち上げます。
こうすると一時的にPC内でWebサイトが稼働=閲覧できるようになります。
ただし、このサイトを閲覧するのは自分(のPC内部)だけで良いので、外部(インターネット上)には公開しないようにします。
更に、この内部サーバーへ imas.cg という仮想ドメインを与えるような設定を、別途施します。

この辺の設定をすべて終えると、(現状、正規のウェブサイトとして存在しない) imas.cg サイトに繋ごうとした場合、
XAMPPを使って稼働させている、PC内部サーバー(webサイト)に繋がる...
つまり「imas.cg へアクセスしたら、自分のPC内サーバーに繋がる!!」って感じに。

XAMPPインストール

https://www.apachefriends.org/jp/index.html
https://www.webdesignleaves.com/pr/plugins/xampp_01.html

公式および、導入方法を画像付きで解説しているページリンク紹介しておきます。
まずはこのソフト(XAMPP)を、手順に沿ってインストールしてください。
全てを解説サイトの通りになぞらない方が良い箇所もあります。
下の説明を優先させてください。

注意

インストール先は デフォルトの C:\XAMPP で進めてください。
ここを変更すると、以降の説明作業内容が通用しません。
( 具体的には自己証明書のコマンド類 )

インストールに当たって

インストールを進めていくと Select Components なる場面に出くわします。
赤い打消し線部分は不要なので、チェックを外してください。
( 次項説明・画像参照 )

  • 使うもの
    • Apache (必須)
    • PHP (現状必須)
    • MySQL (今後使う可能性がある)
    • phpMyAdmin (今後使う可能性がある)

  • Bitnami for XAMPP は不要
    なんか 3つのコンテンツ画像ぽいものが左に表示され、
    「これも入れる?」って尋ねられる雰囲気の場面に出くわします。
    こちらは入れないほうが良いので
    Leam more about Bitnami for XAMPP
    のチェックは外して進めてください。

  • ファイアウォール
    「このソフト、外部にデータをさらけ出す機能あるが?大丈夫か?」
    ってな具合に Windows側からセキュリティ警告が出る筈です。
    起動を含む作業を通して、全体で2回くらい訊かれるかも?
    通信許可を尋ねられたら プライベートネットワークにチェックを入れてください。
    逆に、パブリックはチェックを外してください
    パブリックは外向け(ネット上公開) と同義と思っていただければ。
    プライベートネットワークだけにチェックが入っていることを確認したら、
    「アクセスを許可する」で再びインストール作業を進めてください。

補足:ポートに関して

Skype等が port 番号 80 を使っているとうまくXAMPP(のApache)が起動しないと思うので注意
後なんか他のサーバー系..例えば Minecraft でサーバー建てて遊んでる場合..とか?
ビデオチャットソフト系とかもモノによってはポート占有するのかも?
ちなみに 今後 443 ポートも必要となります。

事前エラー対処

C:\xampp\xampp-control.ini に関するエラーが発生するようです。
おもな症状として、XAMPP 終了(Quit)後にエラーメッセージが出るらしい...?

一旦動作確認

XAMPP の Apache 項目の Actions にて Start をボタン押して起動。
露骨なエラーログが出ず、上手く緑色に動作したら第一段階は成功✨

次に http://localhost/ にも接続
XAMPP for Windows 的なページが現れたら、第二段階も成功。
現状サーバーとしてキチンと動いています。
( XAMPPにより起動しているデフォルトの内部サーバー/Webサイトに繋げられたのと同義 )

仮想ドメイン有効化への下ごしらえ

1. ディレクトリを決める

imas.cg として繋ぐローカルサーバーのルートディレクトリを決めます。
すげえ単純に言うと「モ○マスサイトを配置/発動させる場所、どこにする?」ってやつです。

今回は C:\imascg\ のフォルダ(ディレクトリ) を、
モ○マスサイトに見立てる体裁で説明を進めていきます。

ちな、後述の設定ファイルを弄れば、後々変更も出来ます。
「Dドライブとかにしたいねん」 って場合、設定ファイルの一部を適切に書き換えれば通用するハズ。

  • 仮ファイルで確認や!!!!
    今回、まだきちんとした構成ファイルを出せていません。
    その為「とりあえず繋げる(表示される)かどうか確認するためのファイル」をこさえます。
    あなたが適当な index.html とか index.php を手付で書けるなら、
    それを C:\imascg\ 直下へ配置してください。

良く分からなければ、以下をコピペしたテキストファイルを作成し、
拡張子(と名前)を ~.txt から index.php に変えたのち C:\imascg\ フォルダ内へ配置しといてください。

<?php
phpinfo();

2. hostsファイル編集

C:\Windows\System32\drivers\etc\hosts をエディタ(メモ帳とか)で開く
( 一度デスクトップにファイルコピーして、そっちを編集→元の位置へ上書きで戻す とか )

末尾に以下を記載して上書き

127.0.0.1    imas.cg
  • 参考画像

こうすると、そのPC上から imas.cg ドメインに繋ごうとした場合、
御膳立てがすべて終わって稼働状態にあるXAMPPのローカルサーバーに繋がる...という寸法。

ちなみに .cg は コンゴ共和国 に割り当てられたドメインです。
imas.cg 自体もいつか実在するドメインになるかもしれませんが...
まぁ、実在する日がいつか来ても、BンNム系の公式がドメイン取らない限り用はないやろ!!!

  • 余談
    幾つかの設定ファイルやプログラム言語では、
    # 記号の以降右側に書かれた命令文を、行末まで 解釈しない・無視する 」といったルールが存在します
    ほかの言語だと //' なんてのもあります。
    hosts ファイル ないし参考画像を見て頂けると分かりますが、
    行頭に # がある = それより右が無視される = 実質、その行は設定,プログラム文として解釈されない
    ...ってな理屈です。
    「コメントアウト」でググってみると、ふんわりと伝わるかも・・・?

3. オレオレ証明書(自己証明書)の作成

ここが一番面倒臭いです。 なので、なるべく作業量を減らすために
細かい説明諸々吹っ飛ばした御膳立てファイルを用意しています

まず、以下の内容をまるっとコピペした、
ore_v3_ext.txt というテキストファイルを作成しておき C:\XAMPP\ 直下に配置

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment

subjectAltName=@alt_names
[alt_names]
DNS.1 = imas.cg
DNS.2 = *.imas.cg

次に、下記ファイルを別途DLし、中にあるテキストファイルの拡張子を
.txt から .bat へ変更します。

.txt もとい .bat ファイルの中身を説明すると、XAMPP の中に付属している Open-SSL というソフトに対し、
「ブラウザとサーバーで使う、証明書ファイルを作ってくれ~」って
働きかけるコマンド・処理をまとめたものになります。
その前で作成・配置してもらった ore_v3_ext.txt は、そのサポートを担います。

自分で.bat用意したい、って方は 以下にもほぼ同じ内容を書いたので、コピペって使って下さい。
ただし、.bat で使う以上、その特性から UTF-8 ではなく Shift-JIS (ANSI) で保存したほうが良いのかも?

自己証明書出力の 御膳立て.bat 内容を展開

@echo off
set OPENSSL_CONF=C:\xampp\apache\conf\openssl.cnf
set OPENSSL_PATH=C:\xampp\apache\bin\openssl

set PRIVATE_PEM_KEY=C:\xampp\apache\conf\ssl.key\ore.key
set PRIVATE_PEM_KEY_NOPASS=C:\xampp\apache\conf\ssl.key\ore_nopass.key
set CSR_FILE=C:\xampp\apache\conf\ssl.csr\ore.csr
set CRT_FILE=C:\xampp\apache\conf\ssl.crt\ore.crt
set V3_EXT_FILE=C:\xampp\ore_v3_ext.txt
set DAYS=18250

%OPENSSL_PATH% genrsa -aes128 -out %PRIVATE_PEM_KEY% 2048

%OPENSSL_PATH% rsa -in %PRIVATE_PEM_KEY% -out %PRIVATE_PEM_KEY_NOPASS%

%OPENSSL_PATH% req -new -key %PRIVATE_PEM_KEY_NOPASS% -sha256 -out %CSR_FILE% -subj "/C=JP/CN=Your LocalServer/O=imascg/ST=Chiba/L=Usamin-Planet"

%OPENSSL_PATH% x509 -req -in %CSR_FILE% -signkey %PRIVATE_PEM_KEY_NOPASS% -sha256 -days %DAYS% -out %CRT_FILE% -extfile %V3_EXT_FILE%

echo.
pause


ってな訳で、本項で主題として挙げている、自己証明書作成用の .bat を実行してください。
( DLしたファイルの.txt.batのやつを実行しても良いし、上のコピペから作成した.batでも良い )
( .batの実行場所はワリとどこでも良いです。デスクトップとかでも。 )

  • .bat 実行にあたって
    3回ほど、任意の同じパスワードを入力するシーンが出てきます。
    キー入力を促されたら、適当なパスを入力 → Enter で進めてください。
    入力した文字が見えないままですが、仕様です。
    (普通のサイトなら ***** みたいに伏字にしてくれますが... こちらはちょっと不親切ですね )
    ここで入力したパスワードは、この作業以降一切出番がありません。
    3回だけ入力したら、ぶっちゃけ忘れてもOK 🐓

  • 参考画像

  • 最終的に
    実行を終えたら(そして全体の作業が成功したら)
    .bat も、用意配置してもらった c:\xampp\ore_v3_ext.txt
    どっちも消しちゃって構いません。
    ( また作りたくなったら、これら2ファイルを同じ手順で用意→実行すれば良い )


【余談】一応書くけど別に気にしなくて良い話

この.batを実行すると、以下の4ファイルが指定フォルダ内に出力されます。
だから何だって話なんですけど、一応書いておきますね。

ファイル名 出力・配置先 備考
ore.csr C:\xampp\apache\conf\ssl.csr\ 実は消してもOK
ore.key C:\xampp\apache\conf\ssl.key\ 実は消してもOK
ore_nopass.key C:\xampp\apache\conf\ssl.key\
ore.crt C:\xampp\apache\conf\ssl.crt\

4. httpd-vhosts.conf を書き換えて、バーチャルホスト適用

C:\xampp\apache\conf\extra\httpd-ssl.conf を開き、
以下示されたコードを、ファイル末尾にコピペで追記
( 新しく <VirtualHost> セクションを増やすイメージ。 )

「どうやって開くねん?」って方、メモ帳📝 にドラッグアンドドロップでOKです

  • 技術メモ
    DocumentRoot の箇所は、フォルダパスを閉じないので注意 (閉じると起動時にエラる)
    "" で括らない場合、逆にバックスラッシュからスラッシュに変えないといけないかも?

  • # コメントアウトについて
    hosts ファイル編集の箇所でも説明しましたが、# 記号の部分(行)も含めて転写して構いません。
    こちらもコメントとして扱われるので、動作影響ナシ👌

# ~前略~ 
# ↑ 本来、この上に沢山ブワァーっと元の設定項目が記載羅列されてる筈です
# # 記号がある部分は、無視される行なので ペースト先にそのまま記載されても構いません
# この部分、改行を任意に挟んでも動作に影響はありません

# ▼ホスト名
<VirtualHost imas.cg:443>
    # ※ ここのフォルダパスは閉じないでね
    DocumentRoot "C:\imascg"
    # ホスト名
    ServerName imas.cg:443
    SSLEngine on
    # 証明書を配置した位置
    SSLCertificateFile "conf/ssl.crt/ore.crt"
    # 平文の秘密鍵を配置した位置
    SSLCertificateKeyFile "conf/ssl.key/ore_nopass.key"
    <FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars
    </FilesMatch>
    # こっちは通常スラッシュ
    <Directory "C:/imascg">
        SSLOptions +StdEnvVars
        Require all granted
        AllowOverride All
    </Directory>
    BrowserMatch "MSIE [2-5]" \
    nokeepalive ssl-unclean-shutdown \
    downgrade-1.0 force-response-1.0
</VirtualHost>


▼ こっちも(一応)やっておく

C:\xampp\apache\conf\extra\httpd-vhosts.conf を開き、
先程と同様、末尾にコピペ追記

# ~前略~
# ↑ 本来、この上に沢山ブワァーっと元の設定項目が記載羅列されてる筈
<virtualhost imas.cg:80>
  # こっちはバックスラッシュ
    DocumentRoot "C:\imascg"
    ServerName imas.cg
  # こっちは通常スラッシュ
    <Directory "C:/imascg">
      Require all granted
      AllowOverride All
    </Directory>
</virtualhost>

※ 2023/04/15 追記
<Directory "C:/imascg"> 内に AllowOverride の設定項目を一か所加えました

上記2つのファイルで
DocumentRoot "C:\imascg" および
<Directory "C:/imascg"> と記載された部分は、
先程の「モ○マスサイトに見立てるフォルダ、何処に置く?」ってやつです。


再びの起動 + 接続確認(仮)

XAMPP側を再起動し、Apache を Start させて、今回も特にエラー無く稼働したら、
成功は近そうです 😎

逆にエラーが起きたら、先の手順のどこかがおかしい...筈。

問題なさそうなら、そのまま一旦手打ち or →コピペhttp://imas.cg/ へ接続してください

  • http です。 https ではないので注意
  • 昨今のブラウザだと、ハンパな手打ちは強制的に https へ繋がされることがある
  • しっかり手打ちで確認ヨロシクオネシャス!!👍

もしここで 問題なく http://imas.cg/ のページに繋げたら第二段階も成功。
上手く行かない場合、hosts ファイルの書き換えが反映されていない可能性があるかも
( windows7とかでは起こり得た現象かも ← 再起動で反映される? win10では体感問題ナシ )

どんな表示になるか

<?php
phpinfo();

もし、上記内容で作成した c:\imascg\index.php ファイルを仕込んでいたのなら、
「php version なんちゃら」 みたいな、紫と灰色のなんかシステム説明的な表がブワーっと出るはずです。

それとは別に、空のテキストファイル名などを書き換えて c:\imascg\index.html として仕込んでいたのなら、
真っ白なページが出てくるはずです。

どっちも置いてたら...まぁ、どっちかが優先して表示されると思います (雑)

html 手書きで出来るぜ!!」みたいな方が居れば、その場所を使って 簡易HP開設ごっことかできます(?)

オレオレ証明書のインストール + 接続確認(最終)

先程作成した ore.crt ( C:\xampp\apache\conf\ssl.crt\ に出力・存在している筈 ) をダブルクリックで実行。

すると、証明書をインストールするか尋ねられるので以下手順に沿って進める

  • 「証明書のインストール」を実行
  • 保存場所は「現在のユーザー」で良い。
  • 選択項目「証明書をすべて次のストアに配置する」を選び「参照」を押す
  • 上から2番目「信頼されたルート証明機関」を選び、OK→次へ
  • そのまま順に進め、最後に「完了」を押してフィニッシュ😋

※ 下記、参考画像
別の技術記事を書いてるときに使ってた画像を使いまわしてます ( ̄∇ ̄;)

上記の証明書インストール処理を終えたら、
ブラウザ(Chrome)を一度すべて完全に閉じて再起動させる。
XAMPPのApacheも Stop⇒Start で起動しなおす

後はブラウザで https://imas.cg/ ( 今回はきちんと https ) に接続できればOK

ここでちゃんと https://imas.cg/ の仮ページも表示されたら、下ごしらえ完了です!! お疲れ様でした✨

※ 最終的に imas.cg へ繋ぐ時、
http であっても https であっても、表示される内容は同じになります。


改めての雑な仕組み・流れを説明

XAMPP は、Windows上で起動するサーバー(等の機能をざっくりまとめた)ソフト...みたいなものです
XAMPPを使うことで、自分のPC内だけでサーバーを立ち上げられます。

次に、imas.cg というドメインにアクセスしたとき、XAMPPで起動中のローカルサーバーへ繋がるような設定をこさえます。

これが先程の hosts ファイル および XAMPP 内部の .conf 設定ファイル書き換えに相当します。

しかし http で接続する分にはこの設定だけで良いのですが、
https で繋ごうとするとブラウザが「このサイト怪しくね?」と(ちゃんと)繋ごうとしてくれません。

この為、httpsで繋ぐ時も「ブラウザ君、このサイトは安全なんだよ?いいね?ワイが保証するから!」と、
強制的に説得させるためのファイルを作って、与える必要が出てきます。

これが、先程 .bat を使って作成したり、インストールした証明書に相当します
( 巷では「オレオレ証明書」「自己証明書」等と呼ばれています )


技術的言い訳等

static なファイルもとい file:/// スキーマだけで動かせたら一番ハードル低いんですが、
ブラウザセキュリティとか、現状のページ構成とか考えると やっぱローカルサーバーでないとアカンかなぁ..という次第で。
目的のページにアクセス・レンダリング等を考えると php とかの力も借りないと現実的じゃないように感じます。

統合された .json + .js の組み合わせで力技ってのもあるかもですが...どうなんだろう (@_@;)

サーバーだけなら他にも選択肢がありますが、過去少し齧ってた php が学習コスト低めだったり、
Windows機だと諸々載せ(All-in-one的なもの)の選択肢として XAMPP が馴染み深かったので、
そちらを採用(?)した次第です。

(主に検索機能で)ガチ目の再現する選択肢が出て来たら、今後DB使うかもわからんですし
面倒なんでやりたくない。もう全部jsにさせて。あっでもNode.js , Denoは馴染みが無い