Webブラウザとクラウドサービスを使った遠隔仮想環境でゲーム用の低予算バックエンドを拵える話 （その２）
概要
ネットワークの事前知識がそれほどない（これから勉強していきたい！）という前提で、ゲームにネットワークの要素をなんとか低予算で導入したいと考えている方に向けて、地道に進めるバックエンド環境構築例を紹介します。途中、以下のサービスやテクノロジーが登場します。（記載内容は2021年10月中旬時点の情報となります）
- Google Cloud Platform(以下、GCP), Google Compute Engine(以下、GCE), Cloud Shell, Cloud Shell Editor
- Linux, Debian
- PostgreSQL, PhpPgAdimin, SQL
- Node.js, Expressフレームワーク, fsモジュール, node-postgres(pg)モジュール
- HTTP, HTTPS
実現すること
- 手元の開発環境(PC,ネットワーク)の影響を極力受けない状態でバックエンドを用意する（Webブラウザ=HTTP,HTTPSのみ、SSHクライアントは使用しない）
- アプリケーションサーバ（Webサーバ+サーバサイド言語処理環境）を用意する
- データベースサーバを用意する
- 各サーバ用のデータ作成とデータ編集が行える環境を整える
- お金（費用）はなるべくかけない
作業のステップ
作業をいくつかのステップに分け、順番に紹介してきます。
- 事前準備＋GCEで遠隔仮想環境を構築
- テキスト編集環境を用意する
- アプリケーションサーバを用意する
- データベースサーバを用意する
- 取り回しの良さを向上させる
2回目の今回は「テキスト編集環境を用意する」編となります。
前回のおさらい
まずは前回のおさらい。GCPのGCEで仮想環境を構築し、GCEの画面に見える「SSH」の文字をクリックします。
すると、表示されたのが次のような真っ黒な画面でした。今回はここからの続きとなります。
黒い画面の正体
この黒い画面は仮想環境を操作するための「コマンドライン」と呼ばれる画面です。（OSによってはコマンドプロンプトだとかターミナルだとか呼ばれます。）この黒い画面が起動しているということは、あなたの仮想環境への電源が入って無事に動き出した証拠です。仮想環境はこの黒い画面を使って操作します。
仮想環境はCUIが基本
普段使用しているWindowsやMacは、マウスでアイコンをクリックすれば直感的に操作できるグラフィカルな操作体系が当たり前でした。これをグラフィカル・ユーザー・インターフェース、略してGUIと呼びます。
これに対して、文字だけを使ってコンピュータを操作する体系をキャラクター・ユーザー・インターフェース、略してCUIと呼びます。（もしくはコマンドラインインターフェース、略してCLIと呼ぶケースもあります。当記事ではCUIに統一します）
「仮想環境もGUIにすればいいのに！！」と思うのは当たり前なことです。もちろん、仮想環境でもGUIを実現しようと思えば不可能ではありません。ただ、思い出してください。
- お金（費用）はなるべくかけない
GUIの実現には、実は高いマシンパワーとそれを実現するお金が必要です。今回構築した仮想環境では残念ながらGUIの実現は相当厳しいと言わざるを得ません。（逆にマシンパワーの低かった昔のPCはCUIが当たり前でした）
「そんな、殺生な・・・」と、感じるかもしれませんが頑張ってCUIでの操作を習得していきましょう。
最低限覚えるべき概念と操作
WindowsとMacのGUIが異なるように、CUIにも様々な種類のものが存在します。今回構築した仮想環境はDebian(Linux OS)ですので、それに関連した概念や操作方法をご紹介します。
ファイルパス
仮想環境内も一般的なPCと同じで、様々なデータがフォルダ(Linux,Mac文化圏ではディレクトリ)やファイルでストレージに保管されています。ファイルパスはどこにどんなファイルが保存されているかを文字で指定する手段です。
一般的なファイルパスの構造
一般的なファイルパスの構造は次のような形です。
| ルートの指定 | フォルダ構造の指定 | ファイルの指定 |
|---|---|---|
| /(半角スラッシュ)の１文字 | フォルダ名を/区切りで必要な階層分記載 | 目的のファイル名 |
例えば、次のように記載されている場合、
- /home/test_user/log.txt
次のような意味合いを持ちます。
- ルートフォルダ内のhomeフォルダ内のtest_userフォルダ内にあるlog.txtファイル
ルートフォルダはストレージの根本（WindowsでいうCドライブ）に当たる場所です。
絶対パスと相対パス
上記のようなファイルパスの書き方は「絶対パス」と呼ばれており、「ズバリこの場所！」を指定することには向いていますが、ディレクトリ構造が長くなる程、目的のフォルダやファイルを指定することが大変になります。そこで、ファイルパスには「今現在見ているフォルダ」の位置からファイルパスを記述する「相対パス」と呼ばれる書き方が存在します。例えば、あなたが現在「test_user」のフォルダを見ており、そこからlog.txtを開きたい時などは、
- log.txt
とだけ指定すれば。「/home/test_user/log.txt」と同じ意味合いを持つことが可能です。
特殊なパスの指定
相対パスによって、「今見ている場所の一つ上のフォルダ」を指定したり、「１フォルダ戻った後に別のフォルダの中に入って、その中のあのファイル」と指定したいケースがよく出てきます。そんな時には、次の記号をファイルパスの中に混ぜて下さい。
- ../(半角のドット2個と半角スラッシュ１個)
../(半角のドット2回と半角スラッシュ１個)は階層を１つ戻るという意味を持ちます。例えば、あなたが現在「test_user」(/home/test_user)のフォルダを見ており、そこから一つ戻ってanother_userフォルダの中のlog.txt(/home/another_user/log.txt)を開きたい時などは次のように指定します。
- ../another_user/log.txt
なお２階層上に戻りたい場合は、「../../」とファイルパスを書き出してください。
コマンド
- ファイルを探す
- ファイルを削除する
- ファイルを移動する
上記のような操作を実現したい場合は、CUIに用意された「コマンド」と呼ばれる命令を入力し、Enterキーで実行します。アプリケーションやツールの実行なども「コマンド」で行います。
コマンドの基本形、オプション
コマンドには様々なものが存在するため、使いながら少しずつ覚えていく必要があります。しかし、基本的な形状は皆似通っており、次の表で示す左側の要素から記入を行います。（稀にこのルールに当てはまらないものも存在します。都度、調べながら実行してみると良いでしょう。）
| コマンド名(必須) | コマンドのパラメーター(必須もしくは任意) | オプション1(任意) | オプション1のパラメーター（任意） | ・・・(略)・・・ |
|---|---|---|---|---|
| 使用したいコマンド名 | コマンド実行に当たって付与する情報 | コマンドの動作性質を変える指定。先頭にハイフンが1つか２つ付くことが多い | オプションの挙動を実現するに当たって付与する情報 | 他にもオプションがあれば続けて記載する |
なお、それぞれの項目間に半角スペースを挟みます。
実際、表だと少しわかりにくいと思いますので以下にいくつか例を記載します。
| コマンド例 | 意味 |
|---|---|
| ls | 現在見ているフォルダ内に存在するフォルダとファイルを一覧表示する |
| mkdir sample | sampleという名称のフォルダを作成する |
| cp --help | cpコマンドのヘルプ（使い方）を見る |
| gcloud --version | gcloudコマンドのバージョンを確認する |
| find /user -size +1024c | /userのファイルパス以下に存在する１０２４バイトより大きなファイルを検索する |
ではここで、よく使用するコマンド・覚えておいた方が良いコマンドをご紹介します。
cdコマンド
階層を移動するコマンドです。WindowsやMacなどのGUIでフォルダをクリックしてその中身を見る（中身へ移る）という行動と一緒です。コマンドのパラメータとして、移動先のファイルパスをセットで必ず指定する必要があります。ファイルパスは絶対パス・相対パスのどちらを使用しても問題ありません。
| コマンド例 | 意味 |
|---|---|
| cd user | 今見ているフォルダ内のuserフォルダの中へ移動する(相対パス指定) |
| cd ../ | 今見ているフォルダのひとつ上の階層に戻る(相対パス指定) |
| cd /user/sample/logs | /user/sample/logsフォルダへ直接移動する（絶対パス指定） |
pwdコマンド
現在の階層を表示するだけのコマンドです。今どのフォルダを見ているかわからなくなった時に使うと良いです。
| コマンド例 | 意味 |
|---|---|
| pwd | 現在見ているフォルダが絶対パスで表示される（例： /home/user1 ） |
mkdirコマンド
新しくフォルダを作成するコマンドです。作成後にcdコマンドを使って出入りしてみましょう。
| コマンド例 | 意味 |
|---|---|
| mkdir test | testという名称のフォルダを現在見ている場所に追加します |
exitコマンド
仮想環境をシャットダウンします。仮想環境を起動させたままでいると使用料が取られるケースもあります。何もさせる必要がない場合は、シャットダウンしても良いでしょう。
| コマンド例 | 意味 |
|---|---|
| exit | 仮想環境をシャットダウン |
sudoコマンド
「他のコマンド」の前につけて使う特殊なコマンドです。このコマンドを「他のコマンド」の前につけた場合、「管理者権限の元」に「他のコマンド」を実行します。DebianをはじめとしたLinux OSでは「権限」（誰がインストールして良い、誰が削除して良い、誰がファイルに触って良い）を厳密に管理しています。例えば、この後紹介する「ファイルをインストールするコマンド」などは、強い権限を持つユーザーにしか利用できません。個人開発であればそこまで問題になりませんが、複数人で同時に１つの仮想環境を操作するケースがビジネスの場では発生します。sudoは非常に大事な意味合いを持つコマンドであると覚えておきましょう。
今後も時折登場しますが、使い方に関しては割愛します。
gcloudコマンド
GCPに関連する操作をCUIで行うための特別なコマンドです。今回構築した仮想環境上のOSであるDebian（Linux OS)にGoogleがプリインストールしています。普段使っているPCにインストールすることも可能です。gcloudコマンドを使って出来ることは多岐に渡るため、ここでは多く語りません。必要が出た時に再度説明します。現時点では「gcloudコマンドと呼ばれるものが存在する！」程度の認識で問題ありません。以下のコマンドは実行してもプロパティ（とあるパラメータ）が表示されるだけです。動作テストとして入力してみても良いでしょう。
| コマンド例 | 意味 |
|---|---|
| gcloud config list | cloud sdkのプロパティを表示する |
パッケージマネージャー
仮想環境の中身を充実されるためにこれから様々なソフトウェアを追加でインストールする必要が生じます。では、CUI上で新しくソフトウェアをインストールしたり、削除したりするためにはどのようにすれば良いのでしょう？その答えとなるのがパッケージマネージャーです。
aptコマンド
DebianにはAdvanced Package Tool（略してapt)と呼ばれるパッケージマネージャーがプリインストールされています。このAdvanced Package Toolを操作するために利用するのがaptコマンドです。早速aptコマンドをいくつか実行してみましょう。
現在インストールされているソフトウェアの一覧を表示する
Debian上にプリインストールされているソフトウェアを確認してみましょう。次のコマンドを入力して、Enterキーで決定してみます。
| コマンド例 | 備考 |
|---|---|
| apt list --installed | インストール済みのパッケージ（ソフト）を確認する |
今回構築した仮想環境では次のように表示されました。プリインストールされているソフトウェアは意外と多く、画面に収まりませんでした。
個別のソフトウェアの状況を確認する
個別のソフトウェアの内容を確認したい場合は、次のようなコマンドを入力します。
| コマンド例 | 備考 |
|---|---|
| apt show <package> | <package>にはパッケージ名を指定する |
パッケージ名は「apt list --installed」で表示されたリストの一番左に緑色で記載された文字のことを指します。例えば、「apt show adduser」と入力したところ。次のような結果が表示されました。
ソフトを新しくインストールする
ソフトウェアを新しくインストールする場合は、以下のコマンドを入力します。詳しくは、インストールしたいソフトウェアの公式サイトへ行き、Debian（もしくはLinux 0S）へのインストール方法のページを探してください。そちらの記載方法を実行する方が確実です。
| コマンド例 | 備考 |
|---|---|
| apt install <package> | <package>にはパッケージ名を指定する |
実際のところ、install時には上記のコマンドを入力するだけではエラーとなることも多く、様々な「オプション」や前述した「sudo」コマンドつけるケースが多いです。以下はジョークソフトの「cmatrix」を実際にインストールしてみた例です。
sudo apt install cmatrix
途中何かしらの質問がされる場合もありますが、質問内容に合わせてy(Yes)もしくはn(No)と入力してEnterキーを押して決定してください。（特に何も考える必要がない場合は、yとガンガン入力していきます）
次の画面はインストールが成功後、「cmatrix」コマンドを実際に実行した画面です。control+cボタンで終了できます。
なんかの映画でみたことあるようなないような・・
その他のaptコマンド
パッケージマネージャーには取り上げたコマンド以外にも様々な機能が備わっています。必要になったところで、「aptコマンド Debian 使い方」などのキーワードで検索を行なってみてください。
テキストエディタ
さて、パッケージマネージャーが理解できたところで重要なソフトウェアのインストールをどんどん進めたいところではあります。がしかし、その前に一つ大事なソフトウェアの使い方を覚える必要があります。それは「テキストエディタ」です。
今後アプリケーションサーバやデータベースサーバのソフトウェアをインストールして様々な設定を変更していきます。しかし、ここで思い出してください。Debian（Linux OS）はCUIです。WindowsやMacのように「ウィンドウ」、「メニュー」、「ボタン」や「チェックボックス」のようなものは存在しません。
ではどのように設定を変更するのかというと、Debian(Linux OS)では多くの設定がファイル上にテキストで保存されており、設定を変更したい場合は該当するファイルを開いて「編集」→「上書き保存」を行います。こういった理由で「テキストエディタ」は重要度がかなり高いソフトウェアであることがわかります。
プリインストールテキストエディタ
Debianには次の２種類のテキストエディタがプリインストールされています。
- vim
- nano
どちらも使いこなせれば強力なテキストエディタですが、当記事では「nano」を使用します。「nano」は「vim」に比べれば制約が多く、日本語入力にも不向きです。しかし、他OSのテキストエディタと遜色ない使用方法が可能なため、どんな方でもスムーズに利用できると思います。基本的には英数字記号の編集用途と割り切ってしまうと良いでしょう。
テキストエディタnanoを起動する
テキストエディタnanoの起動は簡単です。プリインストールされているので、前述のcdやaptと同じく「nanoコマンド」を実行すれば良いだけです。
| コマンド例 | 備考 |
|---|---|
| nano <file> | <file>には任意のファイルパスを指定する。aで指定したファイルをnanoテキストエディタで開きます。 |
以下が「nano /home/username/sample.txt」(usernameの部分は人によって違います。pwdコマンドなどでチェック。)を実行した際に表示される画面です。存在しないファイルをファイルパスに指定すると新規にファイルが作成されます。
テキストエディタnanoを起動した直後の画面
nanoを起動中はDebianの操作内容が一旦隠れて見えなくなりますが、nanoを終了すれば再度表示されます。
基本操作（編集、保存）
覚えた方が良い基本的な操作は以下の通りです。
| やりたい事 | 操作方法 |
|---|---|
| カーソルを移動する | 上下左右キー |
| 文字を消す | BackSpaceキーもしくはDeleteキー（どちらもカーソルの前にある一文字を消去） |
| テキストの保存をする | ctrl+o(オー)。下側の表示が変わり「次の操作」を求められますがそのままEnterキーを押します。やっぱり保存したくない時はここでctrl+cを入力しましょう。 |
| nanoを終了する | ctrl+x。変更を少しでもして保存せずに終了しようとすると保存するか聞かれます。それでも終了するときはnキーを押してください。 |
一部の操作はnanoを起動中に画面下に表示されますので、迷ったら確認してみてください。（^はWindowsならctrlキー、Macならcontrolキー。MはWindowsならAltキー,MacならOptionキーとなります）
勘違いしやすい操作
WindowsやMacのテキストエディタに慣れていると以下にあげる操作を間違って行いがちです。残念ながらnanoでは別の操作となってしまいますのでご注意ください。
- アンドゥ＆リドゥ ： ctrl+z,ctrl+yなどで出来ません。
- コピー＆ペースト ： ctrl+c,ctrl+vで出来ません。
- 保存 ： ctrl+sで出来ません。
操作を間違えたと思った場合は、何も保存せずにnanoを終了する（ctrl+xだけ）すると良いです。
nanoについてもっと詳しく知りたい
基本操作についてもう少し知りたい場合は、以下のリンクが参考になると思います。
その他に知っておくと良いこと
さて、テキストエディタnanoについてご紹介しましたが、サッと修正することには向いていそうですが、プログラミングなどのガッツリとした編集には向いていなさそうです。
そこでGCPならではの機能となりますが、自身のPCと仮想環境との間でファイルのアップロードとダウンロードを行う操作をご紹介します。大きな編集を行う必要がある場合は、この機能を利用して必要なデータをダウンロードし、手元のPCで編集した後にアップロードする形の方がおすすめです。
ファイルの転送
ファイルの転送が行いたい場合は、コマンドラインの右上にある「歯車のマーク」をマウスでクリックします。この「歯車のマーク」、実は本来のコマンドライン画面に存在しません。GCPがコマンドラインの上に重ねて利用できるようにしている特別な機能となります。
歯車のマークを丁度クリックしたところ
ファイルをダウンロード
歯車のマークをクリックすると、「ファイルをダウンロード」の表示があります。これをクリックすると以下の画面が表示されます。
「完全修飾ファイルパス」とは当記事における「絶対パス」と同義です。例えば、「/home/test_user/log.txt」のテキストファイルをダウンロードしたい場合は、その通りに入力すれば良いだけです。入力後に「ダウンロード」ボタンをクリックすれば、Webブラウザで画像や音楽をダウンロードする行為と全く同じ感覚でダウンロードが開始されます。
ファイルをアップロード
歯車のマークをクリックしたところで、ダウンロードと同様に「ファイルをアップロード」の表示も目にしたことでしょう。これをクリックすると以下のような画面が表示されます。
Mac上のWebブラウザから操作を行なっていた場合の画面
必要なファイルを選択し、「開く」ボタンをクリックするとアップロードが開始されます。なお、ファイルがアップロードされる場所は、仮想環境上で現在あなたが見ているフォルダ上になります。コマンドラインを操作して事前にアップロード先へ移動しておくか、当記事では取り上げませんでしたがアップロード後にファイルを移動するコマンドを実行してみても良いでしょう。
まとめ
仮想環境の基本的な操作方法とテキストエディタの利用方法がわかりました。
次回、Webブラウザとクラウドサービスを使った遠隔仮想環境でゲーム用の低予算バックエンドを拵える話 （その3)ではいよいよアプリケーションサーバ（ユーザーとサーバをつなげる機能）の導入です。
Discussion