Не удается получить доступ к process.env.PORT из Heroku после развертывания проекта Vue2 + webpack. Есть ли другой способ получить доступ к PORT из heroku? - PullRequest
Новая
       18

Не удается получить доступ к process.env.PORT из Heroku после развертывания проекта Vue2 + webpack. Есть ли другой способ получить доступ к PORT из heroku?

0 голосов
/ 18 января 2020

У меня разные порты на клиенте (Vue2) и на сервере (Nodejs), я создал проект vue с командой vue init webpack <project_name>. Я попробовал все решения онлайн, но все еще не могу понять, как мне получить доступ к значению process.env.PORT в vue. 

NODE_ENV=development
PORT=8000

MONGO_URI=mongodb+srv:\\\mongoURI\\

. Я понятия не имею, что происходит в веб-пакете. config, но вот плагин для переменных env в webpack.prod.conf.js: 

plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': require('../config/prod.env')
    }),

...
]

это мой prod.env.js, где я могу получить доступ к process.env.PORT (8000) из файла .env который находится в root проекта 

'use strict'
const dotenv = require('dotenv');
dotenv.config({ path: './.env' });

module.exports = {
  NODE_ENV: '"production"',
  PORT: process.env.PORT
}

И я использую этот порт из prod.env.js в моем экземпляре Vue ax ios, API. js: 

import axios from 'axios';

export default() => {
  if (process.env.NODE_ENV === "development") {
    console.log("In development, port: ", process.env.PORT);
    return axios.create({
      baseURL: 'http://localhost:' + process.env.PORT + '/api/',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.token}`
      }
    });
  } else if (process.env.NODE_ENV === "production") {
    console.log("In production, api port is: ", process.env.PORT);
    return axios.create({
      baseURL: '' + process.env.PORT + '/api/',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.token}`
      }
    });
  }
};

Все выглядит нормально на стороне сервера, но все же вы можете взглянуть на мой app.js: 

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const morgan = require('morgan');
const dotenv = require('dotenv');
const routes = require('./server/routes/index');
const connectDB = require('./server/config/db');
var serveStatic = require('serve-static');

// load env vars
dotenv.config({ path: './.env' });

// Connect to database
connectDB();

var PORT = process.env.PORT;

// Morgan is an api logger, prints all the api calls in console
app.use(morgan('combined'));

// Body Parse
app.use(bodyParser.json());

// Enable cors
app.use(cors());

// Routes
app.use('/api', routes);


// Handle Production
app.use(serveStatic(__dirname + "/client/dist"));

app.listen(PORT, process.env.IP, () => console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`));

Я не вижу проблем в реализации, но я думаю, что Heroku не изменяет значение PORT в файле .env при создании проекта vue, поэтому vue в конечном итоге принимает значение порта 8000, в то время как node js получает новое значение порта при запуске npm start Это Снимок экрана после развертывания, как вы можете видеть, мы получаем новый порт как обычно , но

вы можете увидеть здесь в клиенте I все еще есть 8000, которые я определил в файле .env

Есть ли другой способ получить доступ к process.env.PORT, чтобы после развертывания он получал новый порт от Heroku ???

...