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コンソールからもできる。
.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されると自動ビルドするように設定。
「Deploy＞Manual deploy」から手動でデプロイもできる。
Clowdflare
Clowdflareの設定
ポチポチしていくと、DNSレコードを追加する画面になるので、
TYPE: CNAME Name: <設定するドメイン> Value: <Herokuアプリのドメイン>
を追加する。
これで、「Herokuアプリのドメイン」→「設定するドメイン」にaliasされるようにする。
設定が完了するとネームサーバの情報が表示されるので、
ドメインを買ったサイトにいって、ネームサーバを変更しておく
HerokuのSettingsでドメインを追加
独自ドメインでアクセスできるようにHeroku側の設定を変更。
その他
WebコンソールからHerokuのログを見る
ビルド時のログは、Activityにあるビルドのアクティビティから「View build log」でみれる。
実行時のログは、右上のMOREに「View logs」からみれる。
Herokuアプリが停止しないようにする
無料で使えるHeroku Schedulerを使って、10分ごとに叩き起こす。
実行するコマンドに、curlでアクセスするコマンドを実行すればOK
curl https://<HerokuアプリのURL>
以上!!
