Question

我试图部署我的reactjs＆amp; AWS EC2实例上的nodejs应用程序，我做了我在Ubuntu 16.04上为节点创建实例的所有操作。我也在Ubuntu上做了所有sudo apt-get update，install node，npm，但是当我在Ubuntu中运行我的服务器并打开域时，只有一个空白页面。

它在控制台中的所有内容都是Uncaught SyntaxError: Unexpected token <，当我点击该错误时，它只会在控制台中显示我的index.html。

我是否必须打开两个Ubuntu窗口并运行我的webpack？或者我的服务器没有正确提供client？或者我需要做些什么才能解决这个问题？

文件结构类似于

├── root
│   ├── client
│   │   ├──src
│   │   │  ├──actions
│   │   │  ├──components
│   │   │  ├──reducers
│   │   │  ├──index.js
│   │   │
│   │   ├──style
│   │   │  ├──style.css
│   │   │
│   │   ├──index.html
│   │
│   ├──server
│      ├──server.js
│   
├── package.json
├── webpack.config.js

我的index.html看起来像

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/client/style/style.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Bungee">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Itim">
    <link rel="icon" type="image/png" href="/client/asset/favicomatic/favicon.ico" sizes="16x16" />
    <link 
      rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" 
      integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 
      crossorigin="anonymous"
    >
    <script 
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
      crossorigin="anonymous"
    >
    </script>
    <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" 
      integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" 
      crossorigin="anonymous">
    </script>
    <script 
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" 
      integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" 
      crossorigin="anonymous"
    >    
    </script>
  <link rel="shortcut icon" href="/favicon.ico"></head>
  <body>
    <div class="container"></div>
    <script type="text/javascript" src="/bundle.js"></script>
  </body>
  <script src="https://use.fontawesome.com/4dd25ac5ce.js"></script>
</html>

和我的server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 3000;
const path = require('path');

let config = require('./config');

app.use(bodyParser.json({type: '*/*'}));
app.use(bodyParser.urlencoded({extended: true}));
app.use(function crossOrigin(req,res,next){
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  return next();
});

app.use(express.static(path.resolve(__dirname, '../client')));

app.use(function(req, res) {
  res.sendFile(path.join(__dirname, '../client/index.html'));
});

app.listen(port, () => {
  console.log('Listening on port ',port);
});

因为我是AWS的新手，并且真的想弄明白这一点。我真诚地感谢任何帮助。

谢谢，

------ EDIT 添加我的webpack.config.js也是为了更好地理解，我是绝望的。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  favicon: './client/asset/favicomatic/favicon.ico'
});

module.exports = {
  entry: ['./client/src/index.js'],
  output: {
    path: path.join(__dirname, '/client'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [HtmlWebpackPluginConfig]
};

AWS EC2上的Reactjs和Nodejs

0 个答案: