Question

Can't access to my Nuxt Front End

Posted January 21, 2021 849 views
NginxNode.jsVue.jsDigitalOcean Droplets

Hello to everyone and thanks for reading;

This is my first time using Digital Ocean and I’m having a few problems to get going. I’m trying to deploy a PWA E-commerce based on Nuxt and Strapi. I deployed Strapi with the one-click deploy and it works perfectly, but I don’t know how to set up the front end.

I created the droplet with ubuntu 18 and setted up the non-root user with admin privileges and the firewall. After that, I’ve installed NodeJs (14.15 via PPA) and NPM, I’ve copied the files of Nuxt via SCP on
/home/my-user/project and then installing Nginx configuring the location to point to localhost:3000 , then I’ve ran the command npm install / npm run build, the page generates correctly, finally installing PM2 to run the page. I’ve tested the configuration in Nginx and is allright, I ran the command curl http://localhost and returns the whole html doc (because I’ve already built and compiled the files with the Nuxt build ) but after getting all this done, I try to go to the droplet public ip to only get Conection Timed Out.

I’ve done this whole process a couple of times, following the official guides and another tutorials that I’ve found and of trusted sources (like Medium) but at this point I'don’t know what else to do. Is from the configuration of my server?
Thanks in advance for the help!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
Submit an Answer
2 answers

Hi there @Parich15,

It sounds like that the Nginx service is not running or you might have a firewall blocking the traffic.

I would recommend the following:

  • Make sure that port 80 is open via your firwall. If you are using a firewall like UFW you can do that with ufw allow 80

  • Make sure that Nginx is up and running:

  • sudo systemctl status nginx

If it is not running try to start it with:

  • sudo systemctl start nginx

If it fails to start, you can run a config test with:

sudo nginx -t

And also check your error log:

tail -100 /var/log/nginx/error.log

Hope that this helps!
Regards,
Bobby

@Parich15 Did you solve it? I’m trying to do exactly the same with NUXT, PM2, and SSL, but it seems the live site doesn’t update on my changes, some cache maybe?? My whole NGINX config below:

#server { # listen 80;
# server_name example.com www.example.com test.example.com;
# HTTP to HTTPS redirections for all the subdomains
# return 301 https://$host$request_uri;
#}
server {
server_name www.example.com;
# ssl_* directives here
# www to non-www for SEO canonical reasons
return 301 http://example.com$request_uri;

    listen 443 ssl http2; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
server_name example.com;
# ssl_* directives here
location / {
        proxy_pass http://127.0.0.1:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        }
##root /var/www/example.com/html;
index index.html index.php index.htm index.nginx-debian.html;
# PHP
##location ~ \.php$ {
##include snippets/fastcgi-php.conf;
##fastcgi_pass unix:/run/php/php7.4-fpm.sock;
##}
location = /favicon.ico {
log_not_found off; access_log off;
}
location = /robots.txt {
log_not_found off; access_log off; allow all;
}
location ~* \.((ico|css|js|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|webp))$ {
expires 24h;
add_header Cache-Control private;
}
# (For WordPress permalinks)
#location / {
#try_files $uri $uri/ /index.php$is_args$args;
#}

    listen 443 ssl http2; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
server_name test.example.com;
# ssl_* directives here
root /var/www/example.com/test;
index index.php index.html index.htm index.nginx-debian.html;
# PHP
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php7.4-fpm.sock;
} location = /favicon.ico {
log_not_found off; access_log off;
} location = /robots.txt {
log_not_found off; access_log off; allow all;
}
location ~* \.((ico|css|js|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|webp))$ {
expires 24h;
add_header Cache-Control private;
}
# (For WordPress permalinks)
location / {
try_files $uri $uri/ /index.php$is_args$args;
}

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

} 

server {
    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


listen 80;
server_name example.com;
    return 404; # managed by Certbot


}
server {
    if ($host = test.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


listen 80;
server_name test.example.com;
    return 404; # managed by Certbot


}

I update the site with a pipeline to Bitbucket:

# I run ./deployApi.sh on the production server with below content:
root="/var/www/example.com/html"
cd $root
echo -e '\e[1m\e[34mPulling code from remote..\e[0m\n'
git pull https://exampleuser@bitbucket.org/exampleproject/examplerepo.git
echo -e '\e[1m\e[34m\nInstalling required packages..\e[0m\n'
npm run build
echo -e '\e[1m\e[34m\nRestarting service..\e[0m\n'
# Replace 1 with the ID of the service running your application
pm2 start -- --port 3001
echo -e '\n\e[1m\e[34mDeployment successful\e[0m'