SPA とサーバを分離して開発する時にやっておく設定の話

前提として、SPA 開発の為のビルドツールは webpack を想定。 ローカルサーバは webpack-dev-server を使用。

webpack がどうとかの話はここではしない。

構成

ローカル環境で開発する時の話。

ログインページはサーバアプリケーション側で対応、ログイン後のダッシュボードからは SPA という構成を想定。 良くあるセットだと、Vue.js と Laravel (Homestead) とかだけど、別に webpack の話なので何でもいいかと。

SPA を別リポジトリで (サーバのリポジトリと分ける) 開発する場合、問題になるのは確認どうやってやるの? という問題。 webpack には webpack-dev-server というものがあるので、webpack 使う場合はこれを使う。

config webpackConfig = {
// 割愛
  devServer: {
    watchcontentBase: true,
    contentBase: path.resolve(__dirname, 'dist'),
    inline: true,
    host: 'hoge.test',
    port: 8080,
  }
}

上記のような devServer を設定した場合、hoge.test:8000 でサーバが立ち上がる。 因みにこれを 80 に設定して起動したい場合は、Mac ではコマンド実行時に sudo を付ける.

この設定で SPA を開発する際に、API サーバを叩く (axios 使ったりして) 事をやると思うけど、 その場合 proxy を使うと良い。

何も気にしないのであればアプリケーション内での URL 指定をローカルの API URL を叩くだけで良いんだけど、 その場合ローカルサーバと host や port が異なるため、CORS で引っかかる。 cookie にも影響が出る。

また、このままではそもそもサーバアプリケーションでログインページを表示し、ログイン後に SPA を表示する事ができない (SPA をサーバに組込むなら別)。

それぞれの IP や hosts 設定

/etc/hosts を下記に設定

127.0.0.1 hoge.test

127.0.0.1 の部分は別になんでも良いけど、Homestead を使用している場合何もしなくても hoge.test:8000 へのアクセスで表示が確認できるようになるため、楽なため、この設定 (Homestead で host を hoge.test にしている場合の話)。

サーバアプリケーションは hoge.test:8000 で動いているものとする。

サーバかアプリケーションからログイン、ローカルサーバの SPA を表示する方法 (CORS も対応)

devServer の機能で proxy という機能があるので、これを使う事で解決する。 proxy は devServer に存在しないリソース (ページ、画像、CSS、JS などの URL が無い場合) があると、proxy に記載されているルールにしたがって、別サーバにリクエストを中継してくれる。

例えば、/img や /js、/api /login などの URL に対してアクセスした際に、devServer にページが存在しない場合にサーバへアクセスさせるには下記のように書く。

devServer: {
// 割愛
  proxy: [{
    context: [
      '/login',
      '/css',
      '/js',
      '/api'
    ],
    // サーバアプリケーションには hoge.test:8000 でアクセスできる場合
    target: 'http://hoge.test:8000'
  }],
}

上記設定を行なう事で、context に設定した PATH から始まる URL で devServer にリソースが無い場合はサーバアプリケーション側に問い合わせてくれる。そのため、login ページでサーバ側、ログイン後は SPA を表示という事ができる。 API の PATH も入れてあるため、サーバアプリケーションの API が /api から始まる場合は全て devServer へのアクセスで勝手に処理してくれるようになる。

この設定を行なっておけば、API を叩く URL, PORT の設定を別で分ける必要がなくなる。

SPA ページを更新した際、もしくは URL 指定でページ遷移した場合の表示に対応する

これは devServer の historyApiFallback を設定する事で対応できる。 ただ、注意点があり、proxy よりも下 (後) に記述しないとだめらしい。

devServer: {
  // ...
  proxy: {
  // ...
  },
  historyApiFallback: {
    index: 'index.html'
  }
}

大体こういう感じになる。 注意点として、SPA の HTML ファイルを指定しないといけないため、webpack.config.js でどこに HTML を吐くようにしているかによって変わる。

このポイントを指定しておく事で 404 の際の HTML を index.html にしてくれる。 SPA ページを表示する事ができれば、SPA が勝手にページを URL から再現してくれる。