Проблемы при хостинге экспресс с машинописным и реагирующим приложением на Heroku - PullRequest
Новая
       2

Проблемы при хостинге экспресс с машинописным и реагирующим приложением на Heroku

0 голосов
/ 03 июля 2018

При размещении моего приложения я получаю следующие ошибки 

2018-07-03T23:32:25.175363+00:00 heroku[web.1]: Starting process with command `npm start`
2018-07-03T23:32:28.093779+00:00 heroku[web.1]: State changed from starting to crashed
2018-07-03T23:32:27.719911+00:00 app[web.1]: 
2018-07-03T23:32:27.719929+00:00 app[web.1]: > doombot@1.0.0 start /app
2018-07-03T23:32:27.719931+00:00 app[web.1]: > node src/server/dist/server.js
2018-07-03T23:32:27.719932+00:00 app[web.1]: 
2018-07-03T23:32:27.942441+00:00 app[web.1]: module.js:545
2018-07-03T23:32:27.942444+00:00 app[web.1]:     throw err;
2018-07-03T23:32:27.942446+00:00 app[web.1]:     ^
2018-07-03T23:32:27.942447+00:00 app[web.1]: 
2018-07-03T23:32:27.942449+00:00 app[web.1]: Error: Cannot find module '/app/src/server/dist/server.js'
2018-07-03T23:32:27.942451+00:00 app[web.1]:     at Function.Module._resolveFilename (module.js:543:15)
2018-07-03T23:32:27.942453+00:00 app[web.1]:     at Function.Module._load (module.js:470:25)
2018-07-03T23:32:27.942454+00:00 app[web.1]:     at Function.Module.runMain (module.js:690:10)
2018-07-03T23:32:27.942456+00:00 app[web.1]:     at startup (bootstrap_node.js:194:16)
2018-07-03T23:32:27.942457+00:00 app[web.1]:     at bootstrap_node.js:666:3
2018-07-03T23:32:27.960851+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-07-03T23:32:27.961370+00:00 app[web.1]: npm ERR! errno 1
2018-07-03T23:32:27.965212+00:00 app[web.1]: npm ERR! doombot@1.0.0 start: `node src/server/dist/server.js`
2018-07-03T23:32:27.966189+00:00 app[web.1]: npm ERR! Exit status 1
2018-07-03T23:32:27.967067+00:00 app[web.1]: npm ERR! 
2018-07-03T23:32:27.967873+00:00 app[web.1]: npm ERR! Failed at the doombot@1.0.0 start script.
2018-07-03T23:32:27.968281+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-07-03T23:32:28.070076+00:00 heroku[web.1]: Process exited with status 1
2018-07-03T23:32:28.010680+00:00 app[web.1]: 
2018-07-03T23:32:28.010886+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-07-03T23:32:28.011019+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-07-03T23_32_27_989Z-debug.log

Это мой package.json file 

{
  "name": "doombot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tsc": "tsc",
    "start": "node src/server/dist/server.js",
    "heroku-postbuild": "webpack --config webpack.prod.js; tsc -p ./tsconfig.json",
    "server": "nodemon src/server/lib/server.ts",
    "client": "webpack-dev-server --open --config webpack.dev.js",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "engines": {
    "npm": "6.0.0",
    "node": "9.9.0"
  },
  "dependencies": {
    "@types/express": "^4.11.1",
    "antd": "^3.6.4",
    "app-root-path": "^2.1.0",
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "typescript": "2.9.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-import": "^1.8.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "concurrently": "^3.5.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "html-webpack-plugin": "^3.2.0",
    "nodemon": "^1.17.3",
    "style-loader": "^0.20.3",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3",
    "webpack-merge": "^4.1.3"
  }
}

webpack.common.js 

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/client/index.js',
  plugins: [new CleanWebpackPlugin(['build']), new HtmlWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  }
};

webpack.dev.js 

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './build',
    port: 3000,
    open: true,
    proxy: {
      '/api': 'http://localhost:4040'
    }
  }
});

webpack.prod.js 

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new UglifyJSPlugin({
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
});

и мой tsconfig file 

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "pretty": true,
    "sourceMap": true,
    "target": "es6",
    "outDir": "./src/server/dist", // creates the dist directory & places compiles files here
    "baseUrl": "./src/server/lib"
  },
  "include": [
    "./src/server/lib/**/*.ts" // specifies that we should include all ts files within lib
  ],
  "exclude": ["node_modules"]
}

Если я правильно понимаю, это не появляется из-за неправильной сборки. У меня вопрос, как я могу правильно построить и запустить свое приложение?

Если вы хотите увидеть весь мой код, вы можете найти его здесь - https://github.com/albertogodinez/dooms-data

1 Ответ

0 голосов
/ 04 июля 2018

Вам не хватает нескольких шагов. Давайте вернемся немного назад.

  • Вы говорите Heroku, что для запуска вашего приложения оно должно запускаться node src/server/dist/server.js (потому что вы указываете это как start скрипт в вашем package.json). Однако server.js не существует в Heroku, есть только server.ts (т.е. файл TypeScript).
  • Таким образом, вам придется сказать Heroku преобразовать ваш файл TypeScript в Javascript - прямо сейчас, вы только говорите ему, чтобы он собрал ваш клиент (т.е. через webpack в сценарии heroku-postbuild). Чтобы это исправить, вы можете изменить этот скрипт на "webpack --mode production; tsc --project=tsconfig.json",
  • Однако это также не сработает, поскольку компилятор TypeScript не установлен на Heroku. Поэтому обязательно добавьте typescript к вашим зависимостям (обратите внимание, что IIRC, Heroku не устанавливает devDependencies, поэтому либо сделайте это регулярной зависимостью, либо попросите Heroku также установить devDependencies .
  • Даже если ваш сервер работает правильно, он обслуживает только ваш API. Если вы также хотите, чтобы ваш клиент был доступным, вы должны указать Express обслужить его. Вы можете сделать это примерно так:

. 

app.use(
  express.static(
    path.join(__dirname, '../../compiled_frontend'),
    { index: false },
  ),
);

Это, я думаю, должно сработать, но, очевидно, больше может быть ошибочным. По совпадению, я работаю над приложением с очень похожей настройкой, и оно с открытым исходным кодом - так что не стесняйтесь посмотреть его , если вам нужно вдохновение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...