Nuxt Heroku 什么给它填baseurl 到运行？

Question

这是我的 nuxt.config.js 文件

env: {
  baseUrl: process.env.BASE_URL || "http://localhost:3000"
},
  
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
  baseURL: process.env.baseUrl,
  browserBaseURL: "http://localhost:3000"
},

Heroku 日志

Listening on: http://localhost:21411/
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch.

什么是环境变量我需要添加到 heroku admin 才能工作，每次我尝试运行它时，heroku 托管的端口不断变化。

编辑这里是我的 Nuxt 配置：

     export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    script: [
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-core.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-service.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-ui.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-clustering.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-data.js"
      }
    ],
    title: "Restaurants-D-System",
    htmlAttrs: {
      lang: "en"
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" }
    ],
    link: [
      {
        rel: "stylesheet",
        type: "text/css",
        href: "https://js.api.here.com/v3/3.1/mapsjs-ui.css"
      },
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
        rel: "stylesheet"
      },
      {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        href: "https://fonts.googleapis.com/css2?family=Ribeye&display=swap",
        rel: "stylesheet"
      }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  CSS: ["~/assets/normalize.css"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    "@nuxtjs/style-resources",
    // https://go.nuxtjs.dev/buefy
    "nuxt-buefy",
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios"
  ],
  styleResources: {
    scss: ["./assets/main.scss"],
    CSS: ["./assets/normalize.css"]
  },


  axios: {
    baseURL: "http://localhost:4000" // Used as fallback if no runtime config is provided
  },
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },
  serverMiddleware: [{ path: "/api", handler: "~/api/index.js" }],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {}
};

这是我的 json:

{
  
  "version": "1.0.0",
  "engines": {
    "node": "14.16.1"
  },
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/style-resources": "^1.0.0",
    "@vonage/server-sdk": "^2.10.8",
    "core-js": "^3.9.1",
    "express": "^4.17.1",
    "firebase-admin": "^9.8.0",
    "infobip-nodejs": "^0.1.0-alpha.1",
    "lodash.debounce": "^4.0.8",
    "normalize.css": "^8.0.1",
    "nuxt": "^2.2.0",
    "nuxt-buefy": "^0.4.4"
  },
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.34.0",
    "sass-loader": "^10.2.0"
  }
}

这是我的 Express javascript 文件 API:

const express = require("express");
const sms = require("./infoSms/index");
const router = require("../api/routes/routesIndex");
const { db, auth, timestamp } = require("./dataBase/index");

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
port = process.env.PORT || 3000;

app.use(router);

if (require.main === module) {
  app.listen(port, () => {
    console.log(`server is up ` + port);
  });
} else {
  console.log("server is up by Nuxtjs");
}
module.exports = app;

Answer 1

设置在官方中解释得很好@nuxtjs/axios documentation

export default {
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: 'http://localhost:4000', // Used as fallback if no runtime config is provided
  },

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },
}

此外，如那里所述

The use of runtime config is mandatory in case of using environment variables in production, otherwise, the values will be hard coded during build and won't change.

通常，Web 服务运行在端口 80 (https) 或 443 (https) 上，请仔细检查您的仪表板 (https://dashboard.heroku.com/apps/<your-app>/settings) 中是否有。即使你可能甚至不需要指定它。

阅读 deployment page 以了解到目前为止所需的几个步骤，也就是

heroku create myapp
heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0
git push heroku master // git push heroku develop:master if working on develop and not master

此外，更喜欢在 Nuxt 中对环境变量使用这种方法：

Nuxt Heroku 什么给它填baseurl 到运行？

Nuxt Heroku what to fill baseurl for it to run?

heroku

nuxt.js