在Apache服务器上部署ReactJS和NodeJS

时间:2019-04-19 18:03:37

标签: node.js reactjs apache express deployment

我正在开发一个ReactJS应用程序,该应用程序在与MySQL数据库交互的后端中使用NodeJS。我想将此部署在Apache服务器上。我可以看到已部署我的ReactJS代码并可以查看它,但是任何NodeJS操作都无法正常工作。我在客户端目录中构建应用程序

这是目录的结构。客户端文件夹包含ReactJS代码,服务器目录包含后端Node。

client
│   build
│   node_modules
|   public
|   src
|   package-lock.json
|   package.json
|   .gitignore
│   
server 
│   config   
│   models
|   routes
|      └─── api
|   validation
.gitignore
package-lock.json
package.json
server.js

package.json

{
  "name": "xyz",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "author": "xyz",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.3.1",
    "concurrently": "^4.1.0",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "jquery": "^3.4.0",
    "jsonwebtoken": "^8.5.1",
    "mysql2": "^1.6.5",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "popper": "^1.0.1",
    "sequelize": "^5.7.0",
    "validator": "^10.11.0"
  },
  "devDependencies": {
    "nodemon": "^1.18.11"
  }
}

客户端-package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-input-mask": "^2.0.4",
    "react-redux": "^7.0.2",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "reactstrap": "^8.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

server.js

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");

const subscribers = require("./server/routes/api/subscribers");

// Database
const db = require("./server/config/database");

// Test DB
db.authenticate()
  .then(() => console.log("Database connected..."))
  .catch(err => console.log("Error: " + err));

const app = express();

// Body parser middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get("/", (req, res) => res.send("hello world"));

// User Routes
app.use("/api/subscribers", subscribers);

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  if (req.method === "OPTIONS") {
    res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
    return res.status(200).json({});
  }
  next();
});

// Server static assests if in production
if (process.env.NODE_ENV === "production") {
  // Set static folderr
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server running on port ${port}`));

在网站可用下,这就是.conf文件的样子

Include /etc/phpmyadmin/apache.conf
<VirtualHost *:70>
    ServerName xyz.com
    ServerAlias www.xyz.com
    ServerAdmin info@xyz.com
    DocumentRoot /var/www/landing/client/build
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
RewriteCond %{SERVER_NAME} =xyz.com [OR]
RewriteCond %{SERVER_NAME} =www.xyz.com
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>
<Directory /var/www/landing/client/build>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>


# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

0 个答案:

没有答案