メリークリスマス！（昨日）これはVue.jsアドベントカレンダーの記事です。
代打です。

僕は初日にサーバーサイドレンダリングについて書きましたが今回もサーバーサイドレンダリングです。

今回の内容は本当は初日に書きたかったのですがずっとうまくいかずに悩んでいたけどつい昨日できたGoサーバでのSSR（サーバーサイドレンダリング）です。

GoでSSRをするメリットとしてまず一つにポータビリティです。
Node.jsもポータビリティはありますが、Goであればアセットもワンバイナリにまとめることができるのでバイナリを配置するだけでWebUIがあるツールも作ることもできるかもしれません。

そして、僕にとって１番のメリットであるApp Engine(GAE)でSSRができるようになります！

SSRについては初日の記事を見てください！

サンプルの実行

https://github.com/k2wanko/appengine-go-ssr-example

サンプルのコードはGitHubにあげてあります。
これをベースにGoでSSRを実現するためにやったことを書いていきます。

動かし方は以下の手順です。

$ git clone https://github.com/k2wanko/appengine-go-ssr-example.git
$ git checkout -b vue2.1 7fff5eec2006b6a617696b5db3403dd27e6a8dfe
$ npm install # or yarn
$ go get -v ./...
$ npm run dev

npm run devを実行するとで開発サーバが立ち上がります。http://localhost:8080にアクセスすると確認ができます。

webpack.config.js

まずはwebpackの設定です。
基本は初日の記事のやつと同じですがGoで動かすために少し変えています。

まずGoでJSを実行するランタイムはgojaを使いました。
gojaはottoのようにGo実装のJavaScriptパーサです。
ottoよりもGoとのやり取りがやりやすいので使いました。
gojaについてはドワンゴのアドベントカレンダーに書いたのでそっちを見てください。
gojaを使ってGoでJavaScriptの実行を試してみた - Qiita

まずコードをgojaで動かせるようにする必要があります。
gojaはES5.1を実装しているのでそこの変換はbabelでやります。
次にNode.jsを前提にしているコードのためにwebpackのNodeSourcePluginを利用します。
webpackではtarget: 'node'にするとNodeSourcePluginが使われないのでwebpack.config.jsに追加します。
でもそれだけではまだだめでNodeTargetPluginの効果を無効にする必要があります。
NodeTargetPluginはnativeモジュールを外部から取ってくるようにするためのプラグインです。
process.bindingを置き換えて対処しました。
もっとスマートなやり方があればいいのですが... そのためにはPRが必要かもしれません。

以下がserver用のコードの設定です。

var NodeSourcePlugin = require('webpack/lib/node/NodeSourcePlugin')
webpackModule.rules[1].exclude = null

var binding = process.binding
process.binding = function (name) {
  if (name === 'natives') return {}
  return binding.apply(process, arguments)
}
var server = Object.assign({}, client, {
  entry: './src/server.js',
  target: 'node',
  devtool: false,
  output: Object.assign({}, client.output, {
    filename: 'server-build.js',
    libraryTarget: 'commonjs2'
  }),
  plugins: [
    new NodeSourcePlugin(
      {
        console: true,
        process: true,
        global: true,
        Buffer: true,
        setImmediate: true,
        module: 'empty',
        __filename: 'mock',
        __dirname: 'mock'
      }),
  ],
  module: webpackModule,
})

setTimeout

ES5の仕様にはsetTimeoutの仕様が含まれていないのでgoja_nodejsのeventloopを使いました。

今後の予定

VuexとVue Routerを使う
実践的なアプリケーションを作ってみる

まとめ

というわけで、GAE/GoでSSRができました！

Vue.jsのサーバーサイドレンダリングをGAE/Goでやる #vuejs #golang

サンプルの実行

webpack.config.js

setTimeout

今後の予定

まとめ