如何在 ubuntu 服务器中设置我的 React 应用程序

IT技术 reactjs react-redux
2021-05-21 15:46:43

我在 react js 中完成了一些任务，我想将它们移动到服务器以供我的客户审查。但我不知道，如何在服务器中运行这个react应用程序。目前我正在使用http://localhost:3000

在这里，我有几个问题。1. 我们需要在 ubuntu 服务器中配置所有必要的设置吗..？2. 我有一个指向我的 Ubuntu 的 IP 地址。那么，如何使用该 IP 在服务器中运行应用程序？

这是我的 webpack.production.js 文件

var path = require('path');
var webpack = require('webpack');
module.exports = {
  entry: './main.js',
  output: {
    path: path.join(__dirname, '/dist/assets'),
    filename: '[name].bundle.js',
    publicPath: '/',
    sourceMapFilename: '[name].map'
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      mangle: {
        screw_ie8: true,
        keep_fnames: true
      },
      compress: {
        screw_ie8: true
      },
      comments: false
    })
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

"scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --inline  --history-api-fallback",
    "start:prod": "webpack && node server.js",
    "build": "webpack -p --config ./webpack.production.config.js",
    "build:dev": "webpack --env=dev --progress --profile --colors",
    "build:dist": "webpack --env=production --progress --profile --colors"
  }

谢谢

2个回答

如果您使用 Webpack 创建包，您需要将index.html和bundle.js移动到客户端的服务器，并配置 HTTP 服务器（如 Nginx 或 Apache）以指向index.html文件。

这个问题很广泛。如果您有服务器，则需要使用 ssh 登录并安装 Apache 或其他服务器（如 nginx）。我猜你的 reacft 应用程序不依赖于 PHP 或节点，所以它是带有 JS 的静态 html。所以基本上：

sudo apt-get install apache2

将安装服务器并检查它是否正在运行只需使用浏览器并导航到http://<your server ip>您应该看到一个页面说：»它正在工作«

如果是这样：

cd /var/www/html
rm -rf *
exit

cd /your/local/project
scp -r * user@<your server ip>:/var/www/html

那应该将您的所有文件上传到/var/www/html. 如果您随后收到Forbidden回复，则需要sudo chown -R www-data:www-data *输入/var/www/html

看看这里https://help.ubuntu.com/lts/serverguide/httpd.html

但是，但是，根据您的需要，设置服务器变得更加复杂：例如 node/php/mysql 支持，当然还有操作系统，上面的说明适用于 ubuntu。此外，没有考虑安全性，所以如果不知道自己在做什么，请小心！

其它你可能感兴趣的问题
上一篇尝试使用 moment.js 计算 2 个时间和日期之间的差异 下一篇React-native：tvOS 如何强制按钮聚焦？