Error 502, Angular deployment via GitHub

markex2002
HOBBY

2 months ago

Hi guys, new user here, im trying to deploy my angular project via Github, and while it looks like it is being deployed succesfully, when I try to see it throught the public domain, I cant see anything, just getting error 502, I saw some posts from here, tried changing ports, but it doesnt seem to work.

Any help would be greatly apretiated!

https://github.com/Markex2002/PortFolioWeb-FrontEnd

Angular CLI: 17.3.17

Node: 20.11.0

Package Manager: npm 10.2.4

OS: win32 x64

Angular: 17.3.12

Package Version

---------------------------------------------------------

@angular-devkit/architect 0.1703.17

@angular-devkit/build-angular 17.3.17

@angular-devkit/core 17.3.17

@angular-devkit/schematics 17.3.17

@angular/cli 17.3.17

@schematics/angular 17.3.17

rxjs 7.8.2

typescript 5.3.3

zone.js 0.14.10

$10 Bounty

8 Replies

markex2002
HOBBY

2 months ago

Public Network

Attachments


markex2002
HOBBY

2 months ago

Project Id

ec8ceefe-bad3-4053-ac1e-78e20f0d6305


2 months ago

hey,

can you post the errors from the log?

do you use a custom start command? how is your app starting?


markex2002
HOBBY

2 months ago

There are no errors in the log, the aplication is deplying succesfully, but when I click the domain I get error 502

Failed to load resource: the server responded with a status of 502 ()

And I dont think im using any custom start comand, the project deploys via Github, I didnt touch much from default stuff

Attachments


2 months ago

that probably means there is no server configured to handle the requests. you might need something like nginx. let me have a quick look at this


2 months ago

done! https://nginx-production-a777.up.railway.app/

moving forward if you want to deploy new code you got 2 options

  1. either move the Dockerfile to your portfolio repo and remove the lines where you install git and clone the repo, so in that way the changes get picked up automatically by railway

  2. fork my repo https://github.com/alexwebgr/nginx and create a new project in railway from your forked github repo

    push the changes to your portfolio repo and manually redeploy the service containing the forked repo from the railway dashboard so it can clone the repo once again

the Dockerfile will basically install git, clone your repo, build the dependencies and copy the dist folder over to the nginx folder

on the railway dashboard for the service make sure to set the port to 80 for the Generated domain

If you found this answer helpful feel free to mark it as Solved


markex2002
HOBBY

2 months ago

Thanks for the help It works now, looks like I needed that Ngix service to be able to properly deploy the app to a good port, right?

I will have it in mind next time! Thanks a lot for your help and time!

Just another question If I want to do step 1 instead. Should I place the dockerFile somewhere specifically in the App (like "root/src"), or anywhere works?


Status changed to Solved chandrika about 2 months ago


markex2002
HOBBY

a month ago

Alright, so, In case someone comes to the same problem as me, a few clarifications, as Alex pointed me, I needed to use the services of Nginx to view my project deployed, to do this I had two options, Having a docker wich completely clones my Git Project, or in the project itself, its much better to put it in the project itself instead of cloning, it deploys better and new commits are easier to implement.

I put the Docker on the root path of my project and Railway Detects it, the code is the next one:

FROM node:alpine AS builder

WORKDIR /app

# Copies our files into the app WorkDir
COPY ./ /app/

# Install dependencies and build the Angular app
RUN npm install
RUN npm run build

# Production stage with Nginx
FROM nginx:alpine

# Remove default nginx content
RUN rm -rf /usr/share/nginx/html/*

# Copy built application from builder stage
COPY --from=builder /app/dist/app-portfolio/browser /usr/share/nginx/html

# Copy custom nginx configuration (optional)
# COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Status changed to Awaiting Railway Response Railway about 1 month ago