I have a local vue,nuxt enviroment that calls another local laravel api route. I am trying to expost the ports with ngrok.
My Nuxt/vue env
Nuxt config
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {
baseURL: 'http://localhost:8001/api/'
},
I am able to expose both port 3001 as well as port 8001 with ngrok but it seem like my front end is unable to talk to my ngrok port 8001, does anyone have any pointers?
ngrok
port 3001
./ngrok http 3001
port 8001
./ngrok http 8001
Run ngrok for the laravel project
Then run it for nuxt/vue front-end
Related
Say we have frontend and backend containers based on Docker Desktop (for Windows).
Backend container uses port 9001, and the frontend container listens to 9001.
The problem is that port 9001 is already in use by Windows 10 by the Intel driver, and it is impossible to run a container on this port:
Error response from daemon: Ports are not available: listen tcp 0.0.0.0:9001: bind: An attempt was made to access a socket in a way forbidden by its access permissions.
Could you please advise what is the way to handle this port if there is no ability to change it directly from application code?
A couple of ways:
When either using a docker run command, specify the host port to use, and set it to something other than 9001. i.e. -p 9002:9001 or Docker Compose, i.e.
ports:
- '9002:9001'
Then use port 9002 instead of 9001 when accessing the container from the host (Win 10).
Use Nginx and set up a reverse proxy, leave the host port empty when starting the container so no external post is opened on the host, and have the reverse proxy pass it over to the container's 9001 port.
I have been trying to configure lando to expose my container to public domain that is pointing there. So my domain, lets call it my_app.com, is showing The random port assignments to the container work from the domain but not I am not able to fix it to port 80.
For example Lando starts up and shows these available URLs
APPSERVER URLS https://localhost:32781
http://localhost:32782
http://my_app.lndo.site
https://my_app.lndo.site
When I navigate to my domain, my_app.com, it doesn't' work, but if I use my_app.com:32781, it does.
I feel like I am missing something simple. The server itself is a fresh installation of Fedora 29 with Lando v3.0.0-rc.8
My Lando file:
name: my_app
recipe: drupal8
config:
webroot: ./drupal/web
php: 7.2
port: '8080'
drush: ^9
xdebug: false
event:
post-rebuild:
- composer install -d=./drupal
Per https://docs.devwithlando.io/config/proxy.html, adding the following lines to your .lando.yml should configure Lando to properly route your custom domain. Port 80 will be bound automatically unless some other service on your machine is already using the port.
proxy:
appserver:
- my_app.com
You mention a .com domain. Apparently you want your app to be publicly (WAN) accessible. Are you behind any router? Then simply open a port and direct it to your computer IP and your 32782 for http which is port 80 for the outside world. In some routers this is called "Port mapping".
The firewall on your computer needs to have the port 32782 opened. You might need to include share.
I am having a hard time getting subdomains to work locally. I have Docker serving the application to port 8080, and I am able to see the Laravel welcome screen. I then have a simple route setup like this:
Route::domain('{name}.localhost:8087')->group(function () {
return 'Hello World';acrylic dns
});
I am using Laravel's basic server, i.e. php artisan serve --host=0.0.0.0 --port=8087
When I try and view the page, nothing happens. It just goes to the welcome screen. I have even tried adding 'test.localhost' to the /etc/hosts file. Couple questions:
1) Can you have the port in the host like I have it there (in the Laravel route)?
2) I have seem somewhat similar posts where the solution was to use acrylic dns (on windows). I am using a Mac. Is this something where I need an actual DNS server?
3) I am planning on using nginx, do I need a 'beefier' web server to accomplish this?
With the basic Laravel server I have tried hard coding test.localhost in the route, with and without the port. I'm sure I am goofing something up, just not sure where. I am on a Mac, and I am running Laravel 5.6. Thanks in advance!
1) No, the web server configuration will listen on the port.
// nginx
server {
listen 8080;
...
}
2) You add the subdomains in your /etc/hosts file and create separate nginx configurations:
// /etc/hosts
subdomain1.foo.localhost 127.0.0.1
subdomain2.foo.localhost 127.0.0.1
subdomain3.foo.localhost 127.0.0.1
// nginx subdomain1.foo.localhost.conf
server {
listen 8080;
server_name subdomain1.foo.localhost;
...
}
// nginx subdomain2.foo.localhost.conf
server {
# set different port if needed
# listen 8082
listen 8080;
server_name subdomain2.foo.localhost;
...
}
// nginx subdomain3.foo.localhost.conf
server {
# set different port if needed
# listen 8083
listen 8080;
server_name subdomain3.foo.localhost;
...
}
3) Nginx is a production ready web server, you may need load balancers and multiple instances of the web servers to scale out, but nginx will be more than sufficient.
If you're using Artisan serve, go to
/etc/hosts (or similar)
127.0.0.1 subdomain.localhost
And open in the browser
subdomain.localhost:8087
There is a related post here: Port mapping in Docker on Mac OSX installed with Docker Toolbox
but it didn't work for me
Get ports for container
docker port 485186e65a5e
8080/tcp -> 0.0.0.0:33360
8088/tcp -> 0.0.0.0:33359
19888/tcp -> 0.0.0.0:33358
50070/tcp -> 0.0.0.0:33357
50075/tcp -> 0.0.0.0:33356
8042/tcp -> 0.0.0.0:33361
Check that someone listens to ports in container
bash-4.1# netstat -alnpt | grep 19888
tcp 0 0 127.0.0.1:19888 0.0.0.0:* LISTEN 1094/java
Do wget in container
bash-4.1# wget 127.0.0.1:19888
--2016-04-11 14:16:54-- http://127.0.0.1:19888/
Connecting to 127.0.0.1:19888... connected.
HTTP request sent, awaiting response... 302 Found
Location: http://127.0.0.1:19888/jobhistory [following]
--2016-04-11 14:16:54-- http://127.0.0.1:19888/jobhistory
Reusing existing connection to 127.0.0.1:19888.
HTTP request sent, awaiting response... 200 OK
Length: 6763 (6.6K) [text/html]
Saving to: `index.html'
100%[================================================================================================================================================================================>] 6,763 --.-K/s in 0s
2016-04-11 14:16:54 (182 MB/s) - `index.html' saved [6763/6763]
Try to access forwarded port from host, no luck... :(((
$docker-machine ip default
192.168.99.100
$ wget 192.168.99.100:33358
--2016-04-11 16:18:04-- http://192.168.99.100:33358/
Connecting to 192.168.99.100:33358... failed: Connection refused.
What do I do wrong?
Omg, desired service started on 127.0.0.1 in container, that is why it wasn't visible from outside world. I've modified service config to start on 0.0.0.0 and now I can access forwarded container port
I had the same problem and was able to fix it by specifying the host that the server within the container uses.
NOTE: when using host below, it means a web server host. When I use host-machine, I mean the main operating system I'm using, (i.e. not a container or a web server, just my laptop as a machine)
The Problem
Running web servers on the container like webpack-dev-server and http-server automatically run the app using a host of http://localhost. Typically you will see that in the output when you start the server. Something like :
Project is running at http://localhost:8080
or
Server available at http://127.0.0.1:8080
On most machines, localhost and 127.0.0.1 are the same thing. This host is not publicly viewable. As a result, your host machine can't see anything, even though it's looking in the right place.
Solution
You should specify a public host when you run the server inside your container.
webpack-dev-server --port 8080 --host 0.0.0.0
or
http-server -p 8080 -a 0.0.0.0
Because the 0.0.0.0 address is viewable to any outside machine, you should be able to see your app working as expected from your host machine.
NOTE: This works for any server, like Python's SimpleHTTPServer, etc. Just look up how to change the host for your chosen server in the documentation
Resources/Nods
(how to run webpack-dev-erver with a publicly accessible host)[How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
Is it possible to open multiples ports in ngrok in same domain?
Something like:
Fowarding http://example.ngrok.com:50001 -> 127.0.0.1:50001
Fowarding http://example.ngrok.com:50002 -> 127.0.0.1:50002
I´m working in windows and it'll be useful for debuging with IIS Express
Yes, it is possible using multiple simultaneous tunnels, within the same hostname !
All you need to do, is to declare them on your configuration file, like this:
authtoken: 4nq9771bPxe8ctg7LKr_2ClH7Y15Zqe4bWLWF9p
tunnels:
first-app:
addr: 50001
proto: http
hostname: example.ngrok.com
host_header: first-app.example.ngrok.com
second-app:
addr: 50002
proto: http
hostname: example.ngrok.com
host_header: second-app.example.ngrok.com
And run them with:
ngrok start --all
Look on the documentation for options, like hostname, subdomain, authtoken and host_header. Hope this help you !
P.S For Free plan remove custom host and header part
like this it will be different domains FYI.
authtoken: 6yMXA63qefMZqCWSCHaaYq_5LufcciP1rG4LCZETjC6V
tunnels:
first:
addr: 3002
proto: http
second:
addr: 8080
proto: http
NOTES:
To find your default config file read https://ngrok.com/docs#config-default-location.
All plans issues an auth token. You can find yours in the web dashboard: https://dashboard.ngrok.com/get-started
What worked for me with ngrok w/ multiple ports
So I had the issue where I needed the same domain origin policy to work for different ports but I was halted in my tracks because ultimately ngrok does not support this. They support a custom subdomain or custom domain but not on different ports since all must come through port 80 or 443.
Instead of quitting, I had to hack things together using nginx locally like so:
http {
server {
listen 7777;
server_name localhost;
location / {
proxy_pass http://127.0.0.1:5000;
}
location /api {
proxy_pass http://127.0.0.1:8000;
}
}
}
I was fortunate the api server prefixed all calls "api" so I could route the api calls to a specific port and still serve the other traffic on another web server and you may not be so lucky.
I then configured the public web server to route all api calls to the same ngrok address and let ngnix sort it out.
I hope this may help you think of a combination of solutions to get there as thinking only one way may get you stuck as I was.
Go To These location :
OS X: /Users/example/.ngrok2/ngrok.yml
Linux: /home/example/.ngrok2/ngrok.yml
Windows: C:\Users\example\.ngrok2\ngrok.yml
then open yml file in notepad and paste below code and save.
authtoken: your_token
tunnels:
first:
addr: 3002
proto: http
second:
addr: 8080
proto: http
now go to your ngrok location and run ngrok start --all
I used on ngrok process (on a reserved domain) pointing to port 80 locally.
ngrok http 80
Locally I have nginx running the following config. The only thing that matters to me are the 2 locations /admin and /api as those are what I was previously using multiple ngrok prcesses for. nginx allows you to use the same tunnel for separate locations.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
server_name _;
location /admin {
proxy_pass http://127.0.0.1:3005;
}
location /api {
proxy_pass http://127.0.0.1:5001;
}
}
This is how you can do using subdomain (Following #robe007 answer)
authtoken: your_auth_token
region: au
tunnels:
frontend:
proto: http
addr: http://localhost:3000
bind_tls: true
subdomain: frontend-my-domain
host_header: rewrite
backend:
proto: http
addr: http://localhost:5001
bind_tls: true
subdomain: backend-my-domain
host_header: rewrite
Then run ngrok start --all
Unfortunatly none of the following solutions worked for me but after multiple hours typing code with my nose i figured a way to solve this problem:
authtoken: your_private_token
tunnels:
baseAPI:
proto: http
addr: https://localhost:44307/
host_header: localhost:44307
authAPI:
proto: http
addr: https://localhost:44305/
host_header: localhost:44305
The diference is instead of using only the port on the addr field, i used the full link and added the host_header too.
Using free plan
Actually, at 2023, I'm just supporting the original answer.
And, showing how to edit the ngrok config file (ngrok.yml).
In CMD do:
ngrok config edit
Something like this:
version: "2"
authtoken: your_token_here
tunnels:
any1:
addr: 8888
proto: http
any2:
addr: 8080
proto: http
any3:
addr: 50000
proto: http
Finally, again in CMD, start ngrok:
ngrok start --all
Be happy!