タイピングゲームを作る(SSH,WSL2,Laravel)

🤔構想

✅クライアント

開発フレームワークについて

Unityかp5.js

タイピングについて

✅サーバー

ChatGPTにmixhostで簡単に利用できる物

Laravel, CodeIgniter, yii, Bootstrap, CakePHP, Symfony, Zend, Kohana, UIkit, Smarty, FuelPHP, HTML Purifier, UserSpice, Webasyst, PRADO

の中から通信料が少なめのゲーム開発に使うならどれが良いか聞いたところLaravel(ララベル)となった。

👨‍🏫環境概要

  • クライアント
    • 案1
      • フレームワーク/言語:p5.js/JavaScript
      • 開発環境:VSCode + Live Preview
      • TypeScriptにする場合は、多分Node.jsなど面倒なことが増える
    • 案2
      • フレームワーク/言語:Unity/C#
      • 開発環境:VisualStudio
  • サーバー
    • フレームワーク/言語:Laravel/PHP
    • 開発環境:VSCode + WLS2 + Docker + SSH
  • デプロイ
    • mixhost
      • Webサーバー:LiteSpeed
      • フレームワーク:Laravel(スクリプトを使用して簡単インストール)

🚀環境構築

  • VSCode
  • WSL2
  • Docker
  • SSH

👨‍💻VSCode

適当なサイトを見ながらインストールする

🕋WSL2(Windows Subsystem for Linux 2)

WindowsでSSHやDockerを使用するのに必要。Macでは当然ながら必要ない。

✅参考サイト

✅インストール

  • Hyper-Vが必須になる(BIOSの設定が必要な場合もあり)
  • PowerShellを管理者として実行
wsl --install
  • 完了

✅使い方

  • LinuxからWindows資産へのアクセス
    cd /mnt/c/
  • WindowsからLinux資産へのアクセス
    \\wsl$\

🔒SSH(Secure Shell)

SSHでサーバーに繋げる場合の認証が必要になる

  • パスワード認証:安全性がいまいち。mixhostでは使用不可。
  • 公開鍵認証:パスワード方式よりセキュリティが高い。mixhostの場合コチラはOK。ユーザーは秘密鍵と公開鍵のペアを生成し、公開鍵をSSHサーバーに登録。接続時には、クライアントは秘密鍵を用いて自身を認証(デジタル署名)。ただし、mixhostではサーバー側で鍵のペアを生成するサービスも用意されている。
  • mixhostの場合、アクセス方式としてユーザー名/パスワード方式は許可されておらず、公開鍵認証(デジタル署名)でのみアクセスが許可されている。
  • SSHのクライアントについて
    • OpenSSH クライアント:Windows10の機能。追加インストール必要がある
    • LinuxのSSHクライアント:Linuxがあれば標準で使える
    • PuTTY:フリーのSSHクライアント

✅参考サイト

✅接続用の公開鍵について

  • mixhost側で作成してもOK
  • クライアント側(自分のPC)で作成してもOK
  • 秘密鍵の名前はデフォルトで id_rsa
  • 公開鍵の名前はデフォルトで id_rsa.pub
  • 秘密鍵にパスフレーズというパスワードを掛けることができる
    ※パスフレーズを設定するとSSH接続時に入力を求められる(めんどう)
    ※入力しないとセキュリティは低下するが入力しなくてもOK(らく)

自分で接続用公開鍵を作る場合

ssh-keygen -t rsa -b 4096 -C ""
ssh-keygen -t ed25519 -C ""

-t 暗号化方式(rsaやed25519)
-b ビット数(rsaの場合指定する)
-C コメント(""で無しにする。これをしないと自分のホスト情報が入って気持ち悪い)

✅鍵の設置

公開鍵はサーバー、秘密鍵はクライアントの指定の場所に設置

公開鍵(サーバー側)

  • 自分で作成した場合
    • mixhostであれば「cPanel」→「SSH アクセス」→「キーをインポート」
      キーの名前:id_rsa
      秘密鍵:空白
      パスフレーズ:空白
      公開鍵:作成したものを貼り付ける
      ※秘密鍵とパスフレーズが空白なのは、秘密鍵はインポートする必要がないから。
    • 一般的には
      ssh-copy-id <username>@<host>
      ssh-copy-id yuichi@192.168.1.80
      サーバー側のパスワード接続がOKになってないとできない。
      うまく行かない場合は/etc/ssh/sshd_configの項目を確認すること
  • mixhostで鍵を作成した場合
    • アップロード作業は必要ない
  • 公開鍵をアクティブ化する
    mixhostの場合は「cPanel」→「SSH アクセス」→「管理」→「authorized」ボタンを押す

秘密鍵(クライアント側)

  • ユーザーの.sshディレクトリ(~/.ssh/)に保存する
  • ディレクトリのパーミッションは 700 にすること
    chmod 700 ~/.ssh
  • ファイル(秘密鍵)のパーミッションは 600 にすること
    chmod 600 ~/.ssh/id_rsa

✅接続

mixhostで割り振られたユーザー名(xxxxxxx)とホスト名(yyyyyyy)が必要

ssh xxxxxxx@yyyyyyy.mixh.jp

パスフレーズを設定した場合は入力を求められる。合っていればログイン完了

接続コマンド入力を楽にする方法

  • 通常の使用方法ではユーザー名(xxxxxxx)を失念したり(mixhostの場合ランダムな英字だから失念してしまう😹)
  • ホスト名(yyyyyyy)も含めてタイプ数が多く面倒である。
  • そこで、接続を簡単にするためにconfigファイルを記述する

.sshディレクトリ内にconfigファイルを作る(~/.ssh/config

Host mixhost
    HostName xxxxxxx.mixh.jp
    Port 22
    User xxxxxxx
    IdentityFile ~/.ssh/id_rsa

configファイルがあると下記のように自分で決めたホスト名を入力して接続が可能となる。(パスフレーズを設定している場合はパスフレーズを入力必要はある)

ssh mixhost

🤸Laravel

✅参考サイト

✅準備

  • サブドメインの作成games.pasocafe.jp
  • mixhostへのインストール
  • cPanelのスクリプトから
  • 10.14.0をインストール
  • PHPのバージョンが低かったので、cPanelからMultiPHPマネージャーからPHP 8.1 (ea-php81)に変更
  • 無事インストール完了(ルートにアクセスすると定番の画面に転送された)

SSHの準備(いらないかも。cPanelのターミナルで代替)

Laravelの管理をするためにドメインにSSHでアクセスする必要がある。mixhostではcPanelでSSHがつかる。しかし、証明書の作成などが必要なので、下記の手順を踏むことにした。

https://help.mixhost.jp/hc/ja/articles/115003742132-SSH%E3%81%AE%E3%81%94%E5%88%A9%E7%94%A8%E6%96%B9%E6%B3%95

  • cPanelのSSHアクセスを開く
  • SSH キーを管理をクリック
  • 公開鍵の生成
    • キー名:id_rsa
    • キーのパスワード:適宜
    • キーのタイプ:RSA
    • キーのサイズ:4096
  • 公開鍵の管理からauthorizedにする
  • 秘密鍵をダウンロードする
  • ここからわからない

cPanelのターミナルを利用

コメントする