0

We are moving our legacy deployment to Docker Containers. All services will be running in seperate docker containers. Services includes Postgres, Redis, JobProcessor, LogProcessor, Nginx with Consul template, Consul, Registrator, Rabbitmq and the Platform(Node JS).

We have splitted these services as Master and Platform. Master services includes all the above mentioned services except the platform.

Platform will run single application based on customer requirements. We will modify platform code also to fit customer requirement. Changes include design, layout, images and even sometimes API (include/remove API). So Each application will be running as separate container.

Customer can access the application using http://platform.com/AppName

Platform is built using NodeJs, AngularJs. We handled code to make dynamic http calls based on app name. Now the challenge is to load the css files, images and some static js files. We dont want to modify code to update url for each application.

Is there any known approach to hack this?

Sathish Sharma
  • 21
  • 4
  • "We dont want to modify code to update url for each application." What does it mean exactly? – Paul Wasilewski Jun 17 '16 at 10:37
  • Hi Paul.. Thanks for quick reply.. It means.. URL will be different for each application but the endpoint remains the same.. for eg. appname/checkUser.. to load images in css it will be something like url('/public/images/Login-bg.png').. here we need to append application name to load the right image.. this place we dont want to change it should be dynamic.. How to do it.. – Sathish Sharma Jun 17 '16 at 10:53
  • Why you're not using relative paths? And ensure with scaffolding the path structure of each app? – Paul Wasilewski Jun 17 '16 at 11:11
  • @Paul - Each application will be running as docker container and will be auto discovered and can be accessed using appname via nginx.Everything will be relative path.but that relative path needs to be dynamic based on appname. For https endpoints..we are able to make dynamic.. but not for the css , images.. in css if we require image.. we cannot append appname to url in code since it will not be possible for each application. we will acheive dynamic http calls by storing appname in $cookies or $stateparams.so in angular code , it will works fine.but just think of css how we can do like this.. – Sathish Sharma Jun 17 '16 at 12:01
  • Did I understood you correct that you want to access the static/general CCS files through an central HTTP server (nginx) in a docker file? And in the CSS there is e.g. a URL stored ('/public/images/logo.png'). Finally you want to replace that image in your APP? Did I forgot something or is that all? – Paul Wasilewski Jun 17 '16 at 15:51
  • yeah.. image and css will differ based on applications and customers .. it should load right css and images for the app – Sathish Sharma Jun 17 '16 at 16:31
  • Okay, the app specific image and CSS is distributed through one central nginx and not only generic content. That makes the problem clear. – Paul Wasilewski Jun 17 '16 at 16:35
  • each app will be running in seperate docker container. inside that container css and images will be available for that app.. Nginx will act as reverse proxy and load balancer here.. when i make http://platform.com/app/image.jpg it will go to nginx and nginx will forward to appropriate app container and result should be returned.. Each app and their corresponding images, css and js files will be in single container only.. we dont want to change urls for each app.. – Sathish Sharma Jun 17 '16 at 16:40
  • If you still looking for a solution I have updated my answer. Please comment if something i missing. – Paul Wasilewski Jun 21 '16 at 16:15

2 Answers2

0

This is how what i understand, you want to access same set of static files (css and images) using different URL's.

Guess that should be simple by specifying re write URL format and point to one static URL. So same content will be server using different dynamic URL.

rewrite URL format will be looks like : some-domain.com/{%a-z}/style.css some-domain.com/style.css

So it can server for all products. Hope this will help you.

Dhinesh
  • 1
0

Bind your specific css file through a controller.

Add to your angular.module a controller to set the specific css file.

.controller('cssCtrl',['$scope','$http', function($scope,$http){
 $http.get('<your domain specific css url>').
        then(function(response) {
            //HERE YOU CAN MANIPULATE YOUR CSS TO SET THE RIGHT IMAGE URL
            $scope.css = response.data.temp.css;     
        }, function(response) {
            alert('Error retrieving css: ' + response);
        });
 }]

Add to your HTML the css link.

<head ng-controller="cssCtrl">
  <link ng-attr-href="{{css}}" rel="stylesheet" type="text/css">
</head>
Paul Wasilewski
  • 9,762
  • 5
  • 45
  • 49