フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】

フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】

SPA開発用サーバーの設定方法

開発を行うマシン(PC)側での開発環境が整いましたら、出力したJavaScriptをブラウザで確認するための開発用サーバーを立ち上げる必要があります。
開発中のソースコードは非公開であることが一般的ですので、今回は開発用サーバーをローカルで立ち上げるための設定方法について詳しく見ていきましょう。

開発用サーバーの設定方法

ローカルでwebサーバーを立ち上げるには、「Apache」や「nginx」を使用します。
ここでは、一例としてMac OSでApacheを起動させ開発用サーバーとして使用するための設定方法を順にご紹介します。

1. Terminalを使用してApacheを起動

Terminalで$ sudo apachectl startを入力します。

2. Apache起動の確認

ウェブブラウザを開き、http://localhostにアクセスします

画面に「It works!」と表示された場合、Apacheが正常に起動しています。

3. ウェブブラウザからPC内のファイルを読み込み可能にする

開発用サーバーのドキュメントルート直下とは別のディレクトリを読み込み可能にしたい場合は、Apache内のファイル(httpd.conf)の変更が必要です。
次のコード先頭の「#」を削除します。

#LoadModule userdir_module libexec/apache2/mod_userdir.so
#Include /private/etc/apache2/extra/httpd-userdir.conf

これにより、ユーザディレクトリが有効化され、PCのローカルディレクトリにブラウザからの接続が可能となります。

webpack-dev-serverの設定方法

前回の記事でオススメしたwebpack-dev-serverですが、使用すると常にサーバーと連携して開発作業を進めることができます。webpack-dev-serverが常に開発中のファイルを監視し、ファイルに変更があった場合は自動的に再変換が行われ、ブラウザがリロードされます。
webpack-dev-serverは次の手順で設定することができます。

webpackの設定ファイルとなるwebpack.config.jsを作成して以下のようにを記述します。

module.exports = {
    entry: ‘./main.js’,
    output: {
        path: __dirname,
        filename: ‘bundle.js’
    }
}

index.htmlを作成し、scriptタグでbundle.jsを読み込むように記述します。
その後$ npm startを実行すれば完了です。

サーバーの起動

最後にTerminalで$ sudo apachectl restartと入力し、Apacheを再起動します。

さきほど作成したindex.htmlは以下の場所に配置してください。

/Library/WebServer/Documents/
※httpd.confにより変更している場合はこの限りではありません

index.html のサンプル

<!doctype html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>TEST SERVER</title>
</head>
<body>
    <p>TEST</p>
    <script src=”bundle.js”></script>
</body>
<html>

main.js に JavaScript を記述していくと、webpack-dev-server がファイルの変更を検知してブラウザがリロードされるようになります。

今回ご紹介した内容はあくまでも初歩的なものです。
開発を進めていくなかで自分にあった環境を構築していきましょう。

【相談無料】案件の紹介や自身のキャリアについてなど相談したい方はこちら
スタートアップ、ベンチャー、大手・上場企業、VCなどIT業界の人脈豊富なコンサルタントがサポートさせていただきます

Return Top