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

next.jsをGoogle App Engineで動かす。ついでにTypeScriptで動かす

More than 1 year has passed since last update.

next.jsをFirebase FunctionやGoogle Cloud Containerで動かす話はあったが、GAEの話があんまり無さそうだったのでざっくりメモる。

GAEについて

Google App Engine、ざっくり言うとHerokuっぽいもの。

GAEにはflexibleとstandardというのがあり、NodeのStandardが追加されたということ。

https://qiita.com/comameito/items/3738262923c49da94fb9

この部分に疎いので、どちらが良いのかわからないが、下記のデモなどでもStandardを利用しているため、Standardを利用する(Flexibleだと何がまずいのかいまいちわかっていない)

https://github.com/blainegarrett/node-next-gae-demo

GAEの手続き

このあたりをやった(このへんは資料溢れているし簡単だったので、すっとばす)

  • カード登録をしてのGCPの有効化
    • 無料枠がそこそこあるので、すぐに課金とかは無さそう
  • プロジェクトの作成
    • リージョンが後から変更出来ないので、東京になるようにしておく必要がある
    • firebaseと紐付けるなど考えると、firebaseプロジェクトより先にこっちを作っておいたほうがいいのかもしれない
    • ↑firestore使えなかったりするので今の所デフォルトのリージョンじゃないと不幸があるっぽい
    • チュートリアルが出てくるがスキップした。
  • 予算の設定
    • 一応変な動きしてたらまずいので100円でアラートなるようにした

nextの設定

server側もtypescriptで動かしたい。
https://github.com/zeit/next.js/tree/canary/examples/custom-server-typescript
を見るといちいちコンパイルしていてちょっとやりたくなかったので、ts-nodeで直で動かせる方法を考えた。

楽さをとってるので、上記のほうが自動再起動とかしてくれる嬉しさはあると思う。

next.config.js

yarn add next @zeit/next-typescript ts-node
const withTypescript = require("@zeit/next-typescript")

module.exports = withTypescript()

package.jsonのスクリプトコマンドはこんな具合。

  "scripts": {
    "dev": "ts-node -T server/server.ts ",
    "prestart": "next build",
    "start": "NODE_ENV=production ts-node -T server/server.ts ",
    "deploy": "gcloud app deploy"
  },

ポイントとしては、ts-nodeの引数に-TのtranspileOnlyを指定してやること。
そして、prestartを仕掛けて、start前にビルドされるようにする

欄外: nodemonも入れる

exampleよく見たらdevの場合だけnodemonするの良さそう。
(動作確認出来てないのでなにか足りてないかも)

yarn add nodemon
package.js
{
    "dev": "nodemon --exec ts-node -T server/server.ts",
}
nodemon.json
{
  "watch": ["server/**/*.ts"],
  "execMap": {
    "ts": "ts-node --emit"
  }
}

gcloudのコマンドインストール

brew cask install google-cloud-sdk
gcloud
gcloud auth login

そして先程設定したproject-idで

gcloud config set project <Project-ID>

を設定する

app.yamlの設定

runtime: nodejs8

deploy

Cloud Container Builderの有効化を促されるので従う。

gcloud app deploy

1分ちょいかかる感じ

エラーログを見る

なんか動かなかったらエラーログを見るとよい
App Engine -> バージョン -> 「診断」のカラムにある「ツール」-> 「ログ」で吐き出されてるログがそのまま見れるはず。

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
No 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
ユーザーは見つかりませんでした