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

2022-12-27

imcg

何に関する記事？

お察しください

最終的に、何某かをローカルサーバー & 仮想ドメイン https://imas.cg/ にて稼働させます

容量目途

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

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

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

もっと突っ込んでいくと、親愛UP / 親愛MAX swf ぷちの構成画像系...
別カウントですが、ここに劇場や動画系も混ぜるともっと膨れ上がるのでしょうね...(；ﾟωﾟ)

運用・動作イメージ

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

上記設定が適切になされれば、PCブラウザから 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回くらい訊かれるかも？
通信許可を尋ねられたら プライベートネットワークにチェックを入れてください。
逆に、パブリックはチェックを外してください
パブリックは外向け(ネット上公開) と同義と思っていただければ。
プライベートネットワークだけにチェックが入っていることを確認したら、
「アクセスを許可する」で再びインストール作業を進めてください。

補足：ポートに関して

XAMPP(のApache)は、ポート番号 80 , 443 をデフォルトで利用します。
他のサーバー・通信系ソフトが占有したり競合を起こす可能性があるので留意してください
( ※ マイクラサーバーを公開して遊んでたり、何かのビデオチャットや会議ソフト等を使っていたり )

.ini のエラー対処

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 」的なページが現れたら、第二段階も成功。
現状サーバーとしてキチンと動いている筈です

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

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

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

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

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

仮ファイルで確認
以下をコピペしたテキストファイルを作成し、
拡張子(と名前)を ～.txt から index.php に変えたのち C:\imascg\ フォルダ内へ配置してください
( 確認を終えたら消してもOKです )
```
<?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\ore_v3_ext.txt に配置

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 を実行してください。
( .batの実行場所はワリとどこでも良いです。デスクトップとかでも。 )

.bat 実行にあたって
3回ほど、任意の同じパスワードを入力するシーンが出てきます。
キー入力を促されたら、最低4文字からの適当なパスを入力 → 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> セクションを増やすイメージ。 )

技術メモ
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再起動 + 接続確認(仮)

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\ 直下に何も仕込んでなければ、404とか403とかのエラーページっぽいのが出てくるかも？

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

.bat ファイルを使って先程作成した、
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 を使って作成したり、インストールした .crt 等の証明書に相当します
( 巷では「オレオレ証明書」「自己証明書」等と呼ばれています )

技術的言い訳等

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

プロフィール

このサイトについて