Блог

Я создал свое первое приложение FullStack JS. REACT для переднего порта: 3000, NODE для заднего порта 3001 и postgresql для базы данных. И это также первый раз, когда я использую Heroku!

Мое приложение под названием philosophybooks моя база данных postgres — это livres с одной таблицей книг в этой таблице 13 строк, 13 книг в моей базе данных, это просто для примера :
author, title, date_of_parution, cover обложка — это просто строка, у меня есть папка illustrations_books в моей интерфейсной части моего приложения, в этой папке у меня есть все изображения обложки

С CLI в Windows у меня есть все мои приложения, с моей базой данных все хорошо на Heroku.Впереди я запустил папку сборки и скопировал ее в задней части моего приложения.
Когда я начинаю heroku local web все отлично работать на http:localhost:5000
но когда я запускаю свое приложение не локально, у меня появляется ошибка консоли

ПОЛУЧИТЬ https://philosophybooks .herokuapp.com/livres 503 (Служба недоступна)

в передней части package.json я "proxy": "http://localhost:3001"

небольшая часть index.js

 ...   
app.use(express.static('build'))
...   

//Entry point API 
app.get('/', (req, res) => {
    res.send('My app is well connected and endpoint is OK')
})
//READ ALL
app.get("/livres", (req, res) => {
    pool.query('SELECT * FROM books ORDER BY id ASC', (err, results) => {
        if (!err)
            res.status(200).json(results.rows)
        else
            console.log(err)
    })
})

...
...  

const port = process.env.PORT || 3001
app.listen(port, () => {
    console.log(`[Express] is running on port ${port}`)
})

  

Небольшая часть Livres.jsx в передней части

 ...
...  

useEffect(() => {
        const fetchData = async () => {
            setIsError(false)
            try {
                const result = await axios('/livres') /* 'http://localhost:3001/livres' */
                setData(result.data)
            } catch (error) {
                setIsError(true)
                console.log(error)
            }
        }
        fetchData()
    }, [])  
...  
...
  

config.js

 require('dotenv').config()

const { Pool } = require('pg')

/* const pool = new Pool({
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    host: process.env.DB_HOST,
    port: process.env.DB_PORT,
    database: process.env.DB_DATABASE,

}) */
const isProduction = process.env.NODE_ENV === 'production'

const connectionString = `postgresql://${process.env.DB_USER}:${process.env.DB_PASSWORD}@${process.env.DB_HOST}:${process.env.DB_PORT}/${process.env.DB_DATABASE}`

const pool = new Pool({
  connectionString: isProduction ? process.env.DATABASE_URL : connectionString,
  ssl: isProduction,
})
module.exports = { pool }
  

У меня также есть файл Procfile web: node index.js

серверная часть package.json

 {
    "name": "philosophybooks",
    "version": "1.0.0",
    "description": "bibliothéque philosophique",
    "main": "index.js",
    "engines": {
        "node": "12.x",
        "npm": "6.x"
    },
    "scripts": {
        "start": "nodemon index.js",
        "test": "echo "Error: no test specified" amp;amp; exit 1"
    },
    "keywords": [
        "NODEJS",
        "JAVASCRIPT",
        "ES6"
    ],
    "author": "LC",
    "license": "ISC",
    "dependencies": {
        "compression": "^1.7.4",
        "cors": "^2.8.5",
        "dotenv": "^8.2.0",
        "express": "^4.17.1",
        "helmet": "^4.1.1",
        "nodemon": "^2.0.4",
        "path": "^0.12.7",
        "pg": "^8.3.3"
    }
}
  

Визуализация heroku local web

Визуализация в prod https://philosophybooks.herokuapp.com/

Я должен сделать ошибку, которую я не вижу или что-то забыл, вы можете мне помочь? если вам нужно увидеть что-то еще, скажите мне. Заранее благодарю вас за помощь

РЕДАКТИРОВАТЬ 18 октября 2020 г.

Моя база данных на HEROKU и через CLI pg: psql

Bonjour Parad0xJ,

ПРОБЛЕМА:

Оно не работало, потому что вы назначали ssl-сертификат, который не был проверен. Если вы внимательно посмотрите на ошибку heroku, вы заметите эту ошибку.

 Error: self signed certificate
'DEPTH_ZERO_SELF_SIGNED_CERT'

const pool = new Pool({
  connectionString: isProduction ? process.env.DATABASE_URL : connectionString,
  ssl: isProduction,  <=========== unverified self signed certificate
})
  

РЕШЕНИЕ

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

 const pool = new Pool({
  connectionString: isProduction ? process.env.DATABASE_URL : connectionString,
  sslmode: isProduction ? "require" : "disable"
})
  

Также вам нужно добавить * route в нижний, потому что, когда он находится вверху, другие маршруты недоступны:

 app.get('*', (req, res) => { //<=========== Should be at the bottom of all routes
  res.sendFile(path.join(__dirname, "frontend/build/index.html"));
}); 
  

Вот вся конфигурация в этом репозитории git :

https://github.com/l0609890/philosophybook/invitations