Question

Can't access to my Nuxt Front End

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!


Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

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.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

@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'

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:

  1. sudo systemctl status nginx

If it is not running try to start it with:

  1. 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