Help us understand the problem. What is going on with this article?

待望のNuxt v2.6リリース! 〜 nuxt-tsからの移行編〜

本日(2019年4月5日)ようやくv2.6がリリースされました :tada:
Release v2.6.0 · nuxt/nuxt.js

v2.5からnuxt-ts不要でTypeScriptサポートが不要になりましたが、その辺りを紹介します。

(2019/8/22追記)
v2.9のリリースにより、TS周りに変更があったので移行手順を以下の記事に書きました。
Nuxt.js 2.9でのTypeScript対応 - Qiita

tl;dr

nuxt-tsからの移行手順

冒頭に書いた通り、v2.5からnuxt-tsは不要になり、nuxtがあればよくなりました。
nuxt-tsを使っていた人用に移行手順を書いておきます。

$ yarn remove nuxt-ts
$ yarn add nuxt ts-node @nuxt/typescript

リリースノートには@nuxt/typescriptdevDependenciesとして追加するように書かれていますが、これだとGoogle App Engine(GAE)上では動きません。(詳細は後述)

package.jsonnuxt-tsコマンドを使っていたところをnuxtに変更します。

"scripts": {
- "dev": "nuxt-ts",
- "build": "nuxt-ts build",
- "start": "nuxt-ts start",
+ "dev": "nuxt",
+ "build": "nuxt build",
+ "start": "nuxt start",
},

tsconfig.jsonextendsを削除します。1

tsconfig.json
{
-  "extends": "@nuxt/typescript",
   "compilerOptions": {
    "baseUrl": ".",
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  },
}

v2.5以降からnuxt.config.ts用の型定義が提供されるようになったのでそちらに移行します。

nuxt.config.ts
- import {Configuration} from 'webpack'
- import {Context} from '@nuxt/vue-app'
+ import NuxtConfiguration from '@nuxt/config'

- const nuxtConfig = {
+ const nuxtConfig: NuxtConfiguration = {
  build: {
-    extend (config: Configuration, { isClient }: Context) {
+    extend (config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.devtool = '#source-map'
      }
    }
  }
}

module.exports = nuxtConfig

随分とシンプルになりました :smile:
@types/webpackも不要になったので消しておきましょう。

$ yarn remove @types/webpack

@types/xxxdevDependencies

nuxt start時の挙動がv2.5から変更になりました。
以下のソースから分かるようにトランスパイルだけを行うようになっています。
https://github.com/nuxt/nuxt.js/blob/dev/packages/cli/src/command.js#L96-L99

v2.4では前の記事で書いたように、nuxt star時に型チェックもしていたため、@types/xxxの型定義ファイルをpackage.jsonのdependenciesに宣言しておく必要がありましたが、これでdevDependenciesに宣言すればよくなりました。

GAE Node Standard Enviromentで動かす

v2.5では起動しない

v2.5でnuxt-tsが廃止され、nuxt一本になったのですがGAEで動きませんでした。
これはv2.5ではnuxtコマンドを使うと常にtsconfig.jsonへの書き込みが発生していたためです。
PaaSではよくある制限ですが、GAEでは特定パス以外2へのファイル書き込みは許可されていません。
なので、tsconfig.jsonに書きこむときにエラーとなり起動できない状態でした。

v2.6からtsconfig.jsonが存在しなかったときだけ書き込まれるようになったので、tsconfig.jsonを事前に用意しておけば起動できるようになりました :innocent:

@nuxt/typescriptdependencies

GAE上で動かすためには、yarn install && yarn buildした状態でgcloud app deployする必要があります。
gcloud app deployNODE_ENV=production環境でyarn installが実行されます。
このとき@nuxt/typescriptdevDependenciesに宣言しておくと、@nuxt/typescriptがないといわれ、起動に失敗します。
なので@nuxt/typescriptdependenciesに書かれている必要があります。

nuxt starttranspileOnlyになったので、GAEのinstance_classを最弱のF1にしても起動するかな?と思ったのですが、無理でした3
なのでF2以上を使うことをお勧めします。

(追記 2019/7/17)
instance_classがスペックアップされたのでF1で動作するようになりました :tada:
App Engine second generation runtimes now get double the memory; plus Go 1.12 and PHP 7.3 now generally available | Google Cloud Blog


  1. 前回に追記したようにtypeRootsを使うのがよいと思います。 

  2. /tmp以下のみ許可 

  3. 502が返ってきてログにはv8のエラーが出力される 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away