XXとしてる: Google App Engineにデプロイしたときの話

ようやくWebサイトを公開してもいい感じになったのでGoogle App Engineでデプロイしようとした。

## さぁ、デプロイだ！

```bash
gcloud app deploy
gcloud app browse
```

<div style="text-align:center;">? 画面が真っ白だぞ？？</div>

ログを見ると何やら失敗しているっぽい。

## npmで試す

ドキュメントの方はnpmを使っているので、いったんyarnを使うのやめてnpmを使って試してみる。

が、ダメ。

ログを見ると

```
Error: Cannot find module '<install packages>'
```

とあった。
yarnの方にもそういえば同じログがあったので、パッケージのインポート周りで失敗しているっぽい？

## もしかして？ devDependenciesしてます？

してまーす。

というわけで、慌ててdependenciesにインストールし直す。

が、ダメ。

```
0x6d2937abc60 node::Abort() [node]
```

と出て、闇がさらに深くなってしまった。

## デフォルトのnuxtで試してみる

何がおかしいのかさっぱりなので、Nuxtを初期化した状態のものでデプロイが出来るか確認してみる。

npmを使い、`npm create nuxt-app`で現在のプロジェクトに近い設定で初期化。

設定した項目は

- Express
- Vutify
- PWA

などなど

ちゃんと`npm run build`をしてからデプロイを実行！

へへ、これは流石に動くだろう。

```
Error: Server Error
The server encountered an error and could not complete your request.

Please try again in 30 seconds.
```

何も変わらない・・・だと・・・

## 助けて、Qiita！！

ポートとホスト名をそれぞれ8080、0.0.0.0と環境変数で指定してあげるといいんだよ！

ありがとう！Qiita！！ ありがとう！記事を書いてくれた人！！

```
Error: Server Error
The server encountered an error and could not complete your request.

Please try again in 30 seconds.
```

なん・・・だ・・と・・・・

## まだだ！まだまっさらな状態のNuxtが残っている。

## 何が違うの？

どうやらnuxt buildをしているかしていないかが失敗の原因っぽい。

サーバー側ではExpressを使用しているが、そのときのnpm run startはnode経由でサーバーを立ち上げている。

なにか違いがあるのか、nuxtのコードを読んでみたが、次のコードでNuxtインスタンスを生成していた。

```js
//node_modules/@nuxt/cli/dist/cli-chunk.js
  async getNuxt(options) {
    const { Nuxt } = await core();

const nuxt = new Nuxt(options);
    await nuxt.ready();

return nuxt
  }
```

ちなみにnuxt startの実行したときに処理されるコードはここになると思う。

```js
//node_modules/@nuxt/cli/dist/cli-chunk4.js
  async run(cmd) {
    const config = await cmd.getNuxtConfig({ dev: false, _start: true });
    const nuxt = await cmd.getNuxt(config);

// Listen and show ready banner
    await nuxt.server.listen();
    __chunk_2.showBanner(nuxt);
  }
```

これと生成時にExpressを使うように設定したときのサーバーコードを比較してみると、特に違った箇所が見受けられなかった。

両者ともNuxtインスタンスを作成してリクエスト待ちを行っている。

違うといえば、Expressの方はexpressにnuxt.renderを渡しているという点か…

```js
async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

const { host, port } = nuxt.options.server

// Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

// Give nuxt middleware to express
  app.use(nuxt.render)

// Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
```

## printfデバッグしてみる

printfデバッグはつらい。が、やるしかない。Google App Engineのログに残ってくれたらいいのだが・・・
(※ローカル環境で試すだけで十分です)

ちなみにこんな感じにログを差し込んだ

```js
async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)
  console.log('通ったよ')

const { host, port } = nuxt.options.server

// Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }
  console.log('通ったよ１')
  // Give nuxt middleware to express
  app.use(nuxt.render)
  console.log('通ったよ２')

// Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
  console.log('通ったよ３')
}
```

実行結果は・・・

```
I  GET 500 0 B 8.8 s Firefox 66 / GET 500 0 B 8.8 s Firefox 66 5ca0b63f00ff066b499bee7a370001627e6b616e6a692d617373656d626c792d3233363230380001323031393033333174323134333230000100
A  通ったよ 
// 省略
A   1: 0x7779f97ec60 node::Abort() [node] 
```

と、真ん中あたりの条件分岐が怪しいことがわかった。

これを繰り返していくと、await nuxt.ready()で失敗していることがわかった。

nuxt.ready()内部に問題があるというわけではなく、Nuxtインスタンスを生成するときに渡した設定が原因ではないかと思う。

というわけで比較してみると、buildオプションが大きく異なっていることがわかった

試しに、Expressだけ有効にしてほかは何も使わない設定でNuxtプロジェクトを作成すると無事デプロイに成功した！

## 悪いビルドオプションは誰だぁ！！

「誰もいません！！」

「じゃ、誰だ悪さをしているんだ！！」

「こいつです!!!」

<div style="font-size: 64px;"><b>Progressive Web Apps</b></div>

正しくはmodulesの@nuxtjs/pwa。

原因はわからないが、とりあえずこいつが原因だとわかった。

それを使わない状態でyarnを使っても、問題なくデプロイ出来たので、@nuxtjs/pwaが悪い。
以上、原因究明終わり。

## 終わりに

検証のため幾度もなくデプロイを繰り返したが、デプロイする際にはGoogle Cloud Buildを利用する必要があり、それは有料サービスである。

つまり、お金がかかるということである。

<div style="text-align:center;">まずいのではないですか？</div>

が一日120ビルド分までは無料だし、それを超えても$0.003/ビルド分と無いに等しいので実質無料である。

一年間＄30まで無料な体験版もあり、Google App Engineは試しやすいIaaS環境だと思う。

※ ビルド分 ビルドにかかった時間を分で割った単位

（画像は以下のものを使用させていただきました。）

XXとしてる

2019年3月31日日曜日

Google App Engineにデプロイしたときの話

0 件のコメント:

コメントを投稿