creativetimofficial / vue-material-dashboard-laravel-bs4

Vue SPA Material template connected to working Laravel REST API with the help of json:api standard
MIT License
63 stars 199 forks source link

[Bug] Setting up with NGINX on UBUNTU server #13

Closed rafaelteb closed 3 years ago

rafaelteb commented 3 years ago

Version

latest

Reproduction link

Nginx file:

server {
    listen 8080;

    index index.php index.html index.htm;

    server_name example.com;

    return 301 https://example.com$request_uri;

}

server {
    listen 443 ssl;

    server_name example.com;
    root /data/vue-material-dashboard-laravel/laravel-json-api/public;

    ssl_certificate /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/key.pem;    

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index 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.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

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

Operating System

Ubuntu

Device

server

Browser & Version

firefox, latest

Steps to reproduce

  1. I set all up according to documentation and run npm run build.
  2. I let nginx server the laravel/public folder. I use a rather minimal nginx configration in sites-enabled folder (see nginx code above)

    What is expected?

    I use the npm command, output tells me to look at http://example.com:8081 Everything looks fine and login should be working with default given login

    What is actually happening?

    I get some sort of backend, but cannot login. It says: "Invalid credentials"

    Solution

    Do you maybe have a nice example of how nginx should server the app? I could not find anything online. I tried running vue-material-dashboard over https by adding "vue.config.js":

    
    module.exports = {
    devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8081, // CHANGE YOUR PORT HERE!
    https: true,
    hotOnly: false,
    },
    }


Then indeed everything goes through https but login does still not work. Any ideas why? Seems api does not communicatie well with vue
### Additional comments
If we can let it all work on a linux server we woudl want to go and buy the PRO version eventually (after we tested it and so on)
<!-- generated by creative-tim-issues. DO NOT REMOVE -->
teamupdivision commented 3 years ago

Hi @rafaelteb,

Thanks for using reporting this issue and for using Creative Tim products.

Could you please send the .env for both the frontend and backend, please? Also, you've mentioned the npm run build. Can you please let us know why is that? Thank you very much.

Best, Updivision Team

teamupdivision commented 3 years ago

Hi there @rafaelteb,

We would like to check if the issue was solved and if there is anything else we can help with. Please let us know if you have any other issues.

All the best, Updivision Team

rafaelteb commented 3 years ago

Jo @teamupdivision, sorry for my late answer.

I used this repo on github and the documenation it provides: https://github.com/creativetimofficial/vue-material-dashboard-laravel

I did not do anything specific with the .env file. Just added the database. Here is the .env file (o boy I forgot something small somewhere right):

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:Ojwx/O0E8YfUyQe5hYSioTlddddddddddddddddddddd
APP_DEBUG=true
APP_URL=

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_json_api_vue_dashboard
DB_USERNAME=username
DB_PASSWORD=dfdagdg!

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Concerning the build command. I used it because I wanted to test it out: on a production server with fqdn. I followed the info on the documentation:

image

This link: https://demos.creative-tim.com/vue-material-dashboard/documentation/

teamupdivision commented 3 years ago

Hi @rafaelteb,

Thanks for this. Could you share the .env for the frontend too, please?

All the best, UPDIVISION Team

teamupdivision commented 3 years ago

Hi there @rafaelteb,

We would like to check if the issue was solved and if there is anything else we can help with. Please let us know if you have any other issues.

All the best, Updivision Team

teamupdivision commented 3 years ago

Hi @rafaelteb,

Just checking if the issue was solved and if there is anything else we can help with. Please let us know if you have any other issues.

All the best, Updivision Team