Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@yuta-katayama-23(yuta katayama)

Windows上にLinux(CentOS)のWebアプリ開発環境をvirtualboxで構築する

Last updated at Posted at 2021-11-21

はじめに

Webアプリを開発する上でWindowsでもいいが、クラウドがLinuxである事が多い気もする中で、Windowsだけど開発はLinuxでという事もある気がしている。
個人開発をする上でもLinux環境が欲しくなりちゃんと環境構築をやってみたので、その環境構築の手順を、個人の備忘録の意味も含めて、残しておく。

なぜvirtualboxか？

  • 複数サーバを立てて疎通検証をしたい場合に問題がでるので、マイクロサービス開発とかだと厳しい（らしい）
  • 環境の移転が困難（スナップショットの保存ができない）

といった理由からWSL2だとうまくいかない事がある（みたい）。

virtualboxにCentOSでLinux環境を構築する

今回はCentOSにするが理由は、Amazon LinuxがCentOS系？という事らしいので（少なくともyumでDebian系ではないため）。

virtualboxのインストール

CentOSのマシンイメージ取得

CentOS Linuxにアクセスして、7（2009）のタブを開き、x86_64にアクセスする。
適当なリージョンを選択して、CentOS-7-x86_64-Minimal-2009.isoをダウンロードする。

仮想マシンを作成

virtualboxを開いて新規から作成していく。
基本的にはデフォルトでいいが、メモリは1024MB(1GB)だとだいぶ動作がもっさりするので快適に動かすには4096MB(4GB)とかあるとよさげ（らしい）。
CentOSのマシンイメージ取得で取得したイメージは、設定＞ストレージ＞コントローラー：IDE 空＞ディスクアイコン＞仮想光学ディスクの選択・作成...から仮想マシンのイメージに設定する。
メモリ 4096MB
ハードディスク 仮想ディスクを作成で20GB。ディスクタイプはVDI。
物理ハードディスクにあるストレージ 可変
ネットワーク アダプター1：NAT
アダプター2：ホストオンリーアダプター
※後でCentOS上で追加設定を行う
物理ハードディスクにあるストレージ 可変

image.png
image.png
image.png
image.png

※詳細の手順はVirtualBoxにCentOSをインストールが分かりやすい（今回はMinimalなのでCLIであり、記事のようなGUIの設定はしないので注意）。

仮想マシン（CentOS）の設定をする

ネットワーク設定

今回はNAT×ホストオンリーアダプターの構成でネットワークの設定を作っていく。参考に挙げたサイトの方で以下のように言われているのがその理由。

よくあるVirtualBoxネットワーク設定の例として、ブリッジアダプターを使ったものがありますが、外部ネットワーク、仮想マシン、ホストOSの全ての通信が可能になってしまいセキュリティ的によろしくありません。

この設定を行う前提として、仮想マシンを作成に添付している画像のようにネットワークが設定されている必要がある。

NAT、ホストオンリーアダプターの2つの設定をするのには、nmtuiコマンドを実行して開くTUIで設定を行っていく。まずはその画面を開く。
※以下のTUIの青い画面は、矢印キーとEnterで操作する。

手順No 手順 参考画像
1 nmtuiコマンドを実行する image.png
2 Edit a connectionを選択してEnter image.png

NATの設定

以下では上記の手順の続きで、NATの設定をしていく。

手順No 手順 参考画像
3 emp0s3を選択してEnter image.png
4 IPx6 CONFIGURATIONをIgnoreに変更（矢印キーでカーソルを移動し、Automatic上でEnterをクリックするとプルダウンで選択切り替えできる）
Automatically connectにチェックを入れる（カーソル移動後、spaceキーをクリックするとチェック(X)が入る）		 image.png
5 OKでEnterをクリックし設定を確定する（ネットワークの設定のHomeに戻る） image.png

ホストオンリーアダプターの設定

以下では上記の手順の続きで、ホストオンリーアダプターの設定をしていく。

手順No 手順 参考画像
6 emp0s8を選択してEnter image.png
7 IPv4 CONFIGURATIONをManualにし、AddressをアダプターのIPの下限と上限の間になるように適当に決める（例えば192.168.56.2）
IPx6 CONFIGURATIONをIgnoreに変更
Automatically connectにチェックを入れる		 image.png
8 OKでEnterをクリックし設定を確定する（ネットワークの設定のHomeに戻る） image.png
9 BackでEnterをクリックし設定を終了する image.png
10 OKでEnterをクリックし終了する（bashターミナルに戻る） ー

※上記の「手順」で出てきたアダプターのIPとは以下の画像の部分の事（DHCPサーバのタブの方に、下限・上限が書かれている）。
image.png

設定の反映

上記の設定を反映させるために、以下のコマンドを実行する。

# systemctl restart NetworkManager
# systemctl restart network

設定できているか？検証する

pingとsshで接続できているか？を確かめる。

  • ping
    仮想マシン（ゲストOSと言ったりする）から外部ネットワークへの接続ができているか？を確かめる
  • ssh
    Windows（ホストOsと言ったりする）からゲストOSへの接続ができるか？を確かめる
    CentOSのsshd_config（sshの設定）がデフォルトであればPasswordAuthentication yesとなっているのでssh接続をパスワード認証で行えるはず（sshd_configの中身は、cat /etc/ssh/sshd_configで見れる）
ping ssh
image.png image.png

ここまででネットワークの設定は完了になる。

余談

emp0s3とemp0s8のどちらが、NATでどちらがホストオンリーアダプターか？は、以下のようにip addrと実行した時のMACアドレスで分かる。
image.png

emp0s3 emp0s8
image.png image.png

firewalldの設定

Webアプリを作る際にもちろんローカルサーバを立ち上げるが、だいたいlocalhost:8080のパターンが多いと思う。ただ、デフォルトのCentOSではfirewalldというサービスが動いており、8080ポートが閉じているのでこれを開けてあげる必要がある。

※このポートを開ける作業をしないで、firewalldのサービス自体を止めてしまう事もできるが、それに慣れてしまうと本番環境のサーバでも同じような事をしてしまい事故る事になるので基本的にはちゃんとポート開放をする手順がいいと思われる

firewalldの起動有無を確認

まずfirewalldが動いているか？どうかは以下のコマンドで確かめられる。

[root@localhost ~]# firewall-cmd --state
running

動いていない場合、systemctl start firewalld.serviceで起動できる。

firewalldの設定を確認する

今現在のfirewalldの設定を確認するには以下のコマンド。

[root@localhost ~]# firewall-cmd --list-all
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: enp0s3 enp0s8
  sources: 
  services: dhcpv6-client ssh
  ports: 
  protocols: 
  masquerade: no
  forward-ports: 
  source-ports: 
  icmp-blocks: 
  rich rules:

8080ポートを開放する

恒久対応としたいので、以下のように設定をする（ちなみに、firewalldのhttpは80ポートの事なので、firewall-cmd --zone=public --add-service=http --permanentなどとしてもうまくいかないので注意）
8080ポートを開けるには直接8080ポートを開けるように設定する必要がある

[root@localhost ~]# firewall-cmd --zone=public --add-port=8080/tcp --permanent
[root@localhost ~]# firewall-cmd --reload

[root@localhost ~]# firewall-cmd --list-all
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: enp0s3 enp0s8
  sources: 
  services: dhcpv6-client ssh
  ports: 8080/tcp　←　追加されている事が確認できる
  protocols: 
  masquerade: no
  forward-ports: 
  source-ports: 
  icmp-blocks: 
  rich rules:

※ちなみに、サービスとportの組み合わせ一覧はcat /etc/servicesで確認できる（現実的にはcat /etc/services | grep http等で使う）

SSH接続を公開鍵・暗号鍵方式に変更する

デフォルトの設定では以下のように、sshd_configの設定がssh接続時の認証をパスワードで行う設定になっている（PasswordAuthentication yes）のでこれを変えると便利（以降の項でVS Codeからsshで接続して実際にちょっとしたWebアプリを作るがその時にパスワード認証をしていると手間になる）。

[root@localhost ~]# cat /etc/ssh/sshd_config
#       $OpenBSD: sshd_config,v 1.100 2016/08/15 12:32:04 naddy Exp $

# This is the sshd server system-wide configuration file.  See
# sshd_config(5) for more information.

...

#PubkeyAuthentication yes

# The default is to check both .ssh/authorized_keys and .ssh/authorized_keys2
# but this is overridden so installations will only check .ssh/authorized_keys
AuthorizedKeysFile      .ssh/authorized_keys

# To disable tunneled clear text passwords, change to no here!
PasswordAuthentication yes
#PermitEmptyPasswords no

...

ホストOS側で公開鍵・秘密鍵を作成する

PS C:\WINDOWS\system32> cd ~/.ssh
PS C:\Users\user\.ssh> ssh-keygen -t ed25519 -C "{メアド}"
Generating public/private ed25519 key pair.
Enter file in which to save the key (C:\Users\user/.ssh/id_ed25519): CentOS7.9-2009
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in CentOS7.9-2009.
Your public key has been saved in CentOS7.9-2009.pub.
The key fingerprint is:
SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx {メアド}
The key's randomart image is:
+--[ED25519 256]--+
...
+----[SHA256]-----+
PS C:\Users\user\.ssh> cat C:\Users\user\.ssh\CentOS7.9-2009.pub
{ssh公開鍵}

PS C:\Users\user\.ssh> vim .\config

上記のような手順で公開鍵・秘密鍵のペアを作成し、公開鍵の方はメモしておく。

※vim .\configでは以下のような設定をしておくと便利。

Host CentOS7.9-2009
  Hostname 192.168.56.2
  User root
  IdentityFile ~/.ssh/CentOS7.9-2009

※powershellでvimを使えるようにする方法はPowershellでvimを使うを参照。

ゲストOSでsshd_configの設定を変更し反映する

[root@localhost ~]# sudo vi /etc/ssh/sshd_config
[root@localhost ~]# systemctl restart sshd ## 再起動して設定を反映する

※sudo vi /etc/ssh/sshd_config書き換える部分は、以下の2つ。

  • #PubkeyAuthentication yes：コメントアウトを外して有効化する
  • PasswordAuthentication yes：noに変更

ゲストOSで公開鍵を登録する

[root@localhost ~]# mkdir ~/.ssh
[root@localhost ~]# chmod 700 ~/.ssh
[root@localhost ~]# cd ~/.ssh
[root@localhost .ssh]# sudo vi authorized_keys
[root@localhost .ssh]# chmod 600 authorized_keys

※sudo vi authorized_keysでは、ホストOS側で公開鍵・秘密鍵を作成するでメモしていた公開鍵を書き込む（手動ではなく、ssh-copy-id -i ~/.ssh/id_rsa.pub <user name>@<ip address>のようにコマンドでやる方が手っ取り早いかも）。

ホストOSからゲストOSへssh接続（公開鍵・暗号鍵方式）できるか？検証する

PS C:\Users\user\.ssh> ssh CentOS7.9-2009
Last login: Sun Nov  7 17:43:03 2021 from 192.168.56.1
[root@localhost ~]#

上記の通り接続できればOK。

OSの時刻設定

何も設定しないと「電源をオフ」をした時等にゲストOS側の時刻とズレてしまう事がある。そのため、Chronyを使って時刻を同期（日本時刻であればmfeedやNICTのサーバ時間に合わせる）の設定をする。

Chronyの設定は/etc/chrony.confに書かれているので、それに以下のように追加をする（iburstオプションで短い間隔で4回ntpサーバに問合せを行い、時刻同期までの間隔を短くする事ができるが、『日本最古の公開NTPサービスが廃止へ、世界中からアクセスが殺到した深いワケ』のように負荷がかかるとサービスがなくなったりもするのでiburstは設定しない方が良かったり・・・）。

# Use public servers from the pool.ntp.org project.
# Please consider joining the pool (http://www.pool.ntp.org/join.html).
server 0.centos.pool.ntp.org iburst
server 1.centos.pool.ntp.org iburst
server 2.centos.pool.ntp.org iburst
server 3.centos.pool.ntp.org iburst
server ntp.nict.jp <- ここを追記

# Record the rate at which the system clock gains/losses time.
driftfile /var/lib/chrony/drift

あとはChronyが動いているか？を確認すればOK（起動してなければsystemctl start chronydで起動できる）。

[root@localhost ~]# systemctl status chronyd
● chronyd.service - NTP client/server
   Loaded: loaded (/usr/lib/systemd/system/chronyd.service; enabled; vendor preset: enabled)
   Active: active (running) since 日 2021-11-21 15:46:51 JST; 9min ago

VS CodeでWindowsからCentOS（ゲストOS）に接続する

今回はNode（Javascript）で開発する事を想定して、VS Codeをエディタとして使う事にする。
上記のssh接続を公開鍵・暗号鍵方式に変更するを行っているので以下のようなExtentionsを入れる事で簡単にCentOSに接続できる。

上記のExtentionsを入れると、以下のようにRemote Explorerというメニューが表示されて、TargetsでSSHが選択できるようになる。
このSSH Targetsに表示されるものは、windowsであればPS C:\Users\user\.ssh> のconfigに設定されている接続先が表示される。今回はCentOS7.9-2009が先ほど作成したものなので、こちらに接続をすればいい。
image.png

※接続後はTerminalはCentOSのbashになるので、開発に必要な各種ツールはVS Codeのbashから行うとコピペができたりして楽かもしれない。
image.png

CentOSに開発に必要そうなものを一式インストールする

Webアプリの開発という事を考えると、色々な意見はあるが以下は入れておいていい気がするので、以降はそれをインストールする手順についてみていく。

  • git
  • Node/npm/yarn

git

CentOS7系だと普通にsudo yum install gitとしてしまうと、version1.xになってしまい少し古いものになる。
なので少し工夫が必要でIUSというyumリポジトリを追加してあげてgitをインストールする。

[root@localhost ~]# yum install \
> https://repo.ius.io/ius-release-el7.rpm \
> https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
[root@localhost ~]# yum install git224
[root@localhost ~]# git --version
git version 2.24.4

これでversion2.xがインストールできた。

※以下コピペ用

yum install \
https://repo.ius.io/ius-release-el7.rpm \
https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

Node/npm/yarn

Webアプリという事で、フロントエンドは少なくともReact(Next)・Vue(Nuxt)・Angularなどを使うと思われるので、Node.jsもインストールしておく事にする。
Nodeはversion管理が面倒だが、nodebrewを使うと簡単なので今回はそれでNodeのインストールを行っていく。

[root@localhost ~]# curl -L git.io/nodebrew | perl - setup
[root@localhost ~]# vi ~/.bashrc
[root@localhost ~]# source ~/.bashrc
[root@localhost ~]# nodebrew ls-remote ## これでNodeのversionが表示されるのでインストールするもの（今回は v14.18.1）を決める
[root@localhost ~]# nodebrew install-binary v14.18.1
[root@localhost ~]# nodebrew use v14.18.1
[root@localhost ~]# node --version
v14.18.1
[root@localhost ~]# npm --version
6.14.15
[root@localhost ~]# npm i -g yarn

※上記ではyarnも入れているが、npmだけもよい（パッケージマネージャーに何を使うか？という決めの話）

※vi ~/.bashrcでは、以下のようにbashrcを書き換える

# .bashrc

# User specific aliases and functions

alias rm='rm -i'
alias cp='cp -i'
alias mv='mv -i'

# Source global definitions
if [ -f /etc/bashrc ]; then
        . /etc/bashrc
fi

export PATH=$HOME/.nodebrew/current/bin:$PATH

docker/docker-compose

データベースがないWebアプリはない（と思う）ので、ローカルで開発する時にはコンテナイメージでデータベースを立ち上げたりできるようにdocker/docker-composeをインストールしておく。

dockerのインストール

公式の手順（Install Docker Engine on CentOS）に則りインストールしていく。

まずはOSを最新化する。

[root@localhost ~]# yum update
[root@localhost ~]# yum upgrade

次にdockerをインストールするための要件（OS requirements）をチェックする（基本デフォルトで登録済みで有効化されている）。

The centos-extras repository must be enabled.

[root@localhost ~]# cat /etc/yum.repos.d/CentOS-Base.repo
・・・

#additional packages that may be useful
[extras]
name=CentOS-$releasever - Extras
mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=extras&infra=$infra
#baseurl=http://mirror.centos.org/centos/$releasever/extras/$basearch/
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7

・・・

あとは公式の手順に沿ってインストールしていけばいい。
※1点、バージョンの指定の部分は20.10.9みたいな感じになるが、これは以下のコマンドを実行した時の3:20.10.9-3.el7から抜き出す。

[root@localhost ~]# yum list docker-ce --showduplicates | sort -r
利用可能なパッケージ
読み込んだプラグイン:fastestmirror
インストール済みパッケージ
docker-ce.x86_64            3:20.10.9-3.el7                    docker-ce-stable 
docker-ce.x86_64            3:20.10.8-3.el7                    docker-ce-stable 
docker-ce.x86_64            3:20.10.7-3.el7                    docker-ce-stable
・・・

dicker-compose

公式の手順（Install Docker Compose）に則りインストールすればいい。

sudo（rootユーザ）以外でもdockerコマンドを実行できるようにする

Manage Docker as a non-root userに書かれている。

参考文献

Tips

VirtualBox で CentOS7 の ディスクを拡張した時の手順

2
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?