Nuxt.js + Laravel on same server nginx

Question

I would like to deploy nuxt + laravel project on my DigitalOcean server (Ubuntu 18.04). I have configured the domain name and SSL certificate on it. I looking for correct configurations for nginx for serving the client and the API on the same server.

I configured the client with proxy, but unfortunately the API not available

# Redirect http to https
server {
    listen 80;
    listen [::]:80 ipv6only=on default_server;
    server_name MY_DOMAIN_NAME;
    return 302 https://$server_name$request_uri;
}

# SSL configs
server {
    listen 443 ssl http2;
    ssl_certificate /etc/nginx/fullchain.pem;
    ssl_certificate_key /etc/nginx/MY_DOMAIN_NAME.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;

     # Use our own DH params
    ssl_dhparam /etc/nginx/dhparam.pem;

    ssl_session_cache   shared:SSL:40m;
    ssl_session_timeout 4h;

    ssl_session_tickets on;

    server_name MY_DOMAIN_NAME;
    root /var/www/MY_LARAVEL_APP_FOLDER/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ \.css {
    add_header  Content-Type    text/css;
    }
    location ~ \.js {
        add_header  Content-Type    application/x-javascript;
    }

    #client 
    location / {
        expires $expires;

        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_redirect              off;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the adress of the Node.js
    }


    location ~ /\.(?!well-known).* {
        deny all;
    }
}

I've tried this code, the nginx says duplicated location / (logical). Please help me :) What is the correct way to set up the server for API and client with a proxy or without?

Answer 1

For persons still looking for a way to use Nuxt and Laravel without using a subdomain, you can take a look here.

I've pasted the configuration shown in the article below (in case the link goes down):

map_hash_max_size 262144;
map_hash_bucket_size 262144;

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen 80;
    listen 443 ssl;
    server_name dev.domain.tld;
    root "/path/to/laravel/public";

    index index.php;

    # Access Restrictions
    allow       127.0.0.1;
    deny        all;

    location /api {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location / {
        try_files $uri $uri/ @proxy;
        autoindex on;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass php_upstream;      
        #fastcgi_pass unix:/run/php/php7.0-fpm.sock;
    }

    # Enable SSL
    ssl_certificate "C:/etc/ssl/mycert.crt";
    ssl_certificate_key "C:/etc/ssl/mycert.key";
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
    ssl_prefer_server_ciphers on;


    charset utf-8;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }
    location ~ /\.ht {
        deny all;
    }

    location @proxy {
        expires $expires;
        add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';";
        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-Cache-Status $upstream_cache_status;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_ignore_headers        Cache-Control;
        proxy_http_version          1.1;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                  http://127.0.0.1:3000; # set the adress of the Node.js instance here
        #proxy_cache                 nuxt-cache;
        proxy_cache_bypass          $arg_nocache; # probably better to change this
        proxy_cache_valid           200 302  60m; # set this to your needs
        proxy_cache_valid           404      1m;  # set this to your needs
        proxy_cache_lock            on;
        proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;
        proxy_cache_key             $uri$is_args$args;
        #proxy_cache_purge           PURGE from 127.0.0.1;
    }   

}

Answer 2

There's a problem in your nginx.conf you can't declare two blocks with the same location which is / in your case.

A better way of doing this is to use two server block using Virtual Hosting

1. example.com ( Main Domain )
2. api.example.com ( API Subdomain )

example.conf

# Redirect http to https
server {
    listen 80;
    listen [::]:80 ipv6only=on default_server;
    server_name example.com;
    return 302 https://$server_name$request_uri;
}

# SSL configs
server {
    listen 443 ssl http2;
    ssl_certificate /etc/nginx/fullchain.pem;
    ssl_certificate_key /etc/nginx/MY_DOMAIN_NAME.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;

     # Use our own DH params
    ssl_dhparam /etc/nginx/dhparam.pem;

    ssl_session_cache   shared:SSL:40m;
    ssl_session_timeout 4h;

    ssl_session_tickets on;

    server_name example.com;
    root /var/www/MY_LARAVEL_APP_FOLDER/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ \.css {
    add_header  Content-Type    text/css;
    }
    location ~ \.js {
        add_header  Content-Type    application/x-javascript;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

and for API api.example.conf

# Redirect http to https
server {
    listen 80;
    listen [::]:80 ipv6only=on default_server;
    server_name api.example.com;
    return 302 https://$server_name$request_uri;
}

# SSL configs
server {
    listen 443 ssl http2;
    ssl_certificate /etc/nginx/fullchain.pem;
    ssl_certificate_key /etc/nginx/MY_DOMAIN_NAME.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;

     # Use our own DH params
    ssl_dhparam /etc/nginx/dhparam.pem;

    ssl_session_cache   shared:SSL:40m;
    ssl_session_timeout 4h;

    ssl_session_tickets on;

    server_name api.example.com;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    charset utf-8;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;


    location ~ \.css {
    add_header  Content-Type    text/css;
    }
    location ~ \.js {
        add_header  Content-Type    application/x-javascript;
    }

    #client 
    location / {
        expires $expires;

        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_redirect              off;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the adress of the Node.js
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}