javascript - create - Cómo implementar una aplicación React en el servidor web Apache

react change title

Question

He creado una aplicación React básica desde https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm aquí. Quiero ejecutar este código de prueba en un servidor basado en Apache. Sé que necesito crear una versión distribuible, pero estoy No puedo averiguar cómo hacerlo y no puedo encontrar instrucciones claras.

He visto este post React, js en el servidor Apache pero no tiene más que unas pocas pautas

Si uno puede guiar con algunos consejos claros o instrucciones, se lo agradeceré. PS Sé cómo funciona Apache soy un desarrollador de PHP

Answer 1

Como se dijo en el post, React es una tecnología basada en navegador. Solo muestra una vista en un documento HTML.

Para poder tener acceso a su "Aplicación React", necesita:

1. Agrupa tu aplicación React en un paquete
2. Haga que Apache apunte a su archivo html en su servidor y permita el acceso externo.

Puede tener toda la información aquí: https://httpd.apache.org/docs/trunk/getting-started.html para el servidor Apache, y aquí para hacer su paquete de javascript https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

Answer 2

En última instancia, pude resolverlo, solo espero que ayude a alguien como yo.
A continuación se muestra cómo debe verse el archivo de configuración del paquete web, compruebe el directorio dist y el archivo de salida especificado. Me faltaba la manera de especificar la ruta del directorio dist

const webpack = require(''webpack'');
const path = require(''path'');
var config = {
    entry: ''./main.js'',

    output: {
        path: path.join(__dirname, ''/dist''),
        filename: ''index.js'',
    },

    devServer: {
        inline: true,
        port: 8080
    },
    resolveLoader: {
        modules: [path.join(__dirname, ''node_modules'')]
    },
    module: {
        loaders: [
            {
                test: //.jsx?$/,
                exclude: /node_modules/,
                loader: ''babel-loader'',

                query: {
                    presets: [''es2015'', ''react'']
                }
            }
        ]
    },
}

module.exports = config;

Entonces el paquete json archivo

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress",
    "production": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "express": "^4.13.3",
    "webpack": "^1.9.6",
    "webpack-devserver": "0.0.6"
  }
}

Observe la sección de secuencias de comandos y la sección de producción, la sección de producción es lo que le proporciona el archivo index.js desplegable final (el nombre puede ser cualquier cosa)

El descanso para las cosas dependerá de tu código y componentes.

Ejecutar la siguiente secuencia de comandos

npm instalar

Esto debería darle toda la dependencia (módulos de nodo)

entonces

npm correr producción

Esto debería obtener el archivo index.js final que contendrá todo el código incluido.

Una vez hecho esto, coloque los archivos index.html e index.js en www / html o en el directorio raíz de la aplicación web y eso es todo.

Answer 3

Espero que pueda ayudar a este problema, que tenemos y quién. El comentario que tengo ante mí es correcto porque obtener mucha ayuda, pero en mi caso era poco diferente. Primero escribo en package.json siguiente código "start": "set PORT=80&&react-scripts start" . Porque uso windows y wampserver64 con apache. Allí hago un host virtual, y en este host virtual exporté todo lo que tengo en la aplicación React de la carpeta build dist . Ahí esto funciona muy bien. Y luego, después de más pruebas, estoy desplegando desde el servidor de Internet. Si desea por favor visite el siguiente enlace http://miodragtrajanovic.com/ . Este es un sitio web estático que uso en mi trabajo Bootstrap and React

Answer 4

Primero, vaya a la carpeta packages.json y ponga esta línea de código para que coincida con su dirección de dominio real:

"homepage": "https://yourwebsite.com/afolder/",

Segundo, ve a la terminal en la carpeta de tu proyecto y escribe:

npm run build

Ahora verá que en las estructuras de carpetas del proyecto hay una carpeta de compilación .

Sólo ese uno lleva una carga a su servidor usando filezilla.

Answer 5

Puede ejecutarlo a través del proxy Apache, pero tendría que estar ejecutándose en un directorio virtual (por ejemplo, http://mysite.something/myreactapp ).

Esto puede parecer un poco redundante, pero si tiene otras páginas que no forman parte de su aplicación React (por ejemplo, páginas PHP), puede servir todo a través del puerto 80 y hacer que parezca que todo es un sitio web cohesivo.

1.) Inicie su aplicación de reacción con npm run, o cualquier comando que esté usando para iniciar el servidor de nodo. Suponiendo que se está ejecutando en http://127.0.0.1:8080

2.) Edite httpd-proxy.conf y agregue:

ProxyRequests On
ProxyVia On
<Proxy *>
  Order deny,allow
  Allow from all
  </Proxy>

ProxyPass /myreactapp http://127.0.0.1:8080/
ProxyPassReverse /myreactapp  http://127.0.0.1:8080/

3.) Reinicie Apache