最近はheroku+nuxt.jsで個人サービスを作ってました。
サービス構成図
HerokuでNuxtをホスティングする
OAuth、DB、ファイルストレージはFirebaseにする
Nuxt.js側
Nuxt.jsのプロジェクト作成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
[shiro@ ShiroUbuntu ~/work]$ npx create-nuxt-app nuxt-sample create-nuxt-app v2.15.0 ✨ Generating Nuxt.js project in nuxt-sample ? Project name nuxt-sample ? Project description My awe-inspiring Nuxt.js project ? Author name smithshiro ? Choose programming language JavaScript ? Choose the package manager Npm ? Choose UI framework Vuetify.js ? Choose custom server framework Express ? Choose Nuxt.js modules Axios ? Choose linting tools ? Choose test framework None ? Choose rendering mode Universal (SSR) ? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection) npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. . . . . 🎉 Successfully created project nuxt-sample To get started: cd nuxt-sample npm run dev To build & start for production: cd nuxt-sample npm run build npm run start |
Heroku側
Herokuコンソールで”New App”で新規作成
Heroku CLIをUbuntuにインストール & ログイン
1 2 |
[shiro@ ShiroUbuntu ~]$ sudo snap install heroku [shiro@ ShiroUbuntu ~]$ heroku login |
コンソールでデプロイ設定
1 2 3 4 5 6 7 |
[shiro@ ShiroUbuntu ~/work]$ cd nuxt-sample/ [shiro@ ShiroUbuntu ~/work/nuxt-sample]$ git init Reinitialized existing Git repository in /home/shiro/work/nuxt-sample/.git/ [shiro@ ShiroUbuntu ~/work/nuxt-sample]$ heroku git:remote -a {プロジェクト名} set git remote heroku to https://git.heroku.com/{プロジェクト名}.git [shiro@ ShiroUbuntu ~/work/nuxt-sample]$ git add . [shiro@ ShiroUbuntu ~/work/nuxt-sample]$ git commit -am "make it better" |
アプリを開いてみる
エラーが出た
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[shiro@ ShiroUbuntu ~/work/nuxt-sample]$ heroku logs --tail . . . 2020-05-26T12:11:21.237022+00:00 heroku[web.1]: Starting process with command `npm start` 2020-05-26T12:11:24.058827+00:00 app[web.1]: 2020-05-26T12:11:24.058848+00:00 app[web.1]: > nuxt-sample@1.0.0 start /app 2020-05-26T12:11:24.058849+00:00 app[web.1]: > cross-env NODE_ENV=production node server/index.js 2020-05-26T12:11:24.058850+00:00 app[web.1]: 2020-05-26T12:11:25.069279+00:00 app[web.1]: internal/modules/cjs/loader.js:960 2020-05-26T12:11:25.069289+00:00 app[web.1]: throw err; 2020-05-26T12:11:25.069289+00:00 app[web.1]: ^ 2020-05-26T12:11:25.069289+00:00 app[web.1]: 2020-05-26T12:11:25.069290+00:00 app[web.1]: Error: Cannot find module 'vuetify/es5/util/colors' |
参考記事 https://ja.nuxtjs.org/faq/heroku-deployment/
Herokuに設定しないと行けないっぽい
HerokuにNuxt.jsのビルド用の設定を書き込む
空コミット送って再度デプロイを走らせる
herokuはmasterにプッシュしないとデプロイ走ってくれないのです
1 2 3 |
[shiro@ ShiroUbuntu ~/work/nuxt-sample]$ git commit -m "for deploy heroku" --allow-empty [master 2b997d5] for deploy heroku [shiro@ ShiroUbuntu ~/work/nuxt-sample]$ git push heroku master |
結果
こうなればOK
後半はFirebaseとのつなぎ込み。つづくのか?