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

2022-12-27

imcg

何に関する記事？

お察しください

何か気になる点・詰まってしまった部分あれば、件の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)後にエラーメッセージが出るらしい...？

https://pc-karuma.net/xampp-error-cannot-create-file-xampp-control-ini/
https://notes-de-design.com/website/tips/error-control-ini-xampp/
いずれか試していただけると。

一旦動作確認

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 へ変更します。

自己証明書作成御膳立て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
    </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
    </Directory>
</virtualhost>

上記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は馴染みが無い~~

プロフィール

このサイトについて