Zenn
🚀

いちから伝えるwebシステム開発③ 環境構築編(仮想環境とかSSHとか)

2023/02/25に公開
初心者
教育
Debian
環境構築
vurtualbox
tech

前回記事の続きです。
いちから教えるwebシステム開発マニュアル② ソフトスキル編

ここからはハンズオン形式で説明を進めていこうと思います。

ハンズオンの取り組み方について

🔰 研修対象者

(過去の自分が教わったこと)

  • 説明の内容が難しすぎると感じたら一旦サッと流し読みして進んでも大丈夫です。
  • もし質問できるメンターや先輩方がいれば、気になることや分からないことはどんどん聞いてみましょう💡
  • 自身が感じた疑問をチャットなどオープンな場でみんなで共有することが大切です。
  • どんなささいなことでも質問できる人はえらい🎉
  • 分からないことを分からないと言える人はえらい🎉
  • 少しずつ検索で分からないことを自己解決できる範囲を広げることを意識しましょう。
    エンジニアは毎日何かしら検索して過ごしています。そのため、的確なキーワードで検索し素早く・適切に問題解決できるスキルはとても大切です(いい感じに検索するって案外難しいのです)

🤓 メンター・先輩

(ほぼ自分用の覚え書き)

  • 新人さんのレベル感や研修スケジュールを加味して、実際に環境構築を手を動かして進めてもらう or あらかじめ用意した環境を配布するかを検討する必要がありそうです👀
  • 本記事ではLinux操作など細かい説明を省いている箇所があります。その辺りの内容で質問が出たら、ヒントとなるキーワードを伝えて実際に検索してもらったり、自分ならこういう検索の仕方で情報を集めるよという形で手を動かしてもらって・見て覚えてもらうのも良いと思います。
  • ↑のような取り組みを通して、問題解決能力の基礎になる適切に検索する能力を身につけてもらうことが最優先かなと思います。
    具体的な知識は調べればすぐ分かるので、まずは調べる力をつけてもらって自己解決の精度を上げていく方針で行くのがよさそうです。
  • 忙しかったり、間が悪く手が離せずすぐに質問対応ができないこともあると思います。そういうときはテキストチャット・オープンチャンネルでの非同期コミュニケーションをフル活用して、他メンバーとの連携で対応できる体制があれば場を凌げるかもしれません。
    即座に回答できなくてもざっと質問内容の概要だけ聞いてみて「○分後に手が空きそうなのであとで詳しく聞かせてくださいね」・「○○さんなら知ってるかも」的に返答して自身のタスクとのバランスを取りつつ対応にあたりましょう(自分で書いててなんですが、めちゃ難しいですねこれ・・・)

今回の目標

  • VurtualBoxのインストール
  • Linux(debian)の導入・初期設定
  • Visual Studio Codeのインストール

VurtualBoxのインストール

VurtualBoxはwindowsではない、別な環境(Linux)をwindowsの中に擬似的に作成するためのツールです。
なぜLinuxの環境が必要なのか？
それは、世の中の大半のシステム(サーバー)はLinux上で動作しているためです。
windowsとLinuxでは様々な面で仕様の違いが存在します。そのためwindows環境で開発したシステムを何の対策もなくそのままLinux上に持っていくと、想定通りの挙動をしてくれないことがあります。
じゃあ初めからLinuxの環境で開発しちゃおう！というのがLinux仮想環境を作成・利用する理由です。

というわけで作業を始めましょう。

まず↓からインストーラをダウンロードします。
https://www.oracle.com/jp/virtualization/technologies/vm/downloads/virtualbox-downloads.html

Windows版を選択します。

インストーラのexeを実行すると、セットアップウィザードが表示されます。
今回は全てYesを選択し、インストールを実行します。

インストールが完了したらすぐに起動するかどうかを聞かれるので、起動を選択します。

DebianのISOイメージをダウンロード[1]

Debianは数あるLinuxディストリビューションの内のひとつです。[2]
Linuxの仕組みについての詳細説明は割愛しますが、下記記事に概要が記載されています。
https://linuc.org/study/knowledge/337/

ダウンロードはこちらから行います↓
https://www.debian.org/CD/netinst/

amd64を選択します↓

VurtualBoxで仮想マシンを作成する

VurtualBoxマネージャーのメニュー > 仮想マシン > 新規を選択

Name and Operating System

  • 名前は任意ですが今回は hands_on_lamp_env にします。
  • フォルダはデフォルトで。
  • ISOイメージは、先ほどダウンロードしたDebianのISOイメージを選択します。
  • タイプはLinuxを選択。
  • バージョンは Debian 11 Bullseye (64-bit) を選択します。

unattended Install

ゲストOS(Debian)の自動インストールのセットアップ設定です。

  • ローカル開発環境なので、Username, Passwordは自由につけて大丈夫です。
  • Hostnameはとりあえず localhost にしておきましょう(たぶん日本語表記でなければ何でも大丈夫です)
  • DomainNameもデフォルトのままでOKです。
  • Install in Backgroundのチェックはつけないでおきます。

ここまで入力したら完了ボタンを押して次に進みます。

色々処理が走って時間がかかりますので、お茶でも飲みながらしばし放置します🫖

完了すると、Debianのログイン画面が表示されます。が、ここではまだログインはせずそのままにしておきましょう(後ですぐに再起動するため)

VurtualBoxマネージャーのメニュー > 仮想マシン > 設定 > ストレージを選択

  • コントローラ:IDE配下の💿マークをクリック・属性 > 光学ドライブ項目の💿マークをクリックしディスクファイルを選択の中から先ほどダウンロードしたDebianのISOイメージを選択
  • live CD/DVDにチェックを入れてOKボタンを押す

仮想マシンを再起動します。リセットをクリック。

もう一度Debianにログインします。するとDebianのGUI画面が表示されます。
画面の左上 Activaties をクリックするとデフォルトのアプリケーションアイコンが表示されます。

ネットワークの疎通を確認してみましょう。FireFoxを立ち上げ、適当にGoogle検索を試みます。

特に何も設定はしていないのですが、Debianから外部へHTTP通信が出来ることが確認できればOKです。


☕️ 余談: Debian側からは通信できたけどその逆は？
実はこのままでは、Debianの外部からDebianへアクセスすることは出来ません。
例えばMacならデフォルトでセットされている”ターミナル.app”やWindowsであれば”PowerShell”, "TeraTerm"などからSSH通信でDebianにログインを試みようとしても接続エラー・もしくは接続拒否となってしまいます。
SSH通信の説明及び対処方法については後述しますが、今はひとまず「へーそうなんだー」と思ってください。

☕️ 余談2: Debian内のアプリケーションを使う方法
画面の左上 Activaties をクリックすると、画面中央上に検索フォームがあります。
今後度々使用することになりますが、"teraminal"で検索・アイコンをクリックするとターミナルが起動します。
また、画面左側のアプリケーションアイコンの一番下のアイコンをクリックすると、現在インストール済みのアプリケーションの一覧が表示されるので、そちらから開いても構いません。

🛠 Debianの設定

Debianの最新化

ターミナルから下記コマンドを実行します。するとroot権限のパスワード入力を求められるので、入力してrootユーザーに切り替えたらupdate, upgradeコマンドを実行します。

su (←ここでパスワード入力を求められる)
sudo apt update
sudo apt upgrade


このようにコマンドが実行されれば成功です。

vim　のインストール[3]

debianの標準エディタは"nano"となっています。今回はvimをインストールして使うことにします。
vimはTips系の記事が比較的多く、不明点があっても調べやすいので採用しました。

apt install -y vim

⌨️ キーボード設定: 日本語入力・表示が出来るようにする

ちなみに先ほどgoogle検索で"dog"と検索することは出来ましたが、
実は今のままでは"いぬ", "犬"と言った日本語入力を行うことが出来ません。
また、このままだといくつか入力できない半角記号があります(”^", "~", "_"など)
不便なので、Debian内での操作を行いやすくするための設定を入れます。

・入力設定
ターミナル上でrootユーザーに切り替えて下記コマンドを実行します。日本語関連パッケージのインストールです。

su
cd ../../
apt -y install task-japanese locales-all

画面右上の▼アイコン > settingをクリックします。
Region & Language画面で、Formatsの項目を、United　States(English)から日本に変更します。
また、Input Sourcesは下記の通り設定します。

この設定が完了すると、画面上部のメニューバーに入力言語設定が表示されるようになります。ここから”Japanese”を選択しましょう。これで一般的なJIS配列のキーボードと同じようにキー入力できるようになります。

続いて下記のコマンドを実行します。
”日本語(かな漢字)”での入力を有効にするための設定です。

apt -y install task-japanese-desktop ibus-kkc

・表示設定
システムの文字セットを日本語に変更します。

localectl set-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja"
source /etc/default/locale

↑sourceコマンドでシステム設定の反映を行っています。

設定が反映されたか見てみましょう。

echo $LANG

ja_JP.UTF-8 と表示されれば成功です。

試しにターミナル上のメッセージが日本語表示になるか見てみましょう。

php -v

まだPHPの設定作業は何も行っていないので、バージョン情報は何も出てきませんが、今は日本語でメッセージが表示されることが確認できればそれでOKです。

設定を終えたら、画面右上の▼アイコンからDebianを再起動します。ここまでに設定した内容を反映させるためです。

💀 ログインがうまく出来ない・・・
パスワード入力時、なぜか認証がうまく出来ませんでした。

😇 入力ソースの設定を見直す
この場合、画面上部メニューの入力言語モードが"日本語(かな)"になっている可能性があります。これを日本語に変更して改めてパスワード入力をしましょう。

ログインに成功すると、下記のようなメッセージが表示されますが特に必要ないので"古い名前のままにする"を選択します。


🔌 SSHできるようにする

SSH(Secure Shell)
リモートコンピュータと通信するための手順・ルールです。
また、そういった手順・ルールのことを"プロトコル"と呼びます。

ではSSHを利用してホスト(windows)側からゲスト(Debian)側へ通信するための設定をしていきましょう。

  • openssh-server　のインストール
    Debian自体がSSH通信出来るように必要なパッケージをインストールします。
    3回コマンドを入力します。
apt install -y openssh-server
sudo service ssh restart
ssh -V

上から順に、

  • パッケージのインストール実行

  • 設定を反映させるためopenssh-serverの再起動を実行

  • sshのバージョン情報を確認(正常にインストールできているかの確認のために行なっています)
    バージョン情報が表示されれば、ここまではOKです。

  • SSH設定ファイルの編集
    Debian上でrootになった状態で、設定ファイルを編集します。
    いくつか設定項目があらかじめ書かれているのでその内のいくつかを書き換えます。

su
vim /etc/ssh/sshd_config

以下vimエディタでの操作です↓

#Port 22
↓
Port 24 (先頭の"#"を取る・22以外の数値ならなんでもOKです)

#PermitRootLogin yes
↓
PermitRootLogin no (先頭の"#"を取る・ホストから直接rootでログインできなくします)

#PasswordAuthentication yes
↓
PasswordAuthentication yes (先頭の"#"を取る)

編集内容を保存(esc→:wq→Enter)してvimエディタから抜けます。

sshdを再起動し、さきほど編集した内容をシステムに反映させます。

systemctl restart sshd
  • TeraTerm[4]のインストール
    下記からインストーラをダウンロードし、セットアップウィザードに従ってインストールを進めます。
    最新版のexeを選択していきます。
    https://ja.osdn.net/projects/ttssh2/releases/

オペレーティングシステム: Windows 7, Windows 95/98/ME, Windows NT/2000

との記載がありますが、windows10でも問題なく動作するので大丈夫です。

  • TeraTermでDebianにSSHしてみる
    接続先の情報を入力していきます。
    今回であれば下記の通り入力します。

  • ホスト: <ユーザー名>@<IPアドレス（またはホスト名）>の形式で入力します。
    IPアドレスは、Debian上で ip aコマンドで表示される”enp0s8”項目内の”inet”の内容を使用します。

  • TCPポート: Debian上で編集した etc/ssh/sshd_config 内のポート番号を使用します。

そのほかの項目は特に変更せずOKボタンを押すと、ログインに必要なパスワード入力を求められますので入力します(本記事のVurtualBoxで仮想マシンを作成する > unattended Installで設定したパスワードを使用します)
この画面ではパスワード入力以外特に何も設定しなくても大丈夫です。そのままOKを押します。


成功すればこのようにwindows上でDebianに対してSSH接続ができるようになります。
以降、Debian上での操作はこのTeraTermと後述するVisual Studio code(vs code)によるSSHで行います。

💀 トラブル: 接続が出来ない・接続拒否される・・・
↓
😇 対処方法・確認すべき点
まず確認すべきはDebian内の etc/ssh/sshd_config です。
ここで本当に正しく設定の編集が行われているかを確認しましょう。
また、TeraTermでの各接続情報の入力に誤りがないかもチェックしてみましょう。


☕️ 余談1: TeraTerm以外のターミナルツールではSSH出来ないのか？
本記事作成時、TeraTermと同じことを、コマンドプロンプト・PowerShellでも試してみたのですが、接続がうまくいきませんでした。
Windows側で然るべき設定を行えばSSH可能なはずなのですが、解決策が分からず今回はTeraTermでの紹介とさせていただきました(なぜ出来ないんだ・・・謎ですが、解決したらいずれ記事化します)
なお、GitBashでは成功しました(ますます意味がわからない)

☕️ 余談2: TeraTermでコピー・ペーストする
一般的にテキストのコピー・ペーストのショートカットは ”ctrl + c”, ”ctrl + v” ですが、
TeraTermではちょっと違っていて "alt + c", "alt + v" となっています。
コマンド操作でもテキストエディタでのコーディングでも、typo(タイプミス)はなるべくしたくないものです。
可能な限り手打ちよりも、適切にコピー・ペーストや入力補完機能を活用していくのが良いと思います💡

🛠 CUIモードでDebianを使う

今後DebianでGUI操作をする必要がなくなるので、CUIをデフォルトに設定します。
TeraTermから、あるいはDebianのターミナル上で下記コマンドを実行します。

su
systemctl set-default multi-user.target

成功すれば下記のようなメッセージが表示されます。

Created symlink /etc/systemd/system/default.target → lib/systemd/system/muiti-user.target

Debianの電源をオフにします。
Debianのウィンドウが閉じ、VurtualBoxマネージャ画面上で仮想マシンのステータスが"電源オフ"となっていれば問題ありません。この状態でVurtualBoxマネージャから通常起動し直します。
これまでと違い、CUI画面の状態でDebianが立ち上がっていれば成功です。
ユーザー名とパスワードを入力してログインすれば、これまでDebian画面の左上のActivaties(アクティビティ) > Terminal(端末)でやっていたことと同様の操作が出来るようになっています。

以降、Debian内の設定ファイル編集やシステム全体に関する設定は、TeraTermでSSHしてコマンドで操作を行なっていきます。

💀 トラブルその1: 入力した文字の表示が崩れる・ログインできない
ログイン時、ユーザー名とパスワードの入力を求められるのですが、入力した文字が"♦︎♦︎♦︎♦︎"のように表示され何度試しても認証に失敗してしまうことがあります。

😇 解決策: 再起動してみる
VurtualBoxマネージャ画面側からDebianを再起動してみましょう。
理由を説明するのが難しい(というより分からない)のですが、本記事執筆時では再起動でトラブル解消できました。何が良くなかったんでしょうか・・・誰か教えてください・・・🙇

💀 トラブルその2: TeraTermで文字化け発生
Debianに日本語表示用のパッケージをインストールしているので、TeraTermで設定した表示文字のフォントが日本語対応しておらず文字化けしている可能性があります。

😇 解決策: 日本語対応の文字フォントに変更する
メニュー > 設定 > フォント > フォントを開き、文字セットが日本語選択できるものを選びましょう。


☕️ 余談1: 逆にCUi→GUIに変更したい場合
コンソール上で

sudo systemctl set-default graphical.target

を実行しDebianを再起動します。これで元の通りDebianのデスクトップ画面が表示されるようになります。

☕️ 余談2: なぜGUIモードを使わないのか？

  • 画面描画を行う分、処理コストが上がる・動作が若干ですが重くなります。
  • VurtualBox越しに立ち上げた時に開かれるウィンドウで操作を行うことがほぼないため(不可能ではないですがかなり不便です)
    → VurtualBox上で画面サイズ設定を行ったり・Windows〜Linux(Debian)間でのテキストのコピーペースト設定が面倒。
    特にコピーペーストができないのは極めて厄介です。typoでうっかりコマンド入力ミスしてしまうと予期せぬエラーの原因にもなるため、可能な限りコマンドの手打ち操作は避けたいところです。

Visual Studio Code(vscode)

今後ソースコードはテキストエディタを使って書いていきます。
今回は無料で使えて、動作が軽くて、豊富な拡張機能が揃っているMicrosoft製テキストエディタであるVisual Studio Codeを使って説明を進めていこうと思います。[5]

☕️ 余談: 有償IDEについて
もしお金をかけても構わない、または会社がライセンスを購入してくれるのであれば、
PhpStorm等のJetBrains製IDE[6]の使用を強くおすすめします。
有料なだけあって強力で便利な機能が多く備わっており、vscodeで同じような開発環境を整えるよりもはるかに設定作業の手間が少なく済みます。
そういった設定作業は多少面倒だったりある程度知識が必要だったりするので、むしろ初学者ほどIDEの恩恵を積極的に受けて快適な開発環境で作業が出来るのが望ましいのかな、と思います。
https://www.jetbrains.com/ja-jp/phpstorm/


vscodeのインストール

↓こちらからWindows8, 10, 11用のインストーラをダウンロードします。
https://code.visualstudio.com/download

拡張機能: Remote-SSHのインストール

vscodeを起動し、Remote-SSHの機能を設定します。
これはWindows側のvscodeからVurtualBoxで作成したDebianに対して、SSH接続するためのものです。
TeraTermでやったことと基本的には同じですが、これによってのvscodeからDebian側のソースコードの内容の参照や編集をできるようにしていきます。

vscode左側の拡張機能アイコンをクリックし、検索フォームで適当に"ssh"と入力して検索します。
すると上位にRemote-SSHが出てくるのでそれをインストールします(Microsoftが配布しているものを選びます)

インストールが完了したら、ctrl + shift + P でvscode操作ショートカットを開き、
フォームに"ssh"と入力します。
すると、”Remote-SSH: Connect to HOST...”が出てくるので選択します。
次に"select configured SSH host or enter user@host"という表示が出てくるので、"+ Add New SSH Host..."があるのでそれを選択します。

ssh -p 24 dev@192.168.56.11

と入力してEnter。
すると設定をssh/connfigに保存できるので実行します。

もう一度ctrl + shift + P で”Remote-SSH: Connect to HOST...”を選択すると、
接続先のOSの選択肢が出るのでLinuxを選択します。
次にfingerprint[7]に関する質問をされるので"continue"を選択します。

続いて、Debianにログインするためのパスワードを求められるので入力します。
入力してログインに問題がなければ、Debian側にvscode用のSSH接続に必要な情報がインストールされますのでしばし待ちます。
インストールが終了すると、接続が完了します。

(たまに接続に失敗することがあるのですが、Retryを選択してもう一度接続を行うと大抵の場合問題なく接続できます)

ちなみに画面の下部にターミナル画面があるように、vscodeからでもTeraTerm同様コマンド操作ができます。

これでコードを書く準備は完了です！


☕️ 余談1: 接続情報の管理について
さきほどssh -p ~~~したときに設定を保存しましたが、保存先のssh/configファイルをのぞいてみると

Host 192.168.56.11
    HostName 192.168.56.11
    Port 24
    User dev

このように接続情報が追記されています。
これによってvscodeを閉じたあと再度SSH接続するとき、
”Remote-SSH: Connect to HOST...”の選択肢に新たに"192.168.56.11"が追加されているはずです。以降はその選択肢を選択してログインパスワード入力するだけでSSH接続できるようになります。
また、configに追加された情報の1行目 Host 192.168.56.11 とありますが、これはvscode上で↑の接続先選択肢の表示名になります。
接続先が1つであればそのままでも特に困ることはないのですが、接続先が複数ある場合は管理が煩雑になりがちです。
そういう時は

Host hands_on_develop_env

とか

Host Debianの実験用サーバー

のように命名しておくと便利です💡

☕️ 余談2: vscodeの拡張機能について
vscodeにはRemote-SSHの他にも非常にたくさんの便利な拡張機能が存在します。
自身の使用する言語や開発スタイルに合わせて自由にカスタマイズできるので、色々試して使ってみるのが良いでしょう。入れてみたけどやっぱりいらないな、と思ったら簡単にアンインストールできます。
ネットで検索するとおすすめ拡張機能の情報がたくさん出てきます。

次回予告

ここまでの環境構築作業、大変お疲れ様でした！
しかしこれで早速開発ができる・・・というわけにはいかず、まだ必要な作業が残っています。

次回は

  • PHP8.2.3の導入
  • Apache2.4.54の導入
  • composerの導入
  • node.js, npmの導入
  • MySQLの導入

使用するプログラミング言語(PHP)・それを動作させるためのwebサーバー等・開発に必要なパッケージ管理ツール、そしてデータベースの用意を行います。

コードを書き始める前にこんなにやらなきゃいけないことがあるのか・・・と感じた方もいるかもしれませんが、
すみません・・・環境構築とはそういうものなのでもうしばらくお付き合いください🙇

脚注

  1. OSのインストールに必要なデータ一式が収められたアーカイブファイルを指します(拡張子 .iso )
    このISOイメージを使ってVurtualBox内に仮想のLinux環境を作ります。 ↩︎

  2. Linuxの仕組みについての詳細説明は割愛しますが、下記記事に概要が記載されています。
    https://linuc.org/study/knowledge/337/ ↩︎

  3. vimはキーボード操作のみで完結したシンプルなテキストエディタです。マウス操作が一切できないため最初は扱いにくいですが、慣れると使い勝手の良さもあり、中にはあらゆるコーディングを全てvimで行う人もいます。vimの他だとEmacsを使用する人もいます。 ↩︎

  4. windows向けターミナルソフト。SSHやtelnet・シリアルの各通信プロトコルに対応しています。同じことができるのであればTeraTermでなくても何でも大丈夫です。 ↩︎

  5. 使用するテキストエディタ(またはIDE)は、メモ帳だろうとサクラエディタだろうとEclipseだろうとなんでも構いません。最も自分にとって使いやすいものを選びましょう。 ↩︎

  6. IDE(統合開発環境)はテキストエディタ機能に加え、デバッグ機能や強力なコード補完機能などが備わっています。便利です。
    https://aws.amazon.com/jp/what-is/ide/#:~:text=何ですか%3F-,IDE とは何ですか%3F,性を向上させます。 ↩︎

  7. 直訳で「指紋」を示す通り、ホストとリモート間での接続に必要な認証処理に使用するデータを指します。 ↩︎

Discussion