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 日志

收听：http://localhost:21411/
错误 R10（启动超时）-> Web 进程未能在启动后 60 秒内绑定到 $PORT。

我需要向 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
    }
  },
}

另外，正如那里解释的那样

如果在生产环境中使用环境变量，则必须使用运行时配置，否则，这些值将在构建过程中被硬编码并且不会改变。

---

通常，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 中对环境变量使用这种方法：https://stackoverflow.com/a/67705541/8816585