WSL(Windows Subsystem for Linux)でCentOS7をインストールし、Reactの開発環境を構築する

JavaScript,Linux,PHP,React,技術CentOS,PHP 7,備忘録,開発環境構築

こんにちわ。

在宅勤務中に飲酒したくなるどうもみけぽんです。

 

自宅マシンを買い替えたらいつも使用しているVagrantが起動しなくなってしまったので、今回は久々に技術記事を綴ろうと思います。

 

 

なぜWSLで環境構築するの?

自宅マシンを買い替えたらvagrantが起動しなくなってしまった

定額給付金で10万円支給されることを見込んで自宅マシンを買い替えました。

そしたらいつも自宅開発で利用しているvagrantがup(起動)できない。

$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
    default: Adapter 2: hostonly
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
Timed out while waiting for the machine to boot. This means that
Vagrant was unable to communicate with the guest machine within
the configured ("config.vm.boot_timeout" value) time period.

If you look above, you should be able to see the error(s) that
Vagrant had when attempting to connect to the machine. These errors
are usually good hints as to what may be wrong.

If you're using a custom box, make sure that networking is properly
working and you're able to connect to the machine. It is a common
problem that networking isn't setup properly in these boxes.
Verify that authentication configurations are also setup properly,
as well.

If the box appears to be booting properly, you may want to increase
the timeout ("config.vm.boot_timeout") value.

 

vagrantだとVirtualBoxを利用するのでセキュリティ的にシンボリックリンクを貼れない仕様があり、reactで開発する上で必須なnpmコマンドが利用できないのは大きな懸念でした。

上記エラーも調べれば解決すると思いますが、この際思い切って開発環境構築ツールも変えることにしました。

 

WSL(Windows Subsystem for Linux)とは?

「Windows Linux 開発環境」でググって見つけたWSLを使ってみることにしました。

簡単に言ってしまうと「Windows上で簡単にLinuxを実行できる機能」です。

仮想マシン支援機能は使っていないためnpmも問題なさそう。

 

WSLでReactの開発環境を構築するまで

まずはWSLを使用可能な状態にする

windows10の64ビット版ならWSLが標準搭載されているので、まずは使用可能な状態にします。

設定方法は下記の記事を参照してください。

マシンの再起動までで止めておいてください。

【Windows】Windows 10 に Windows Subsystem for Linux 2(WSL 2)をインストールして Linux(CentOS)が使えるようにする手順

 

Linuxをインストールする

上記手順通りスタートメニューから「Microsoft Store」を選択し→検索窓に「WSL」と入力するとLinux OSの一覧が表示されます。

使い慣れたCentOSを使いたかったのですが、現時点では有料な上に公式じゃなさそうなので二の足を踏みました。

 

よって下記の手順でCentOS7をインストールしました。

CentOS8もリリースされていますが7の方が安定している&使い慣れているためです。

※上記手順だとユーザーの作成まででOKです。

 

PHPとapacheをインストールする

公私共にPHPを使っているということもあり、最新バージョンの7.4系のPHPとapacheを一緒にインストールしました。

rootユーザーで操作しているためsudoは不要です。

# yumレポジトリのインストール
$ rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
$ rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

# PHPとapacheのインストール
$ yum -y install --enablerepo=remi,remi-php74 php php-devel php-mbstring php-pdo php-gd php-xml php-mcrypt

# apacheの起動
$ systemctl start httpd
$ systemctl enable httpd

 

私の場合はなぜかapache起動時にエラーが表示されました。

$ systemctl start httpd
Failed to get D-Bus connection: Operation not permitted

 

その場合は下記記事の内容で対応できます。

https://qiita.com/mzmiyabi/items/fec2c211e0325a5460a8

 

Node.jsをインストールする

まずはレポジトリの作成。

ちなみにsetup_nのnはnode.jsのバージョンが入ります。

偶数が安定版なので、現時点で最新かつ安定版の14のレポジトリを作成してインストールします。

$ curl -sL https://rpm.nodesource.com/setup_14.x | bash -
$ yum -y install nodejs

# バージョンの確認
$ node -v
v14.3.0
$ npm -v
6.14.5

 

開発ディレクトリの設定をする

dfコマンドを実行するとCドライブが/mnt/cにマウントされていることが分かります。

$ df
Filesystem 1K-blocks Used Available Use% Mounted on
rootfs 467815416 83854496 383960920 18% /
none 467815416 83854496 383960920 18% /dev
none 467815416 83854496 383960920 18% /run
none 467815416 83854496 383960920 18% /run/lock
none 467815416 83854496 383960920 18% /run/shm
none 467815416 83854496 383960920 18% /run/user
cgroup 467815416 83854496 383960920 18% /sys/fs/cgroup
C:\ 467815416 83854496 383960920 18% /mnt/c

 

ホストマシン(Windows)でもゲストOS(CentOS)でもどちらでもいいので、Cドライブに作業用ディレクトリを作成してください。

私は下記のように作成しました。

/mnt/c/Users/user_name/develop/

 

Reactのプロジェクトを作成する

cd コマンドで上記で作成した作業用ディレクトリへ移動し、Reactのプロジェクトを作成します。

$ npx create-react-app project_name
…

59 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Success! Created react_test at /mnt/c/Users/notno/develop/react_test
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd project_name
  npm start

Happy hacking!

Happy hacking!まで表示されれば成功です。

 

apacheの設定をする

まずはゲストマシンのIPアドレスを確認します。

$ ip a
21: eth0: <BROADCAST,MULTICAST,UP> mtu 1500 group default qlen 1
    inet 192.168.***.***/*

eth0のinetの箇所がIPアドレスになりますので控えておいてください。

 

次にバーチャルホストを設定します。

例ではvhost.confにしていますが、拡張子が.confであれば名前は何でもOKです。

project_name等の箇所は適宜書き換えてください。

$ vi /etc/httpd/conf.d/vhost.conf

<VirtualHost *:80>
    DocumentRoot /mnt/c/Users/user_name/develop/project_name/public/
    ServerName 先ほどのIPアドレス
    AddDefaultCharset UTF-8
    <Directory "/mnt/c/Users/user_name/develop/project_name/public/">
        AllowOverride All
    </Directory>
</VirtualHost>

 

userdir.confも書き換えます。

現状だと/home/*/public_html配下しか公開設定がされていないからです。

$ vi /etc/httpd/conf.d/userdir.conf
<Directory "/home/*/public_html">
    AllowOverride FileInfo AuthConfig Limit Indexes
    Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
    Require method GET POST OPTIONS
</Directory>

# 上をコピーして下を追加します

<Directory "/mnt/c/Users/user_name/develop/*/public">
    AllowOverride FileInfo AuthConfig Limit Indexes
    Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
    Require method GET POST OPTIONS
</Directory>

develop/*/publicと設定しておけばどのようなプロジェクト名にしても該当します。

 

confファイルの構文チェックもします。

$ httpd -t
Syntax OK

Syntax OKが表示されれば構文エラーなしです。

構文エラーがあるままだとapacheの起動ができなくなります。

 

構文エラーがなければapacheを再起動します。

$ systemctl restart httpd

 

WEBブラウザでアクセス

バーチャルホストで設定したIPアドレスへアクセスし、タイトルが「React App」になっていれば成功です。

あとはファイルを好きなように書き換えて画面に反映されることを試してみて下さい。