開発・テスト環境の構築（VSCode + bash + Node.js + Apache）

カテゴリ：準備編

目次
エディタをインストールしたらテスト環境を整えます。
以下ではエディタとしてVisual Studio Codeを使用する場合を例として解説します。

テスト用Webサーバーのインストール

開発環境がWindowsの場合、XAMPPなどでWindows版のApacheをインストールし、起動します。
※XAMPPのインストールはインストールプログラムを実行し、ウィザードに従って進めるだけであるため、手順については割愛します。

そして作成したWebページ（index.htmlを含むHTML関連ファイル）をドキュメントルートにコピーし、Webブラウザでhttp://localhostを開けばWebページが表示されるはずです。

XAMPPの場合、ドキュメントルートはCドライブ直下にインストールした場合C:\xampp\htdocsになります。
Macであれば、Mac標準のApacheを使用します。（ドキュメントルートは/Library/WebServer/Documents/、apachectl start で起動）

最初はこれだけで十分でしょう。

以降の手順は本格的なフロントエンド開発に興味がある方のために、環境構築の参考として記述しておきます。

bashシェルやNode.jsが使えるようにする

殆どのレンタルサーバーはLinux環境である事や、開発ツールの多くはbashシェルでの操作、Node.jsというサーバーサイドJavaScript環境を使用する事が多くあります。
特にnpmというコマンド（パッケージモジュール管理ツール）で様々なツールをインストールできるため非常に便利です。
このため、bash+Node.js（npm）の環境構築が理想です。

Macの場合は、ターミナルのシェルはbashであるため、Node.jsをインストールするだけで、Visual Studio Codeのターミナルから操作できます。

関連 MacでのVSCode+nvm+Node.js （npm）環境構築手順

Windows環境の場合はbashがないため、まずLinuxのインストールから始める必要があります。

以降ではWindows環境でのVSCode+bash+Node.jsの環境構築手順について解説いたします。

Windows環境でのVSCode+bash+Node.jsの環境構築手順

「Ubuntu」のインストール

Windows 10では、Microsoft Storeから「Ubuntu」をインストールできるため、これを使用したいと思います。
「Ubuntu」のインストール前に、先にコントロールパネルの [プログラムと機能] > [Windowsの機能の有効化または無効化] から [Windows Subsystem for Linux] をインストールしておきます。

次にMicrosoft Storeから「Ubuntu」をインストールします。

「Ubuntu」を起動し、ユーザー名とパスワードを設定します。
ローカルで使用するならユーザーはrootでかまいません。（rootではない場合、コマンドを実行する際にいちいち先頭にsudoを付ける必要があります）

Visual Studio Codeのターミナルのシェルをbashに変更

ユーザーを作成したら、Visual Studio CodeのターミナルのシェルをUbuntuのbashに切り替えます。（初期設定ではWindows PowerShell）
[ファイル] > [基本設定] > [設定] を開き、ターミナルのペインを開き、右ペインの [ユーザー設定] 欄に以下を入力して保存します。

"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe"

Visual Studio Codeを再起動するとターミナルのシェルがbashに変わっている事が確認できるはずです。
以降のコマンドはすべてbashでのコマンドになりますので注意してください。

nvmのインストール

次にNode.jsのインストールですが、先に以下の手順に従いnvmというツールをインストールします。

https://github.com/creationix/nvm

bashで以下を実行してnvmをインストールします。
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

インストールしたら以下を実行して環境変数を登録します。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

なお、bashの起動時に自動で環境変数を設定するよう、以下の手順で上記を~/.bash_profileに保存しておく事をお勧めします。

bash で以下のコマンドを実行し、viで.bash_profileを開きます。

vi ~/.bash_profile

i キーを押すと入力モードになりますので、上記を貼り付けます。
ESCキーを押して入力モードを終了し、:wqを入力して保存してファイルを閉じます。

※.bash_profileはユーザーがログイン時に一回だけ実行したい事を記載するファイルです。bashやviの詳細は以下のようなLinux関連の書籍を読んでみてください。

nvm --version を実行するとnvmのバージョンを確認できます。
nvm --version
0.33.8

Node.jsのインストール

次にNode.jsをインストールします。

nvm ls-remote と実行するとインストール可能なNode.jsの一覧が表示されます。（時間がかかります）

最新のLTSバージョン（Latest LTS）を以下のコマンドでインストールします。
※LTSは長期の保守運用が約束されたバージョン。

nvm install 8.9.3

次に npm config get prefix を実行し nvm のパスを確認します。

npm config get prefix
/root/.nvm/versions/node/v8.9.3

パスに対して777（フルアクセス）の権限を与えます。

chmod 777 /root/.nvm/versions/node/v8.9.3

テストページの表示

Webサイトのファイルを格納するフォルダを作成します。
例として、Cドライブ直下にtestwebというディレクトリを作成します。
※WindowsのCドライブは、Ubuntuでは/mnt/cにマウントされています。
※Cドライブ以外の場合は、/mnt/配下のcを対象のドライブに読み替えてください。
※mkdirはディレクトリを作成するコマンドです。

mkdir /mnt/c/testweb

Apacheのインストール

以下のコマンドを実行してApacheをインストールします。

apt install -y apache2

ドキュメントルートを/mnt/c/testwebに変更します。
/etc/apache2/sites-available/000-default.confをviで開き、DocumentRootを変更します。

ServerAdmin webmaster@localhost
#DocumentRoot /var/www/html
DocumentRoot /mnt/c/testweb

/mnt/c/testwebディレクトリのオプションを設定します。
/etc/apache2/apache2.confをviで開き、以下の行を見つけ、/var/www/を/mnt/c/testwebに変更します。
変更前：

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

変更後：

<Directory /mnt/c/testweb>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

以下をapache2.confの末尾に追加します。

AcceptFilter http none
AcceptFilter https none

ファイルを保存して閉じ、Apacheを開始します。 

apachectl start

Visual Studio Codeでテストページを作成

Visual Studio Codeで [ファイル] > [フォルダーを開く] から C:\testweb を開きます。
index.htmlファイルを作成し以下のように変更して保存します。

<html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
        <h1>Test Page</h1>
    </body>
</html>

apachectl restart を実行し、http://localhost/でテストページが表示されることを確認しましょう。

これでテスト環境は整いました。

公開日時：2017年12月23日 14:14:22
最終更新日時：2022年02月17日 13:19:49

なお、レンタルサーバー選びで迷ったらこちらの記事で主要レンタルサーバーのプランと料金を比較していますので、是非参考にしてみてください。

準備編に戻る

「準備編」に関する他の手順
カテゴリ一覧

このページのトップに戻る