くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Heroku+CloudflareなNuxtでSSRしてみる

GAEでNuxtのSSRを試してみたけど、メモリが足りずに落ちる。。
Herokuは無料で512M使えるので、こっちも試してみる。

ただ、無料版だとHTTPS化できないのでCloudflareも一緒に。

Herokuでデプロイできるようにする

まずは、NuxtアプリをHerokuにデプロイできるようにしていく。

以下を見て進めれば、OKな感じ。

Heroku CLIとかはインストール済みの想定。

環境変数の追加

Herokuに環境変数を追加。

$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

.envなどを使っている場合は、その環境変数も追加しておく

CLIでもできるけど、Webコンソールからもできる。

f:id:wannabe-jellyfish:20200125111932p:plain

.envがあるならCLIでインポートもできるらしい

//.envをherokuへ反映
$ heroku plugins:install heroku-config   //install 
$ heroku config:push

Procfileの作成

Procfileというファイルを作成。
webタイプで、npm startが起動するようにしておく。

web: npm start

package.jsonの変更

ビルドや起動がされるようにpackage.jsonを設定。
特にデフォルトで問題ない。

heroku用のbuildコマンドがある場合は、heroku-postbuildを追加。
npm run buildの代わりに、npm run heroku-postbuildが呼ばれる。

  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    // ...略
    // 追加
    "heroku-postbuild": "npm run build"
  },

詳しくはこのあたり。

デプロイ

GitHubと連携できるので、masterにpushされると自動ビルドするように設定。

f:id:wannabe-jellyfish:20200125112142p:plain

「Deploy>Manual deploy」から手動でデプロイもできる。

f:id:wannabe-jellyfish:20200125112154p:plain

Clowdflare

Clowdflareの設定

ポチポチしていくと、DNSレコードを追加する画面になるので、

TYPE: CNAME
Name: <設定するドメイン>
Value: <Herokuアプリのドメイン>

を追加する。

これで、「Herokuアプリのドメイン」→「設定するドメイン」にaliasされるようにする。

f:id:wannabe-jellyfish:20200125112844p:plain

設定が完了するとネームサーバの情報が表示されるので、
ドメインを買ったサイトにいって、ネームサーバを変更しておく

HerokuのSettingsでドメインを追加

独自ドメインでアクセスできるようにHeroku側の設定を変更。

f:id:wannabe-jellyfish:20200125112825p:plain

その他

WebコンソールからHerokuのログを見る

ビルド時のログは、Activityにあるビルドのアクティビティから「View build log」でみれる。

f:id:wannabe-jellyfish:20200125113725p:plain

実行時のログは、右上のMOREに「View logs」からみれる。

f:id:wannabe-jellyfish:20200125113243p:plain

Herokuアプリが停止しないようにする

無料で使えるHeroku Schedulerを使って、10分ごとに叩き起こす。

実行するコマンドに、curlでアクセスするコマンドを実行すればOK

curl https://<HerokuアプリのURL>

f:id:wannabe-jellyfish:20200125114120p:plain

f:id:wannabe-jellyfish:20200125114135p:plain

f:id:wannabe-jellyfish:20200125114147p:plain

以上!!

参考にしたサイト