Error: Docker build failed while deploying
I am trying to deploy an app that has a frontend repository, a backend repository and a data base. The backend is working but I cant deploy the frontend. When I try to do it, I see this error message: ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 126
Error: Docker build failed
I dont have too much experience and I dont know how to fix it.
My package.json in the front is:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^13.1.1",
"axios": "^1.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"sweetalert2": "^11.7.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
77 Replies
Project ID:
b4d47c7d-55bd-48e3-89c9-80f678c77071The id project is b4d47c7d-55bd-48e3-89c9-80f678c77071
Ok, thanks. I made the changed suggested, now should I run npm build again?
And should I do git add . , git commi t and git push also?
can you share your repo?
GitHub
GitHub - nicobonder/pokemonFront: Front-end to create Pokemon App
Front-end to create Pokemon App. Contribute to nicobonder/pokemonFront development by creating an account on GitHub.
you definitely don't want to commit node_modules to your repo, please delete it and use this .gitignore file
https://raw.githubusercontent.com/brody192/create-react-app-starter/main/.gitignore
you also don't want to commit the build folder, so please delete that too
ok, I will do it. Thanks
let me know when completed
I was checking and I already have the gitignore with node_modules there. Should I have it inside the client folder?
And I deleted the build folder
use the one I linked in your client folder
done
push your changes
done. SHould I remove node modules in git repo?
yes, and build folder
I dont know if I did ok, I removed node modules in the repo, but the build folder I did it locally before to push the changes
repo looks good to me
the .gitignore will prevent you from pushing the build or node_modules folder to the repo in the future automatically
I had the same error in railway deploy: ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1
i know
follow the very last section of this guide
ok, can you tell me where should I include this: CI = false
you dont want to fix the warnings? fixing the warnings is the right thing to do
oh ok, I will try that
you can set CI = false in the railway service variables for now, but defiantly work on fixing the warnings later
No, I removed the warnings.
thats what i like to hear
Now the front is working, but I stull have problems with the backend. I will see what I can do and if cant solve it I come back
Thanks!
what problems are you having with the backend, id be happy to help where i can
In the console I see: Uncaught (in promise) TypeError: Failed to fetch
at actions.js:25:16
at Object.dispatch (index.js:16:18)
at dispatch (<anonymous>:1:55424)
at Pokemons.js:51:5
at zs (react-dom.production.min.js:262:359)
at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
at Ko (react-dom.production.min.js:122:325)
at Ds (react-dom.production.min.js:261:308)
at react-dom.production.min.js:261:215
at B (scheduler.production.min.js:16:224) And any pokemon is loading
what status code do you see for that failed request in the network tab?
Sorry, I just come back, I dont know you if you are still there. The status is 200
well 200 is a good number
show a screenshot of the entire console logs?
you are trying to make requests over http, you need to make requests with https
Ok, I will check what do I need to change
I changed that, but now I have a CORS error: Access to fetch at 'https://pokemonback.up.railway.app/pokemons' from origin 'https://pokemonfront.up.railway.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. I added CORS
And I still have the same error
whats the domain of your api?
ah its
https://pokemonback.up.railway.app/pokemons
please follow this guide
https://docs.railway.app/troubleshoot/fixing-common-errors
ok, that helps with the cors problem?
i mean your current issue isnt cors
your app isnt responding
I changed as you show, and I corrected other things, but I still cant fix it
show me what you have changed in your backend code
this is app.js: const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const routes = require('./routes/index.js');
const cors = require('cors');
require('./db.js');
const server = express();
server.name = 'API';
server.use(bodyParser.urlencoded({ extended: true, limit: '50mb' }));
server.use(bodyParser.json({ limit: '50mb' }));
server.use(cookieParser());
server.use(morgan('dev'));
server.use(express.json());
// Habilitar CORS
server.use(cors());
server.use((req, res, next) => {
//res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); // update to match the domain you will make the request from
//Testing deploy in Railway
res.header('Access-Control-Allow-Origin', 'https://pokemonfront.up.railway.app');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
next();
});
server.get("/", (req, res) => {
res.json({ info: "Page uploaded successfully." });
});
server.use('/', routes);
// Error catching endware.
server.use((err, req, res, next) => { // eslint-disable-line no-unused-vars
const status = err.status 500;
const message = err.message err;
console.error(err);
res.status(status).send(message);
});
module.exports = server;
show me the package.json please
{
"name": "api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js",
"test": "mocha -w ./tests/*/.spec.js"
},
"author": "Henry",
"license": "ISC",
"engines": {
"node": ">=12.18.3",
"npm": ">=6.14.6"
},
"dependencies": {
"axios": "^1.1.3",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"morgan": "^1.10.0",
"node-fetch": "^2.6.7",
"pg": "^8.8.0",
"sequelize": "^6.3.5"
},
"devDependencies": {
"chai": "^4.2.0",
"mocha": "^8.2.1",
"nodemon": "^2.0.6",
"supertest": "^6.0.1",
"supertest-session": "^4.1.0"
}
}
please enclose any code with triple back ticks
I am not pretty sure what do you mean
this is a back tick `
anyway
yes, I understand...it is as stack overflow... I have to put
show me your index.js file please
what's conn.sync
do you have a repo for your backend too?
GitHub
GitHub - nicobonder/pokemonBack: Backend to create Pokemon App
Backend to create Pokemon App. Contribute to nicobonder/pokemonBack development by creating an account on GitHub.
and bad timing, I was called for dinner, I'll get back to you later
but if I had to guess, your code is not connecting to the database
I must be honest, that file already was done. It was a repor that I receibed to do a project when I was doing a bootcamp and I dont remember what was that line.
interesting, well I'll look into your code after dinner
Dont worry, I also have to go. Thanks for everything. Tomorrow we can follow
or if I can I connect again
okay I'll look later either way
so here you are trying to connect to postgres
https://github.com/nicobonder/pokemonBack/blob/main/src/db.js#L9
but those are not the standard postgres variables names, the correct variable names are stated here
https://docs.railway.app/databases/postgresql#connect
so make sure you have a postgres database in the same railway project
setup the variable references using the standard names, in your railway backend service variables
https://docs.railway.app/develop/variables#reference-variables
Hi, do you mean to this:
Those are the name I used in the .env
Do you think it is better if I use the name suggested in the guide you sent me?
you should just be able to use railways
DATABASE_URL for simplicity, there's no need to build your own connection string like you currently doI dont understand. I need to do all that to connect the DB when I was working in localhost. I added all the enviroment variables in railway, there I have a DATABASE_URL, but I dont know how to use it in my code.
Should I replace: for:
it would be
process.env.DATABASE_URLOk so I will use this connection:
looks about right
show me a screenshot of your service variables?
thats the plugin, show me a screenshot of your railway service variables
Sorry, what do you mean with service variables?
the railway service
show me a screenshot of the variables tab
delete those, and then setup the variables properly
ok
read this please
https://docs.railway.app/develop/variables#reference-variables
Finally it loading the pokemons. Now I just have to check in my code why if I filter to get the pokemons created in DB doesnt show it and go back to show all the pokes.
I still have job to do
Thank you!
no problem!