NodeJS on AWS EC2: Cannot load public/images folder - node.js

I'm developing a NodeJS app and it looks good on my localhost so I decided to deploy it on AWS EC2.
I followed AWS instruction to deploy my NodeJS app on AWS EC2. When I started the server on EC2 by running node server.js, I found out that although javascript and css resources under public folder were loaded, all images from public/images were not loaded and the images folder was missing under Chrome developer tool > Sources. When running the app locally, all the images from public/images were loaded correctly. There is also a 500 Internal server error on the Chrome console.
Here is an example of my html for one of the images:
<img src="public/images/my_logo.png"></img>

I solved the problem. It turns out this is an AWS permission issue. Somehow all images uploaded to EC2 have
-rw-------
permission. So I changed the permission to solve the 500 error.
chmod 744 my_logo.png
It's worth noting that only images uploaded to AWS have the above mod. Other files have the following mod which need not be changed
-rw-r--r--

Related

Trying to deploy PERN app in Heroku and getting 404s

I'm trying to get my app and server hosted on Heroku to work when deployed, but it's not. Client and server seem appear to be running, but the api calls are returning 404s. I'm guessing the configs are messed up somewhere.
Here is my repo: https://github.com/kpermenter/test-deploy and my Heroku settings are attached.
Any insight would be much appreciated!
This is because you haven't made the client files available publicly, you can do this by using:
app.use(express.static('../client/build'));
in the server.js file
if this doesn't work you can try creating a 'public' folder inside the server folder then copy the contents of the build inside the server/public folder and then use app.use(express.static('/public'));
and just deploy the server folder itself

Problem while running Angular project project on AWS EC2

When I run my Angular project on AWS ec2 in production, it automatically gets changed to the host AWS IP address. I am unable to run my service. Has anyone faced this issue previously? Please help
Console screenshot
You no need to run the environment in the EC2,
Create a production build and deploy the code in the AWS >> Instance >> /var/www/html folder.
Command to build production: ng build --prod --aot
Just checkout the public URL of your EC2 Instance. It should be something like below:
http://ec2-52-204-122-132.compute-1.amazonaws.com
Now, in your Angular code, you must be having a base URL of the API. You should use the base URL of your API something like below:
API Base URL: http://ec2-52-204-122-132.compute-1.amazonaws.com/API-Application
This way, there won't be any IP conversion automatically.

Internal Server Error 500 In Angular 6 Node js application deployed in Azure

console snippet
I'm getting this error when I trying to browse the website. but these files are stored in the same directory and base href is set up for the same directory. Application runs fine in the localhost

Network Error when I try to run React web on AWS

Sorry maybe it is a dump question but I could not go further.
I got a website which already built with ReactJS and working on AWS Ec2
When I run on localhost
First; in terminal which in file directory run node server.js
yarn start
then I can see the localhost:3000 then when I make any changing just send with SSH and run server with PM2 which pm2 restart server
My question is I want to create a second AWS EC2 instance and run the code there as well when I change config.json which domain is store there I can see a NETWORK ERROR
I created a ec2 instance copied all my files there and I installed NodeJS npm and pm2 but I could not managed see my website on localhost:3000()
What Do I have to do?
You need to use the EC2 public address/IP not localhost

Angular 2 not showing images without restarting

I'm uploading an image using angular2 and nodejs, when node uploads file in assets folder, I try to show it using angular and get an error:
GET http://localhost:4200/assets/img/3.jpg 404 (Not Found)
But when my angular server restarts the image is there.
What can I do to show an image without restarting?
As you reply to my comment - you are using ng serve.
The thing is, when you are running ng serve that triggered in memory webpack dev server - not a thing you want to run on your server, that is for dev only. This way, until you restarted ng serve, you wont get any changes happend in your assets folder as it is default folder for your static assets configured in .angular-cli.json:
You use the assets array in .angular-cli.json to list files or folders
you want to copy as-is when building your project.
So assets folder is not the best place to store any dynamic content.

Resources