Problems with deploying on AWS EC2 - javascript

I tried to deploy for the first time a MERN app on the AWS EC2.
I completed this article's steps, except for installing the mongodb, because I used Ubuntu 20.04 instead of 16.04, I used the docs and it had worked.
In the end I opened the app.js from /server/dist with pm2 and I had got the status of working, but when I wanted to access the website, it said that the connection was refused.
This is my github repository.
If you have time and experience with AWS EC2, please check it! I didn't find anything, why it wouldn't work.
UPDATE:
I tried to curl the localhost, and it returns the html page, so it works.
I checked the status of the nginx and it is running, but I think nginx is the problem.
I tried to set it up using this article. And when I test the nginx I got an ok, but it still doesn't work.
This is what /etc/nginx/sites-enabled/amazon-clone contains:
server {
listen 80;
listen [::]:80;
root /var/www/your_domain/html;
index index.html index.htm index.nginx-debian.html; server_name;
location / {
try_files $uri $uri/ =404;
proxy_pass http://172.31.39.190:5000;
}
}

Related

Why does adding script.js file into /var/www/html/ into my EC2 server crash the server?

So I have been trying to add script.js into my /var/www/html/ directory in a UBUNTU EC2 AWS Instance using VS Code Remote SSH extension. The directory has 777 permission yet when I save my file, the server stops responding and I can not connect to it through VS Code, terminal, nor the AWS CloudShell. I also can not access the public DNS to see my website anymore either.
I have the port 22 on 0.0.0.0 and all security groups correctly configured. The status checks all come back 2/2. I also have LAMP stack installed. Any ideas?

Why can't I deploy my next.js app to port 80?

I never deployed any project before and I'm currently running with an issue while deploying a next.js app to godaddy. I uploaded my next.js app to the public_html folder of my cpanel and then i connected through ssh and executed the npm run dev command with server.js pointing to my domain name as hostname and 3000 as port number however, to access it i will have to write in the url www.mydomain.com:3000 . I learned that in order to access it by the following url www.mydomain.com I have to specify port 80 in the server.js file. However, when I do so and run the npm run dev command it says that I do not have the permission to port 0:0:0:0:80
Screenshot here
I have a VPS server and a domain name. I am doing something wrong or is there something I missed? Should I not use my domain name as hostname in the server.js file? Should I maybe keep the hostname as my VPS ip and port 3000 then point my domain to read from this address? I am a beginner with no previous exprience in deployement and this is my first next.js app ever.
Any help is appreciated and thank you!

Nginx ignoring /api location directive with react-router 4, except in firefox private browsing

I have a React app that is served via nginx, and a nodejs api server behind nginx reverse proxy. The nginx configuration looks like this:
location / {
try_files $uri /index.html;
add_header Cache-Control public;
}
location /api/ {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
}
In firefox private browsing, things work as expected: when I page refresh/redirect to domain.com/api, the request gets proxied to the node server.
However, in non-private firefox and chrome (incognito + not), any page refresh/redirect to domain.com/api will load the react app and treat the /api as a react-router route. The strange thing is, if I clear cookies/history and direct my browser to domain.com/api, I will correctly be proxied to the node server. The issue only occurs after I have loaded the react app once before.
This is driving me crazy, any ideas? I was thinking about downgrading react-router to version 3, but that would require some refactoring and I don't know if that would solve things.
I fixed it for now by removing registerServiceWorker() from create-react-app boilerplate.

Best ways to configure nginx to serve yeoman angular generator files?

I am quite new to configuring production servers to serve UI. I always wrote my code and someone else did the deployment. But I wish to move to the next stage now. Having said that, I wrote my UI code starting from yeoman-angular-generator and I wish to deploy it on my production Amazon ec2 instance.
I configured nginx on the instance and setup route53 and I am able to serve default 'Welcome to nginx' page from mydomain.com. What I wish to do is to serve my UI from mydomain.com. I tried to write a server block with location '/' pointing to my index.html from my dist folder. But it is not working.
I usually set up something like this:
server {
listen 80;
server_name your.project.com
location / {
try_files $uri /index.html;
root /path/to/project/dist/;
}
}

Node.js /socket.io/socket.io.js not found express 4.0

So I'm trying to get chat working on my website, and when I was testing locally it worked great, because port 8080 on my localhost was available and all that good stuff. But now I pushed my code to my Heroku app, and when I try and load my chat page, I get the error stating that it can't get localhost:8080/socket.io/socket.io.js.
I've seen node.js /socket.io/socket.io.js not found
and tried the suggestions, but none worked, even moving the socket.io.js file into a resource file did not work. I'm guessing this is because I'm using express 4.0?
Any help would be appreciated
Thanks
Edit:
So to add more details, since my question could seem a little vague, here is my relevant app.js code:
var client = require('socket.io').listen(8080).sockets;
In my jade file for the chat page, I have:
script (src = `'http://localhost:8080/socket.io/socket.io.js`')
and later on
var socket = io.connect(`'http://localhost:8080`');
and all this works on localhost (I load up on port 5000, socket.io is connected to port 8080). I do this using 'foreman start' with the heroku toolbelt.
When I try and change these to work on heroku, it breaks and I'm not sure how to fix it. I hope this clarifies the question a bit.
Edit 2:
I'm running:
express 4.0.0
socket.io 0.9.16
node 0.10.x
Thanks
Do you have an explicit route in express which catches all other routes? Something like this perhaps:
app.get("/", handlers.home);
app.get("/..." ...);
...
app.get("*", handlers.error);
This might keep socket.io from being able to host it's own js file for the client. There is an easy way to fix this, since you probably already have a public or static folder setup in express. Something like:
app.use(express.static("public"));
Make a new folder called socket.io and copy over the appropriate socket.io.js file into said folder, and all should be well. However note that there are two files named socket.io.js!! So, if you see something like "Uncaught ReferenceError: require is not defined" it means you copied the "node-ey" server side file. Here is the correct client file to copy:
app_dir/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.min.js
Note #BHendricks: I would have just posted as a reply to your comment, but I currently lack the required reputation.
Edit:
The OPs question probably has more to do with the "localhost" issue. When connecting from a client (say your home IP), as far as your browser knows - localhost implies a connection with the machine which is locally hosting stuff. Since your home machine (or phone) does not host socket.io, this is failing.
What you need to do is have your server embed the socket connection information (either a fully qualified hostname, ip etc). This can be done when the server "renders" the page with the client connection.
What happens when you go to http://localhost:8080/socket.io/socket.io.js?
Does it 404? If it does you need to make sure you have it in a directory that Express is set to serve statically.
app.use(express.static(__dirname + '/public'));
Then put your socket.io.js file in public/socket.io/socket.io.js (relative to your app.js file)
Restart your server and see if that fixes it.
Basically, Express doesn't serve files statically from the file system unless you explicitly tell it where to map from.

Categories

Resources