我的 fullsatck JS 应用程序在 Heroku 上的生产环境中无法运行

Question

我已经创建了我的第一个 FullStack JS 应用程序。 REACT 用于前端端口：3000，NODE 用于后端端口 3001，postgresql 用于数据库。而且也是我第一次使用 Heroku！

我的应用名为 philosophybooks 我的数据库 postgres 是 livres 有一个表 books 在这个表上 13 行，我的数据库中有 13 本书它只是例如：
author, title, date_of_parution, cover 封面只是一个字符串 我在我的应用程序的前端部分有一个文件夹 illustrations_books 在这个文件夹中我有封面书的所有图像

使用 Windows 上的 CLI，我可以很好地使用我的数据库推送我的所有应用程序，在 Heroku 上一切正常。 在前面，我已经运行了一个构建文件夹，我已经将这个文件夹复制到了我的后部应用程序。
当我开始 heroku local web 时，所有工作都在 http:localhost:5000 上完美运行
但是当我不在本地启动我的应用程序时出现控制台错误

GET 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\" && 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

在 prodhttps://philosophybooks.herokuapp.com/ 中渲染

我必须犯一个我没有看到或忘记的错误，你能帮帮我吗？如果你需要看别的东西告诉我。提前感谢您的帮助

---

2020 年 10 月 18 日编辑

我在 HEROKU 上的数据库和通过 CLI pg:psql

Answer 1

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，因此您所要做的就是确定是要禁用还是需要它。你可以阅读更多here

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

您还需要将 * 路由添加到底部，因为当它位于顶部时，无法访问其他路由：

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

这是这个 git repo 中的所有配置：

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