如何在web服务器上将reactJS应用程序部署到Internet

时间:2017-04-15 20:14:42

标签: node.js reactjs webpack webpack-dev-server

我开始关注Youtube上的reatJS教程,现在我想通过互联网与LEAD开发人员分享我的学习知识。

我的macbook上安装了npm / node js,我完成工作后运行npm start并在端口8081上给出了本地主机地址,但我在不同的机器上运行了apache web服务器打开互联网,所以我想使用npm / webpack将reactJS应用程序部署到运行apache的计算机上。

我有这个package.json文件设置。

{
  "name": "react-basics",
  "version": "1.0.0",
  "description": "Some Basics ReactJS",
  "main": "index.js",
  "scripts": {
    "start": "npm run build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
  },
  "keywords": [
    "reactJS"
  ],
  "author": "Ciasto Piekarz",
  "license": "MIT",
  "dependencies": {
    "react": "^15.5.3",
    "react-dom": "^15.5.3"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  }
}

webpack.config.js

var webpack = require("webpack");
var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
        {
            test: /\.js?/,
            include: SRC_DIR,
            loader: "babel-loader",
            query: {
                presets: ["react", "es2015", "stage-2"]
            }
        }

        ]
    }



};

module.exports = config;

我是否必须在远程计算机上安装npm /node.js并且对Internet开放?我可以不只是使用Apache Web服务器?如果是这样,我怎么只坚持端口80?

1 个答案:

答案 0 :(得分:2)

我认为你只需要运行npm run build:prod。它可能会生成一个dist文件夹,该文件夹应上传到您的服务器上,并用作apache的webroot文件夹。