Trying to run npm run serve (vue-cli app) inside Laravel Homestead (VirtualBox + Vagrant) - npm

I have a vue-cli app, trying to run it inside Laravel Homestead.
What I have:
My hosts on host machine:
127.0.0.1 localhost
127.0.1.1 PC
192.168.2.10 myvueapp.local
hosts inside VM:
127.0.0.1 localhost
127.0.0.1 myvueapp.local
127.0.1.1 homestead homestead
Vagrant version: 2.2.4, Homestead: v8.3.2, vue --version: 3.7.0
npm run serve executes without problems inside VM, but I get
We're sorry but myvueapp doesn't work properly without JavaScript
enabled. Please enable it to continue.
as a response body from request:
//response headers
Request URL: https://myvueapp.local/
Request Method: GET
Status Code: 200
Remote Address: 192.168.2.10:443
Referrer Policy: no-referrer-when-downgrade
Browser page is blank.
Also there is one favicon request:
Request URL: https://myvueapp.local/%3C%=%20BASE_URL%20%%3Efavicon.ico
Request Method: GET
Status Code: 400 Bad Request
Remote Address: 192.168.2.10:443
Somehow BASE_URL doesn't compile in index.html:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
My vue.config.js:
module.exports = {
devServer: {
host: 'myvueapp.local',
https: true
}
}
Homestead.yaml:
ip: "192.168.2.10"
#...
sites:
- map: myvueapp.local
to: /home/vagrant/path/to/myvueapp.local/public
#...
ports:
- send: 8080
to: 80
Port, where Vue is served (inside VM, 8080) is listening.
lsof -i :8080
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
node 3022 vagrant 22u IPv4 31440 0t0 TCP localhost:http-alt (LISTEN)
Nginx config:
server {
listen 80;
listen 443 ssl http2;
server_name .myvueapp.local;
root "/path/to/myvueapp.local/public";
index index.html index.htm index.php;
charset utf-8;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
P. S. It runs ok when I'm serving it from my host machine.
What I've tried:
change host
module.exports = {
devServer: {
host: '0.0.0.0', //<-- here
https: true
}
}
, didn't helped.
Edit #1
I moved a bit further, this Nginx config now allowes me to access Vue app, served inside VM, using host machine:
location / {
try_files $uri $uri/ /index.html =404;
proxy_pass http://localhost:8080; #<-- this might be the output from npm run serve, without last slash
# App running at:
# - Local: http://localhost:8080/
# ^^^^^^^^^^^^^^^^^^^^^
}
But there is still a problem: hot-reload doesn't work.

Related

make the bundle available on any host (0.0.0.0)

I am trying to access localhost in my android phone.
I am using webpack-dev-middleware with an express server.
I do know how to set the host in webpack-dev-server though.
But I don't see any options to specify a host of 0.0.0.0 in webpack-dev-middleware.
Hope that my problem is clear enough
app.listen(3001, 'localhost', function() {
console.log("... port %d in %s mode", app.address().port, app.settings.env);
});
This the way you specify port and host . If you don't specify localhost then it's default exposed in 0.0.0.0
So below code listens in 0.0.0.0
app.listen(3001, function() {
console.log("... port %d in %s mode", app.address().port, app.settings.env);
});
Update:
You can set your ip address directly in webpack config file:
devServer: {
host: '0.0.0.0',//your ip address
port: 8080,
disableHostCheck: true,
...
}

Express - Finding subdomain(s)

I have an Express API that's being called from a VueJS app. The app is located at a domain similar to dev.example.com. Part of my API call checks for subdomains using the built in req.subdomains. In this case it should return an array containing "dev", however, it's returning an empty array. Both the VueJS app and Express API are running on an AWS EC2 instance.
EC2 Nginx File
server {
listen 80 default_server;
server_name _;
#Vue App & Frontend Files
location / {
root /var/www/frontend-app/dist;
try_files $uri /index.html;
}
#Node API Reverse Proxy
location /api/ {
proxy_pass http://localhost:3000/;
proxy_set_header Host $host; //Fix: Passes down the requesting host information
}
}
Frontend API Call
submit() {
axios.post('/api/users/login', {
email:'test#example.com',
password: 'password'
})
}
Express API Sample Route
router.post('/users/login', async(req, res) => {
*Login code omitted*
res.send(req.subdomains); //Returns [], expected result ['dev']
})
I haven't been able to find any solution and was hoping someone would have an idea. Thanks!

Vue.js app served on nginx, using Axios/Express, loses HTTPS and becomes HTTP after login page

My Vue.js app switches from HTTPS to HTTP after the user logs in, and I'm not sure why. The Vue.js front-end is served using nginx, and uses Axios to access an Express back-end API that queries a local MongoDB server for login and a remote SQL Server for data. If someone could provide any guidance, that would be much appreciated, as this is for a work project.
I'm not sure if this could be a clue, but after logging into a session in the app, if I open a new tab and manually enter a URL for a view that doesn't access the Express back-end (https://subdomain.website.com/view_that_doesnt_access_express_api), the site will be secure under HTTPS, but if I do the same with a view that does access the Express back-end (https://subdomain.website.com/view_that_accesses_express_api), the site will be unsecure and the HTTPS in the location bar is shown crossed out in red.
nginx is configured with SSL and redirects 80 to 443 as follows (/etc/nginx/sites-available/project):
server {
listen 80;
server_name subdomain.website.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name _;
ssl_certificate /path/to/my/cert.crt;
ssl_certificate_key /path/to/my/key.rsa;
root /path/to/my/dist;
index index.html
access_log /var/log/nginx/site.access.log;
error_log /var/log/nginx/site.error.log;
location / {
try_files $uri /index.html =404;
}
}
The Express server is also configured to be HTTPS (app.js) with the same certification files used by nginx:
var httpscert = fs.readFile('cert.crt');
var httpskey = fs.readFile('key.rsa);
var options = {
key: httpskey,
cert: httpscert
};
var server = https.createServer(options, app);
server.listen(3000, function () {
console.log("Express HTTPS running on 3000");
})
Axios (Service.js):
import Api from '#/services/Api'
export default {
loginUser (email, password) {
return Api().post('login', {
email: email,
password: password
})
}
}
Axios (Api.js):
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'https://192.168.10.117:3000'
})
}
This is my first question on StackOverflow, so please let me know if I'm not asking this question correctly.
Thank you.
You said:
but if I do the same with a view that does access the Express back-end (https://subdomain.website.com/view_that_accesses_express_api), the site will be unsecure and the HTTPS in the location bar is shown crossed out in red.
That does not mean your setup is wrong, it just means you have on that page an asset that is served via HTTP, instead of HTTPS. And that's why the lock is crossed.
You should inspect your page source and check for any scripts or styles that are loaded via HTTP. Change those to be HTTPS and you should be good to go.

Meteor on httpd (Apache/2.4.6 CentOS) proxy and WebSockets

I can't workout how to get WebSockets to work when I deploy my meteor app online. I keep getting this error:
WebSocket connection to 'ws://website.com/sockjs/***/********/websocket' failed: Unexpected response code: 400
I think this is due to the fact that apache sits in front of my meteor app. I know Apache 2.4 had a bug to make ws:// working, but I think this should be resolved by modules/mod_proxy_wstunnel.so, which I have enabled (of course I have enabled also modules/mod_proxy.so)
Here's my config. I'm running Meteor 1.2.1 as a systemd service (/etc/systemd/system/meteor.service) like so:
[Unit]
Description=meteor nodejs daemon
After=network.target remote-fs.target
[Service]
User=root
ExecStart=/usr/bin/node /home/root/www/main.js
Restart=always
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=meteor
Environment=ROOT_URL=http://website.com
Environment=PORT=3000
Environment=NODE_ENV=production
Environment=MONGO_URL=mongodb://127.0.0.1:27017/meteor
[Install]
WantedBy=multi-user.target
This is the output of httpd -v
Server version: Apache/2.4.6 (CentOS)
Server built: Aug 28 2015 22:11:18
And this is the relevant part in my vhost config (/etc/httpd/conf/httpd.conf) for website.com:
<VirtualHost my.ser.ver.ip:8080>
ServerName website.com
ServerAlias www.website.com
ProxyRequests Off
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
<Proxy *>
Allow from all
</Proxy>
</VirtualHost>
I've already tried to add the RewriteCond as suggested here but no success...
Any idea? I'm also having issue getting oauth to work with the accounts-facebook package and I guess the problem is for the same reason? As in, there is something wrong in my proxy settings?
Solved the mystery. Of course it was my bad: I forgot all about Varnish.
I had Varnish set on port 80 forwarding the request to Apache, which was in turn proxying the request to node.js. I resolved by removing apache and thus configuring Varnish to serve straight to node.js for that specific domain.
This is what I did:
Implemented this default.vcl in /etc/varnish/
Removed import directors and all the content inside sub vcl_init {} (as I only have a single server)
Replaced set req.backend_hint = vdir.backend(); in sub vcl_recv {} with:
if (req.http.Host ~ "^(www\.)?website.com") {
set req.backend_hint = nodejs;
} else {
set req.backend_hint = apache;
}
Created the two backends like so:
backend apache {
.host = "127.0.0.1";
.port = "8080";
.max_connections = 300;
.probe = {
.request =
"HEAD / HTTP/1.1"
"Host: localhost"
"Connection: close";
.interval = 5s;
.timeout = 1s;
.window = 5;
.threshold = 3;
}
.first_byte_timeout = 300s;
.connect_timeout = 5s;
.between_bytes_timeout = 2s;
}
backend nodejs {
.host = "127.0.0.1";
.port = "3000";
.connect_timeout = 1s;
.first_byte_timeout = 2s;
.between_bytes_timeout = 60s;
.max_connections = 800;
}

Varnish on cPanel server req.http.X-Forwarded-For not working

I have installed Varnish (uses 4.0 vcl format) and i did like here: http://wiki.mikejung.biz/How_To_Forward_IP_Header_Varnish_Apache
if (req.restarts == 0) {
if (req.http.X-Forwarded-For) {
set req.http.X-Forwarded-For = req.http.X-Forwarded-For + ", " + client.ip;
} else {
set req.http.X-Forwarded-For = client.ip;
}
}
in vcl file and
<IfModule mod_remoteip.c>
RemoteIPHeader X-Forwarded-For
RemoteIPInternalProxy 127.0.0.1
</IfModule>
in cPanel include editor. But i am still see only server IP in logs. This is very important because csf and mod_security cant block briteforce attacks on server. Varnish itself running ok.
This worked for me:
Varnish 4 doesn't require any changes in vcl config file
Include mod_remoteip module in Apache configuration
Add to /usr/local/apache/conf/mod_remoteip.conf
RemoteIPHeader X-Forwarded-For
RemoteIPInternalProxy 127.0.0.1 ...
Replace in lines including logformat: '%h' with '%a' in /var/cpanel/conf/apache/main
5.
/scripts/rebuildhttpdconf
/sbin/service httpd graceful