I'm running Nginx in one container over ports 80 and 443, the later with SSL certs generated with mkcert. This works wonderfully.
In another container I'm running Node that in turn runs Gulp which in turn runs Browsersync.
My Gulp file runs in the Node container, which opens port 3000 to my local machine and proxies localhost so that:
https://localhost runs from the Nginx container.
https://localhost:3000 runs from the Node container with Browsersync
This works except for the fact that the node container isn't able to securely display the website via proxy.
Reading more about what might be happening with Node the certifications, I find this at mkcert
Using the root with Node.js
Node does not use the system root store, so it won't accept mkcert
certificates automatically. Instead, you will have to set the
NODE_EXTRA_CA_CERTS environment variable.
export NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem"
So I understand I need rootCA.pen on my Node container and that should be the end of it.
In the Dockerfile for building the node container
FROM node:12.19.1-alpine3.9
RUN npm install -g gulp-cli#2.1.0
ADD ./nginx/certs /etc/ssl
RUN export NODE_EXTRA_CA_CERTS=/etc/ssl/rootCA.pem
I grab all my certifications including the rootCA.pem file and dump them somewhere in the node container, in this case in /etc/ssl
I then set the env var of NODE_EXTRA_CA_CERTS.
Just to be safe, after going into the Node container, a checking that rootCA.pem is there, I kill the node process and run export again!
Running the gulp file:
function server(done) {
browser.init({
proxy: "https://nginx",
open: false,
https: true
});
done();
}
Browsersync loads and I'm shown…
[Browsersync] Proxying: https://nginx
[Browsersync] Access URLs:
--------------------------------------
Local: https://localhost:3000
External: https://192.168.16.7:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
And I can open https://localhost:3000 in the browser and browsersync works. But not without a security warning.
What am I missing?
For anyone having trouble with SSL while using BrowserSync, you might want to point explicitly to your custom cert and key.
browserSync( {
proxy: "https://localhost/mysite/",
https: {
key: "W:/xampp/htdocs/mkcert/localhost/localhost.key",
cert: "W:/xampp/htdocs/mkcert/localhost/localhost.crt"
}
});
NB: I am using xampp and it's installed on W:/ drive.
You can learn more here.
HTH
Related
I am trying to run a Node application in a Docker container. The installation instructions specified that after adding host: '0.0.0.0' to config/local.js and running docker-compose up the app should be accessible at localhost:3000, but I get an error message in the browser saying "The connection was reset - The connection to the server was reset while the page was loading."
I have tried to add the host: '0.0.0.0' in different places, or remove it entirely, access https://localhost:3000 as opposed to at http, connecting to localhost:3000/webpack-dev-server/index.html, etc.
What could be going wrong?
I am trying to install node setup on AWS with OS ubuntu 20.04 with nginx web server.
Issue is that when we put the project folder in /var/www/html/project_folder and run the npm start in's given error [nodemon] starting babel-node src --source-maps
error: listen EADDRNOTAVAIL: address not available Public_ Ip:3000
instead already put public ip in /etc/ngix/site available/default file,
.env and index.js. PFA
Typically, NGINX expects any servers you are proxying to to be reachable at startup, otherwise fails.
: address not available 70.54.129.105:3000
most likely node isn't reachable - make sure your node app is running, then start nginx.
Also, good idea to not hard-code the node ip:port inside proxy config, but use a variable, makes it easy to reference inside config, e.g my-nginx-app.conf included/imported by nginx.conf :
map $host $my_node_server_x {
default http:\/\/172.0.0.1:3000;
}
server {
...
location {
...
proxy_pass $my_node_server_x
# other proxy settings
}
}
NGINX documentation has Example config for proxying.
I have a backend up (NodeJS) which is the listening on some port (2345 in this example).
The client application is a React app. Both are leveraging socket.io in order to communicate between themselves. Both are containerized.
I then run them both on the same network, using the "network" flag:
docker run -it --network=test1 --name serverapp server-app
docker run -it --network=test1 client-app
In the client, I have this code (in the server the code is pretty standard, almost copy-paste from socket.io page):
const socket = io.connect('http://serverapp:2345');
socket.emit('getData');
socket.on('data', function(data) {
console.log('got data: ${data}');
})
What I suspect is that the problem has to do with having the client (React) app served by the http-server package, and then in the browser context, the hostname is not understood and therefore cannot be resolved. When I go into the browser console, I then see the following error: GET http://tbserver:2345/socket.io/?EIO=3&transport=polling&t=MzyGQLT net::ERR_NAME_NOT_RESOLVED
Now if I switch (in the client-app) the hostname serverapp to localhost (which the browser understands but is not recommended to use in docker as it is interpreted differently), when trying to connect to the server socket, I get the error: GET http://localhost:2345/socket.io/?EIO=3&transport=polling&t=MzyFyAe net::ERR_CONNECTION_REFUSED.
Another piece of information is that we currently build the React app (using npm run build), and then we build and run the Docker container using the following Dockerfile:
FROM mhart/alpine-node
RUN npm install -g http-server
WORKDIR /app
COPY /app/build/. /app/.
EXPOSE 2974 2326 1337 2324 7000 8769 8000 2345
CMD ["http-server", "-p", "8000"]`
(So, no build of the React app takes place while building the container; we rather rely on a prebuilt once)
Not sure what I am missing here and if it has to do with the http-server or not, but prior to that I managed to get a fully working socket.io connection between 2 NodeJS applications using the same Docker network, so it shouldn't be a code issue.
Your browser needs to know how to resolve the SocketIO server address. You can expose port 2345 of serverapp and bind port 2345 of your host to port 2345 of serverapp
docker run -it --network=test1 -p 2345:2345 --name serverapp server-app
That way you can use localhost in your client code
const socket = io.connect('http://localhost:2345');
Also get rid of 2345 from your client Dockerfile
I set up a virtual machine with Vagrant, ubuntu xenial64, installed npm/nodejs and the vue-cli.
I scaffolded a webpack application with vue init webpack myproject. When I now run npm run devthe webpack server starts, but since it's inside the virtual machine I can't access the webpage on my PC.
I found out, that you can run webpack server with --host 0.0.0.0 but since the Vue-Cli generates the whole process, I wasn't able to figure out where I can add this parameter.
Or is there another solution?
Ok fixed it myself :). Just add this to your Vagrantfile:
config.vm.network :forwarded_port, guest: 8080, host: 80
So nothing to do with Webpack, just basic vagrant setup. This will forward the 8080 port to 80 port of your host machine. So you need to type localhost:80 in your browser to get to your application.
I'm having an issue where browser-sync is not properly proxying my apache2 server. I'm running browser-sync through gulp within an Ubuntu 14.04 VM with Ubuntu 15.04 on the host. I'm using the following configuration:
browserSync({
proxy: 'localhost:80',
port: '8081',
open: false
});
The guest machine's port 80 is mapped to 8080 on the host. The gulp task runs without issue and I get the expected output from browser-sync. If I visit localhost:8081/index.php, it works without any issue. If I try to visit localhost:8081/foo/index.php, however, my browser is redirecting to localhost:8080/foo/index.php, and browser-sync does not function.
If I set logLevel to debug, I see output when I visit localhost:8081/index.php:
[BS] Browser Connected: Chrome, version: 45.0.2454.85
There is no output, however, when I visit localhost:8081/foo/index.php
Is there a bug with browser-sync when used within a VM?