I want to deploy consul and allow for admins to monitor list of registered services using ui.
Also I need to allow access from intranet (local network) for this UI but it must be behind context-path (say, 'front-ui/***')
here is my setup: docker-compose file used to deploy stack:
consul:
image: "consul:1.12.3"
command: ["agent", "-dev", "-client", "0.0.0.0", "-ui-content-path", "/front-ui/consul"]
deploy:
labels:
traefik.enable: "true"
traefik.http.routers.router-consul-http.entrypoints: "http"
traefik.http.routers.router-consul-http.middlewares: "consul-auth"
traefik.http.routers.router-consul-http.rule: "PathPrefix(`/front-ui/consul`)"
traefik.http.routers.router-consul-http.service: "consul#docker"
traefik.http.services.consul.loadbalancer.server.port: 8500
traefik.http.middlewares.consul-auth.basicauth.users: "bla-bla"
traefik.docker.network: "proxy"
networks:
- proxy
after this I try to access consul ui via url "http://my-site/front-ui/consul" and it works partially.
i.e. if I open html code of the page I see that it uses correct urls
<link rel="icon" href="/front-ui/consul/assets/favicon.ico">
<link rel="icon" href="/front-ui/consul/assets/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/front-ui/consul/assets/apple-touch-icon-01cd4680782fbb5bc02301347df9903d.png">
but then consul ui makes http call to rest api to load list of whatever it needs and url is not correct
http://bla-bla/v1/catalog/datacenters
so I am at loss.
How is it even supposed to work if setting "-ui-content-path" affects only urls of html/css resources and not accessible rest api ?
and opposite question if there is setting to change url for rest api then how to configure it for clients that expect to access it using 8500 port ?
i googled through consul doc and found nothing which is disappointing as described by me use case looks quite common.
Related
I have a project which I have dockerised here: https://github.com/redis-projects/redis-movies/tree/gitpod
I am in the process of trying to get it to work correctly on GitPod, however I am having issues with the frontend react app hitting the backend java service. The react app is running in my local browser so I am confused by which network settings I should use and how to correctly configure.
The docker-compose file when used locally can simply use localhost:8080 to interact with the backend services, but GitPod generates a unique domain over HTTPS. Currently this causes the issues:
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.
This is self-explanatory, I cant make HTTP requests when the site is loaded via HTTPS. & even if I could, its pointing # localhost so the service wont resolve.
How can I setup my docker-compose + gitpod configuration to correctly configure the React URL
Currently use env vars:
REACT_APP_MOVIE_SERVICE_HOST=localhost
REACT_APP_MOVIE_SERVICE_PORT=8080
and this simply builds a url like so (apiConfig.js): http://${process.env.REACT_APP_MOVIE_SERVICE_HOST}:${process.env.REACT_APP_MOVIE_SERVICE_PORT}
Assuming that the backend services are exposed via a public endpoint, I will need to handle any CORs issues since these services are no longer 'local'?
I am not sure the title of the question is correct, but I'll try to explain what I need.
We host multiple web applications on a single machine, so
https://localhost:8080
and
https://localhost:8081
point to different applications.
Meanwhile, API gateway maps request without dropping the URL suffix:
https://api.domain.com/service1/Home/Index
turns into
https://localhost:8080/service1/Home/Index
and
https://api.domain.com/service2/Home/Index
into
https://localhost:8081/service2/Home/Index
I would like the app's root ~ to resolve to hostUrl+suffix where suffix is a configured value.
I used this blogpost to globally prefix all the routes for controllers and pages, but now I struggle with static files.
I am able to virtually move wwwroot:
app.UseStaticFiles(new StaticFileOptions
{
RequestPath = $"/{GlobalPrefix}"
});
but <link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" /> does not contain GlobalPrefix part when rendered.
So I would like to add this GlobalPrefix to whatever base URL site is hosted at. Be it a self-hosted app or in IIS.
P.S. RTFM =)
Using app.UsePathBase("/myPath")(https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.usepathbaseextensions.usepathbase?view=aspnetcore-2.2) is working in that case.
There have been changes in ASP.NET Core 2 regarding that (http://github.com/aspnet/Announcements/issues/226). Also, be aware of a strange behavior: http://github.com/aspnet/HttpAbstractions/issues/893
I have an HTML file in which I am including these lines.
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/css/converse.min.css">
<script src="https://cdn.conversejs.org/dist/converse.min.js"></script>
<script src="index.js"></script>
and my index.js contains this code.
converse.initialize({
bosh_service_url: 'http://localhost:7070/http-bind/',
console.log(bosh_service_url)
jid: 'admin#localhost',
password:'root'
});
so can anybody tell me what I am doing wrong here. I am getting no response message on console(not even error). I think there is some problem with this bosh url. I am not getting any active client session in openfire.
I'm pretty sure that that console.log() statement messes up your configuration object. I'd remove that.
Also, this assumes that the browser can reach your instance of Openfire on 'localhost' (port 7070) which will only work in browsers that are opened on the same machine as where Openfire is running.
Finally, your JID includes 'localhost'. Is that the XMPP domain name that you have configured in Openfire (which, at best, is a very confusing value to use)?
You can lookup the configured values for the XMPP domain (which you need to use as part of the JID), but also the fully qualified domain name of the server (which you should use as part of the BOSH service URL) on the first page (after login) of the Openfire Admin Console.
Using Angular-CLI as a frontend. 4200 port
Using Express as a backend. 8080 port
Directories look like:
Application
- backend
- ...Express architecture
- frontend
-...Angular2 architecture
So I'm running two projects, two commanders, one for frontent, second one for backend. node app.js for backend (8080), ng serve for frontent (4200).
Let's assume that I have a layer in backend which returns some string.
app.get('/hello', function(req, res) {
res.send("Hello!");
}
How can I make a request from frontend to backend and get that string? I don't want to know how exactly should I use Angular2 because that's not the point. I'm asking, what technology should I use to be able connect these two (frontent and backend) sides on different ports. If I just run them and make a request from frontend, I'll get an error because it can't find /hello url.
Your request to /hello means an absolute path inside the application running the angular application, so the request goes to http://localhost:4200/hello. Your angular application just doesn't know about the express application you want to target.
absolute urls
If you want to access the hello route on the other (express) application, you need to explicitly specify this by referencing http://localhost:8080/hello.
cors
Doing it this way, the correct application is targeted, but you will likely run into CORS issues, because the browser will prevent the javascript code obtained from localhost:4200 to access a server at localhost:8080. This is a security feature of your browser. So if you want to allow the code at 4200 to access the backend at 8080 your backend can whitelist this so called origin. For details see http://enable-cors.org/ and a corresponding express middleware you could use to support cors in your backend (https://www.npmjs.com/package/cors).
Using this approach has two downsides in my opinion. First, you need a way to tell your frontend under which absolute url it can reach the backend. This must be configurable because you need different urls for dev, staging and production. You then also need a way to manage all your whitelisted urls because the frontend in production will have a different url than when running the frontend in development. This can get pretty cumbersome to handle.
proxying your backend
A better approach in my opinion is to handle this in your infrastructure by proxying the backend in your frontend application. With proxying you basically tell your frontend server that all requests to some url should be passed through to another application. In your case this could probably mean, that for example you configure a proxy for the path /api/ to proxy the application on localhost:8080. The server then doesn't try to find a url like /api/hello on your frontend application but forwards your request to localhost:8080/hello. In your angular application you then don't need to care about the url of your backend and you can then always do a request to a url like /api/some-express-route.
For this to work you need to configure your angular dev server to proxy the requests. For details on how to do this, please see the docs at https://angular.io/guide/build#proxying-to-a-backend-server. When going to production, you can do this by configuring your web server, e.g. nginx to proxy the requests.
I have an API Gateway in AWS that calls a a lambda function that returns some html. That html is then properly rendered on the screen but without any styles or js files included. How do I get those to the client as well? Is there a better method than creating /js and /css GET endpoints on the API Gateway to go get those files? I was hoping I could just store them in S3 and they'd get autoloaded from there.
Store them on S3, and enable S3 static website hosting. Then include the correct URL to those assets in the HTML.
I put in the exact address of each js/css file I wanted to include in my html. You need to use https address, not the http address of the bucket. Each file has it's own https address which can be found by following Mark B's instructions above. Notably, going through the AWS admin console, navigate to the file in the S3 bucket, click the "Properties" button in the upper right, copy the "Link" field, and post that into the html file (which was also hosted in S3 in my case). Html looks like this:
<link href="https://s3-us-west-2.amazonaws.com/my-bucket-name/css/bootstrap.min.css" rel="stylesheet">
I don't have static website hosting enabled on the bucket. I don't have any CORS permissions allowing reading from a certain host.