wataruoguchi · December 9, 2018 22:17
diff --git a/1.sh b/1.sh
 $ # プロジェクト用のフォルダ(<proj>、任意に決めてください)を作って、そのフォルダの中へ移動。
 $ mkdir <proj> && cd $_
diff --git a/10.1.sh b/10.1.sh
 $ sudo firebase serve --only functons,hosting
diff --git a/10.2.sh b/10.2.sh
 $ # <proj>フォルダにいることを確認してください。
 $ # src/nuxt.config.jsを編集します。
 $ vi src/nuxt.config.js
diff --git a/10.3.sh b/10.3.sh
 $ # <proj>フォルダにいることを確認してください。
 $ vi functions/index.js
diff --git a/10.4.sh b/10.4.sh
 $ # <proj>フォルダにいることを確認してください。
 $ # srcフォルダへ移動してビルドをします。
 $ cd src && yarn build
diff --git a/10.5.sh b/10.5.sh
 $ # <proj>フォルダに移動して静的アセットをコピー
 $ cd .. && cp -R functions/nuxt/dist/ public && cp -R src/static/* public
 $ # localhostで実行
 $ sudo firebase serve --only hosting,functions
diff --git a/10.6.sh b/10.6.sh
 $ # <proj>フォルダにいることを確認してください。
 $ firebase deploy
diff --git a/10.firebase.json b/10.firebase.json
 "rewrites": [
  {
    "source": "**",
    "function": "nuxtApp"
  }
 ]
diff --git a/10.sh b/10.sh
 $ # <proj>フォルダにいることを確認してください。
 $ # firebase.json を編集します。
 $ vi firebase.json
diff --git a/2.sh b/2.sh
 $ # vue-cliとyarnをインストールします。
 $ sudo npm i -g vue-cli yarn
 $ # nuxt-community/starter-templateを元にsrcフォルダへNuxtアプリが自動設定されます。
 $ vue init nuxt-community/starter-template src
 $ # 質問への回答は全部デフォルトでいいかと思います。Enterを押し続けてください。
  - ? Generate project in current directory?
  - ? Project name
  - ? Project description
  - ? ? Author
 $ # srcフォルダへ移動し、npmパッケージをインストールします。
 $ cd src/ && yarn
diff --git a/3.1.sh b/3.1.sh
 $ # nuxt.config.jsという設定ファイルを編集します。
 $ vi nuxt.config.js
diff --git a/3.nuxt.config.js b/3.nuxt.config.js
 publicPath: '/public/',
 vendor: ['axios'],
 extractCSS: true,
diff --git a/3.sh b/3.sh
 $ # srcフォルダにいることを確認してください。
 $ # 動画ではHTTPリクエストにisomorphic-fetchを使っています。
 $ # しかしNuxt.js公式がaxiosの使用を超勧めていますので長い物には巻かれます。
 $ yarn add axios
 $ # デフォルトのindex.vueの中身を消して、一から作ります。
 $ echo '' > pages/index.vue && vi pages/index.vue
diff --git a/4.sh b/4.sh
 $ # srcフォルダにいることを確認してください。
 $ # yarn devでdev webサーバを起動して、Nuxt.jsも起動させます。
 $ yarn dev
diff --git a/5.1.nuxt.config.js b/5.1.nuxt.config.js
 vendor: ['axios', 'babel-polyfill'],
diff --git a/5.1.sh b/5.1.sh
 $ # srcフォルダにいることを確認してください。
 $ # yarn devでdev webサーバを起動して、Nuxt.jsも起動させます。
 $ yarn dev
diff --git a/5.nuxt.config.js b/5.nuxt.config.js
 babel: {
  presets: [
    'es2015',
    'stage-0'
  ],
  plugins: [
    ['transform-runtime', {
      'polyfill': true,
      'regenerator': true,
    }]
  ],
 },
diff --git a/5.sh b/5.sh
 $ # srcフォルダにいることを確認してください。
 $ # babelプラグインをインストールします。
 $ yarn add -D babel-plugin-module-resolver babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0
 $ # nuxt.config.jsという設定ファイルを編集します。
 $ vi nuxt.config.js
diff --git a/6.1.sh b/6.1.sh
 $ # プロジェクトを選択できるよう追加します。
 $ firebase use --add
diff --git a/6.sh b/6.sh
 $ # <proj>フォルダに移動します。
 $ cd <proj>
 $ # firebase-toolsをインストールします。
 $ sudo npm i -g firebase-tools
 $ # ここでユーザログインをします。firebase公式のチュートリアルに沿って操作しました。
 $ firebase login
 $ # Cloud Functionsを含め、初期設定を行います。
 $ firebase init functions
 $ # プロジェクトが無いと思うので[create a new project]を選択します。
  - ? Select a default Firebase project for this directory:
 $ # どの言語（JSかTS）を使いたいか聞かれます。以降の質問に対してはデフォルトで良いです。
  - ? What language would you like to use to write Cloud Functions?
  - ? Do you want to use ESLint to catch probable bugs and enforce style? 
  - ? Do you want to install dependencies with npm now?
diff --git a/7.1.sh b/7.1.sh
 $ # functonsフォルダに移動します。
 $ cd functions
 $ # package.jsonを編集します。
 $ vi package.json
diff --git a/7.2.sh b/7.2.sh
 $ # 追加したパッケージをインストールします。
 $ yarn
 $ # express をインストールします。
 $ yarn add express
 $ # srcフォルダに移動し、アプリをビルドし、functionsフォルダに戻ってきましょう。
 $ cd ../src/ && yarn build && cd ../functions/
diff --git a/7.nuxt.config.js b/7.nuxt.config.js
 buildDir: '../functions/nuxt',
diff --git a/7.sh b/7.sh
 $ # nuxtの設定ファイルを編集します。
 $ vi src/nuxt.config.js
diff --git a/8.index.js b/8.index.js
 const functions = require('firebase-functions')
 const express = require('express')
 const { Nuxt } = require('nuxt')

 const app = express()

 const config = {
  dev: false,
  buildDir: 'nuxt',
  build: {
    publicPath: '/public/'
  }
 }
 const nuxt = new Nuxt(config)

 function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  nuxt.renderRoute('/').then(result => {
    res.send(result.html)
  }).catch(e => {
    res.send(e)
  })
 }
 app.get('*', handleRequest)
 exports.nuxtApp = functions.https.onRequest(app)
diff --git a/8.sh b/8.sh
 $ # functionsフォルダにいることを確認してください。
 $ echo '' > index.js && vi index.js
diff --git a/9.1.sh b/9.1.sh
 $ # ページは全てNuxt.jsがレンダリングするので、標準でできたファイルは消しましょう。
 $ rm public/404.html public/index.html
 $ # functions/nuxtからdistをpublic/assetsにコピーしましょう。
 $ cp -R functions/nuxt/dist public/assets
 $ # src/static/からもpublicにコピーしましょう。
 $ cp -R src/static/* public
diff --git a/9.sh b/9.sh
 $ # functionsフォルダにいることを確認してください。
 $ # <proj>フォルダに移動します。
 $ cd ../
 $ firebase init hosting
 $ # 質問に対する回答は全部デフォルトで良いです。
  - ? What do you want to use as your public directory?
  - ? Configure as a single-page app (rewrite all urls to /index.html)?
diff --git a/file0.txt b/file0.txt
 $ # プロジェクト用のフォルダ(<proj>、任意に決めてください)を作って、そのフォルダの中へ移動。
 $ mkdir <proj> && cd $_
diff --git a/file1.txt b/file1.txt
 $ # vue-cliとyarnをインストールします。
 $ sudo npm i -g vue-cli yarn
 $ # nuxt-community/starter-templateを元にsrcフォルダへNuxtアプリが自動設定されます。
 $ vue init nuxt-community/starter-template src
 $ # 質問への回答は全部デフォルトでいいかと思います。Enterを押し続けてください。
  - ? Generate project in current directory?
  - ? Project name
  - ? Project description
  - ? ? Author
 $ # srcフォルダへ移動し、npmパッケージをインストールします。
 $ cd src/ && yarn
diff --git a/file10.txt b/file10.txt
 $ # srcフォルダにいることを確認してください。
 $ # yarn devでdev webサーバを起動して、Nuxt.jsも起動させます。
 $ yarn dev
diff --git a/file11.txt b/file11.txt
 $ # <proj>フォルダに移動します。
 $ cd <proj>
 $ # firebase-toolsをインストールします。
 $ sudo npm i -g firebase-tools
 $ # ここでユーザログインをします。firebase公式のチュートリアルに沿って操作しました。
 $ firebase login
 $ # Cloud Functionsを含め、初期設定を行います。
 $ firebase init functions
 $ # プロジェクトが無いと思うので[create a new project]を選択します。
  - ? Select a default Firebase project for this directory:
 $ # どの言語（JSかTS）を使いたいか聞かれます。以降の質問に対してはデフォルトで良いです。
  - ? What language would you like to use to write Cloud Functions?
  - ? Do you want to use ESLint to catch probable bugs and enforce style? 
  - ? Do you want to install dependencies with npm now?
diff --git a/file12.txt b/file12.txt
 $ # プロジェクトを選択できるよう追加します。
 $ firebase use --add
diff --git a/file13.txt b/file13.txt
 $ # nuxtの設定ファイルを編集します。
 $ vi src/nuxt.config.js
diff --git a/file15.txt b/file15.txt
 $ # functonsフォルダに移動します。
 $ cd functions
 $ # package.jsonを編集します。
 $ vi package.json
 $ # package.jsonを編集します。
diff --git a/file16.txt b/file16.txt
 $ # 追加したパッケージをインストールします。
 $ yarn
 $ # express をインストールします。
 $ yarn add express
 $ # srcフォルダに移動し、アプリをビルドし、functionsフォルダに戻ってきましょう。
 $ cd ../src/ && yarn build && cd ../functions/
diff --git a/file17.txt b/file17.txt
 $ # functionsフォルダにいることを確認してください。
 $ echo '' > index.js && vi index.js
diff --git a/file19.txt b/file19.txt
 $ # functionsフォルダにいることを確認してください。
 $ # <proj>フォルダに移動します。
 $ cd ../
 $ firebase init hosting
 $ # 質問に対する回答は全部デフォルトで良いです。
  - ? What do you want to use as your public directory?
  - ? Configure as a single-page app (rewrite all urls to /index.html)?
diff --git a/file2.txt b/file2.txt
 $ # srcフォルダにいることを確認してください。
 $ # 動画ではHTTPリクエストにisomorphic-fetchを使っています。
 $ # しかしNuxt.js公式がaxiosの使用を超勧めていますので長い物には巻かれます。
 $ yarn add axios
 $ # デフォルトのindex.vueの中身を消して、一から作ります。
 $ echo '' > pages/index.vue && vi pages/index.vue
diff --git a/file20.txt b/file20.txt
 $ # ページは全てNuxt.jsがレンダリングするので、標準でできたファイルは消しましょう。
 $ rm public/404.html public/index.html
 $ # functions/nuxtからdistをpublic/assetsにコピーしましょう。
 $ cp -R functions/nuxt/dist public/assets
 $ # src/static/からもpublicにコピーしましょう。
 $ cp -R src/static/* public
diff --git a/file21.txt b/file21.txt
 $ # <proj>フォルダにいることを確認してください。
 $ # firebase.json を編集します。
 $ vi firebase.json
diff --git a/file23.txt b/file23.txt
 $ sudo firebase serve --only functons,hosting
diff --git a/file24.txt b/file24.txt
 $ # <proj>フォルダにいることを確認してください。
 $ # src/nuxt.config.jsを編集します。
 $ vi src/nuxt.config.js
diff --git a/file25.txt b/file25.txt
 $ # <proj>フォルダにいることを確認してください。
 $ vi functions/index.js
diff --git a/file26.txt b/file26.txt
 $ # <proj>フォルダにいることを確認してください。
 $ # srcフォルダへ移動してビルドをします。
 $ cd src && yarn build
diff --git a/file27.txt b/file27.txt
 $ # <proj>フォルダに移動して静的アセットをコピー
 $ cd .. && cp -R functions/nuxt/dist/ public && cp -R src/static/* public
 $ # localhostで実行
 $ sudo firebase serve --only hosting,functions
diff --git a/file28.txt b/file28.txt
 $ # <proj>フォルダにいることを確認してください。
 $ firebase deploy
diff --git a/file4.txt b/file4.txt
 $ # nuxt.config.jsという設定ファイルを編集します。
 $ vi nuxt.config.js
diff --git a/file6.txt b/file6.txt
 $ # srcフォルダにいることを確認してください。
 $ # yarn devでdev webサーバを起動して、Nuxt.jsも起動させます。
 $ yarn dev
diff --git a/file7.txt b/file7.txt
 $ # srcフォルダにいることを確認してください。
 $ # babelプラグインをインストールします。
 $ yarn add -D babel-plugin-module-resolver babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0
 $ # nuxt.config.jsという設定ファイルを編集します。
 $ vi nuxt.config.js
diff --git a/firebase.json b/firebase.json
 "rewrites": [
  {
    "source": "**",
    "function": "nuxtApp"
  }
 ]
diff --git a/index.js b/index.js
 const functions = require('firebase-functions')
 const express = require('express')
 const { Nuxt } = require('nuxt')

 const app = express()

 const config = {
  dev: false,
  buildDir: 'nuxt',
  build: {
    publicPath: '/public/'
  }
 }
 const nuxt = new Nuxt(config)

 function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  nuxt.renderRoute('/').then(result => {
    res.send(result.html)
  }).catch(e => {
    res.send(e)
  })
 }
 app.get('*', handleRequest)
 exports.nuxtApp = functions.https.onRequest(app)
diff --git a/index.vue b/index.vue
 <template>
  <ul>
    <li v-for="(fact, factIdx) in facts" :key="factIdx">
      {{ fact.text }}
    </li>
  </ul>
 </template>
 <script>
 import axios from 'axios'
 export default {
  async asyncData() {
    const res = await axios.get('https://nuxt-ssr.firebaseio.com/facts.json')
    const facts = res.data
    return { facts }
  }
 }
 </script>
 <style>
 </style>
diff --git a/nuxt.config.js b/nuxt.config.js
 buildDir: '../functions/nuxt',
	$ # プロジェクト用のフォルダ(<proj>、任意に決めてください)を作って、そのフォルダの中へ移動。
	$ mkdir <proj> && cd $_
	$ # <proj>フォルダにいることを確認してください。
	$ # src/nuxt.config.jsを編集します。
	$ vi src/nuxt.config.js
	$ # <proj>フォルダにいることを確認してください。
	$ vi functions/index.js
	$ # <proj>フォルダにいることを確認してください。
	$ # srcフォルダへ移動してビルドをします。
	$ cd src && yarn build
	$ # <proj>フォルダに移動して静的アセットをコピー
	$ cd .. && cp -R functions/nuxt/dist/ public && cp -R src/static/* public
	$ # localhostで実行
	$ sudo firebase serve --only hosting,functions
	$ # <proj>フォルダにいることを確認してください。
	$ firebase deploy
	$ # <proj>フォルダにいることを確認してください。
	$ # firebase.json を編集します。
	$ vi firebase.json
	$ # vue-cliとyarnをインストールします。
	$ sudo npm i -g vue-cli yarn
	$ # nuxt-community/starter-templateを元にsrcフォルダへNuxtアプリが自動設定されます。
	$ vue init nuxt-community/starter-template src
	$ # 質問への回答は全部デフォルトでいいかと思います。Enterを押し続けてください。
	- ? Generate project in current directory?
	- ? Project name
	- ? Project description
	- ? ? Author
	$ # srcフォルダへ移動し、npmパッケージをインストールします。
	$ cd src/ && yarn
	$ # nuxt.config.jsという設定ファイルを編集します。
	$ vi nuxt.config.js
	$ # srcフォルダにいることを確認してください。
	$ # 動画ではHTTPリクエストにisomorphic-fetchを使っています。
	$ # しかしNuxt.js公式がaxiosの使用を超勧めていますので長い物には巻かれます。
	$ yarn add axios
	$ # デフォルトのindex.vueの中身を消して、一から作ります。
	$ echo '' > pages/index.vue && vi pages/index.vue