Блог

Это мой package.json :

 {
  "name": "aracelli-v-photography-website",
  "version": "0.0.3",
  "private": true,
  "description": "a photography website",
  "main": "api/server.js",
  "scripts": {
    "start": "concurrently -p "{name}" -c "green" -n "database,node" "npx sequelize-cli db:migrate --env=production" "HOSTING_DIR=livebuild/ node server"",
    "dev": "concurrently -p "{time}-{name}" -c "green" -n "react,nodemon" "react-scripts build" "nodemon server"",
    "test": "concurrently -p "{time}-{name}" -c "green" -n "database,node" "DATABASE_URL=$(heroku config:get DATABASE_URL -a aracelli-v-photography) npx sequelize-cli db:migrate --env=production" "DATABASE_URL=$(heroku config:get DATABASE_URL -a aracelli-v-photography) node server"",
    "build": "BASE_URL="https://aracelli-v-photography.herokuapp.com/api" react-scripts build amp;amp; rm -rf livebuild amp;amp; mv build livebuild"
  },
  "repository": {
    "type": "git",
    "url": "git https://github.com/Aracelli-V-Photography/aracelli-v-photography-website.git"
  },
  "author": "jadelynnmasker",
  "license": "GPL-3.0-or-later",
  "bugs": {
    "url": "https://github.com/Aracelli-V-Photography/aracelli-v-photography-website/issues"
  },
  "homepage": "/",
  "devDependencies": {
    "axios": "^0.21.1",
    "eslint": "^7.28.0",
    "nodemon": "^2.0.7",
    "prettier": "^2.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "uuid": "^8.3.2"
  },
  "dependencies": {
    "bcrypt": "^5.0.1",
    "concurrently": "^6.2.0",
    "njwt": "^1.1.0",
    "pg": "^8.6.0",
    "pg-hstore": "^2.3.4",
    "sequelize": "^6.6.2",
    "sequelize-cli": "^6.2.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }My question is, why doesn't the server deploy with react
}
 

И мой server.js :

 const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");

const routes = require("./config/routes");

const PORT = process.env.PORT || 3000;
const HOME_DIRECTORY = process.cwd();
const STATIC_DIRECTORY = process.env.HOSTING_DIR || "build/";

const server = http.createServer(function (request, response) {
    try {
        process.chdir(HOME_DIRECTORY);
    } catch (error) {
        console.log(error);
    }

    if (request.url.split("/")[1] !== "api") {
        const parsedUrl = url.parse(request.url);
        let pathname = `.${parsedUrl.pathname}`;
        const extension = path.parse(pathname).ext;

        try {
            process.chdir(STATIC_DIRECTORY);
        } catch (error) {
            return console.log(error);
        }

        const mapExtensionsToContentType = {
            ".ico": "image/x-icon",
            ".html": "text/html",
            ".js": "text/javascript",
            ".json": "application/json",
            ".css": "text/css",
            ".png": "image/png",
            ".jpg": "image/jpeg",
            ".wav": "audio/wav",
            ".mp3": "audio/mpeg",
            ".svg": "image/svg xml",
            ".pdf": "application/pdf",
            ".doc": "application/msword",
        };

        fs.exists(pathname, function (exist) {
            if (!exist) {
                response.statusCode = 301;
                response.setHeader("Location", "/");
                return response.end(() => {
                    console.log(
                        "nUser probably refreshed the page. Stand by for new session!"
                    );
                });
            }

            if (pathname === "./") {
                pathname  = "index.html";
                console.log("nUser joined the site!");
            }

            fs.readFile(pathname, function (error, data) {
                if (error) {
                    response.statsCode = 500;
                    response.end(`Error getting the file: ${error}`);
                    return console.error(`Error getting the file: ${error}`);
                }
                response.setHeader(
                    "Content-Type",
                    mapExtensionsToContentType[extension] || "text/html"
                );
                response.end(data);
            });
        });
    } else {
        const actionPath = `${request.method} ${request.url}`;
        const route = routes.find(function (route) {
            return actionPath.match(route[0]);
        });
        if (!route) {
            return console.log(`n${actionPath} -> undefined`);
        }
        console.log(`n${actionPath} -> ${route[1]}`);
        const [controllerName, method] = route[1].split("#");
        const Controller = require(`./controllers/${controllerName}Controller`);
        if (request.method !== "POST") {
            const controller = new Controller(request, response);
            controller[method]();
        } else {
            let body = "";
            request.on("data", function (chunk) {
                body  = chunk.toString();
            });
            request.on("end", function () {
                controller = new Controller(
                    request,
                    response,
                    JSON.parse(body)
                );
                controller[method]();
            });
        }
    }
});

server.listen(PORT, function () {
    console.log("Server running on port "   PORT);
});
 

Наконец, мой /src/redux/common.js , где, я думаю, проблема в:

 import axiosBase from "axios";
import { v4 as uuidv4, v5 as uuidv5 } from "uuid";

export const axios = axiosBase.create({
  baseURL: process.env.BASE_URL || "http://localhost:3000/api",
});

const NAMESPACE = uuidv4();

export function uuid() {
  return uuidv5(uuidv4(), NAMESPACE);
}
 

В принципе, я пытаюсь провести Node.js сервер с большим количеством знаний в React, чем в Node, и я застрял здесь, потому что, что бы я ни делал, axios всегда отправляет запросы на «http://localhost:3000/api». Мне нужно развернуть на heroku и отправить запросы на heroku вместо моей локальной машины! Я посмотрел документы для приложения create-react, и, похоже, я все делаю правильно. Однако я всегда использую производственную сборку react, потому что не мог понять, где найти сборку разработки. Из-за того, как он развернут на heroku (сервер моего узла обслуживает приложение react, а также api) Я не хочу, чтобы мое приложение работало на двух разных портах и нуждалось в cors.

Теперь, когда с этим покончено, у моей проблемы есть в основном два решения, которые сделают меня счастливым. Во-первых, я мог бы найти, где находится сборка разработки, и использовать переменную NODE_ENV enviromnent, чтобы определить, нахожусь ли я на сервере или нет. Или, во-вторых, я мог бы найти способ заставить переменные среды, которые я использую, работать.

В любом случае, я ценю ваше время и внимание. Если потребуется дополнительная информация, я с удовольствием опубликую обновление.

С твоим приложением нет никаких проблем, братан. Вы допустили ошибку в своем package.json . То, что вы сделали, это включили свой dependencies в devDependencies , что означает, что модуль react не устанавливается в вашем приложении Heroku.

Во время развертывания вы заметите, что на нем отображается строка pruning devDependencies , означающая, что он вырезает пакеты из списка, которые находятся в списке devDependencies .

Шаги, чтобы все исправить:

Для этого вы должны включить свой devDependencies dependencies вход, чтобы выполнить эту команду

 npm install axios react react-dom react-redux 
react-router-dom react-scripts redux redux-devtools-extension redux-thunk uuid --save-prod
 

Теперь переместите свое приложение на Heroku, и оно начнет работать.