I have a back end api deployed on heroku,
mydomain.com
The front end is an angularjs application, I want to host it on the same url so that I will avoid the cors restriction.
Is that possible ?
The easiest ways to solve this:
by using Multiple Buildpacks on Heroku and buildpack-nginx you can have a nginx instance in your dynos that can serve your static files, and also pass requests to your backend server (unicorn) processes.
The frontend code has to reside inside the same repo as the backend code, or (as an alternative) be pulled out of a different repo in the build process.
similar to the first solution, but without nginx. Possible if you get ruby/unicorn to serve your static JS files too.
use Heroku's Docker Support to build your own app image and deploy it.
All of the above combined :)
This most likely could include adding the nodejs buildpack to setup a proper build pipeline.
Related
We have a couple of single page apps that we want to host on a single web server. I'm only talking about the frontend part (Angular, React). The APIs run elsewhere. Each app is basically just a directory with a collection of static files (js, html, css, etc.) generated by the CI process. In fact, the build process creates one Docker image per app. Each image basically just contains a directory that contains the build artifacts.
All apps should appear in different folders on the same website:
/app1
/app2
/app3
What would be the best practice for deploying the apps? We've come up with a few strategies.
1. A single image / container
We could build a final web server image (e.g. Apache) and merge all the directories from the app images into it.
Cons: Versioning sounds like hell. Each new version of an app causes a new version of the final image. What if we want to revert to an older version of an app while a newer version of another app has already been deployed?
2. Multiple containers with a front-end reverse proxy
We could build each app image with its own built-in web server. And then route them all together with a front-end reverse proxy (nginx, traefik, etc.).
Cons: Waste of resources running multiple web servers.
3. One web server container and multiple data-only containers for the apps
Deploy each app in a separate container that provides it's app directory as a volume but does nothing else. Then there is a separate web server container that shares the same volumes in order to have access to all the files.
So far I like the 3rd variant best. Whenever a new version of an app needs to be deployed, we simply do a Docker pull on a new version of its image. But it still seems hacky. Volumes must be deleted manually. Otherwise the volume will not be seeded with the new content. Also having containers that do nothing isn't the Docker way, isn't it?
A Docker container wraps a process, but your compiled front-end applications are static files. That is, the setup you're describing here doesn't really match Docker's model.
Without Docker you could imagine deploying these to a single directory
/var/www/
app1/
index.html
css/app.css
app2/
index.html
css/app2.css
js/main.js
and serve these with a single HTTP server; you would not typically run a separate server for each front-end application.
A totally reasonable option, in fact, is to completely ignore Docker here. Even if your back-end applications are being served from containers, you can publish your front-end code (again, compiled to static files) via whatever hosting service you have conveniently available. Things like Webpack's file hashing can help support deploying updated versions of the application without breaking existing clients.
If I was using Docker I'd use either of your first two options but not the third. Running a combined all-the-front-ends HTTP server is the same pattern already discussed, except the HTTP server is in a container instead of the host. Running a dedicated HTTP server for each front-end application lets you use Docker's image versioning, and the incremental cost of an additional HTTP server isn't that expensive.
I would avoid any approach that involves named volumes or "data-only containers". Nothing ever automatically copies content into a volume, except for one specific corner case (on native Docker only, using named volumes but not any other kind of mount, only the first time you use a volume but never updating the volume content), and so you'd have to manually write code to copy content out of an image into a shared hosting location; that's more complicated and doesn't really gain you anything over directly running Webpack on the host.
I dockerize my SPA web app by using nginx as base image then copy my nginx.conf and build files. As Dockerize Vue.js App mention I think many dockerizing SPA solutions are similar.
If I don't use docker I will first build SPA code then copy the build files to nginx root directory (After install/set up nginx I barely change it at all)
So what's the benefit of dockerizing SPA?
----- update -----
One answer said "If the app is dockerized each time you are releasing a new version of your app the Nginx server gets all the new updates available for it." I don't agree with that at all. I don't need the latest version of nginx, after all I only use the basic feature of nginx. Some of my team members just use the nginx version bundled with linux when doing development. If my docker image uses the latest ngixn it actually creates the different environment than the development environment.
I realize my question will be probably closed b/c it will be seen as opinion based. But I have googled it and can't find a satisfied answer.
If I don't use docker I will first build SPA code then copy the build files to nginx root directory (After install/set up nginx I barely change it at all)
This is a security concern... fire and forget is what it seems is being done here regarding the server.
If the app is dockerized each time you are releasing a new version of your app the Nginx server gets all the new updates available for it.
Bear in mind that if your App does not release new versions in a weekly bases then you need to consider to rebuild the docker images at least weekly in order to get the updates and keep everything up to date with the last security patches.
So what's the benefit of dockerizing SPA?
Same environment across development, staging and production. This is called 100% parity across all stages were you run your app, and this true for no matter what type of application you deploy.
If something doesn't work in production you can pull the docker image by the digest and run it locally to debug and try to understand where is the problem. If you need to ssh to a production server it means that you automation pipeline have failed or maybe your are not even using one...
Tools like Webpack compile Javascript applications to static files that can then be served with your choice of HTTP server. Once you’ve built your SPA, the built files are indistinguishable from pages like index.html and other assets like image files: they’re just static files that get served by some HTTP server.
A Docker container encapsulates a single running process. It doesn’t really do a good job at containing these static files per se.
You’ll frequently see “SPA Docker containers” that run a developer-oriented HTTP server. There’s no particular benefit to doing this, though. You can get an equally good developer experience just by developing your application locally, running npm run build or whatever to create a dist directory, and then publishing that the same way you’d publish other assets. An automation pipeline is helpful here, but this isn’t a task Docker makes wildly simpler.
(Also remember when you do this that the built application runs on the user’s browser. That means it can’t see any of the Docker-internal networking machinery: it can’t use the Docker-internal IP addresses and it can’t use the built-in Docker DNS service. Everything it reaches has to be on docker run -p published ports and it has to use a DNS name that reaches the host. The browser literally has no idea Docker is involved in this at all.)
There are a few benefits.
Firstly, building a Docker image means you are explicitly stating what your application's canonical run-time is - this version of nginx, with that SSL configuration, whatever. Changes to the run-time are in source control, so you can upgrade predictably and reversibly. You say you don't want "the latest version" - but what if that latest version patches a critical security vulnerability? Being able to upgrade predictably, on "disposable" containers means you upgrade when you want to.
Secondly, if the entire development team uses the same Docker image, you avoid the challenges with different configurations giving the "it works on my machine" response to bugs - in SPAs, different configurations of nginx can lead to different behaviour. New developers who join the team don't have to install or configure anything, and can use any device they want - they can be certain that what runs in Docker is the same as it is for all the other developers.
Thirdly, by having all your environments containerized (not just development, but test and production), you make it easy to move versions through the pipeline and only change the environment-specific values.
Now, for an SPA, these benefits are real, but may not outweigh the cost and effort of creating and maintaining Docker images - inevitably, the Docker image becomes a bottleneck and the first thing people blame. I'd only invest in it if you see lots of environment-specific pain (suggesting having a consistent run-time environment is necessary), or if you see lots of "it works on my machine" type of bug.
Colleagues, I have a front-end application based on Ember and Rails (running on nginx) which also uses redis as a cache.
I want to dockerize this application, but not sure about best practices. Would it be best to create one container with a dockerfile that pulls in all these pieces, or should each component be in its own container?
For bonus points: I have to retrieve the code from private bitbucket repos and.. how are we meant to store our secrets and other config files when using containers?
So, I'll try my best from a phone,
Secrets are to be kept in environment variables, so you may need to update your application code to work with those.
As for dockerizing, I typically do backend (rails in this case) in one (or more) container(s) and nginx in a single container bundled with a single page app (ember in this case)
So, you should have two dockerfiles total.
Here are some resources that hopefully provide enough to get started:
Dotnet + react: https://github.com/sillsdev/appbuilder-portal/
Modern bleeding edge ember: https://gitlab.com/NullVoxPopuli/emberclear/
Old ember: https://gitlab.com/precognition-llc/aeonvera-ui
Rails: https://gitlab.com/precognition-llc/aeonvera
For the nginx, that first link shows a dotnet core and react app with nginx and has the deployment strategy I've described. For nginx, you'll start with a node container, or the ember-cli image from danlynn (who still hasn't responded to me about getting those on the official ember docketed), and use multistage builds to eventually copy your dist folder to a directory in the nginx container in the last stage.
Hope this helps. I can clarify more if needed.
I have a ruby on rails application running on AWS. As usual each application server have an nginx and multiple unicorn workers of the application instance.
I am going to move the workload to Kubernetes. I have couple of question regarding this, please help if anyone out there who have kubernetised there ror application.
What will be the role of nginx?. Do i need to install nginx in all the pods or i should have a an nginx pod which will reverse proxy to all rails/unicorn pods?
Which one is the best for ror in kubernetes, passenger or unicorn?
How will you use nginx?
A kubernetes service can be backed by several kubernetes pods. Whenever anyone makes a request to the kubernetes service, the request is sent to one of the upstream pods in a round robin fashion.
If you were planning to use nginx as a 'load-balancer' or reverse proxy to front your rails app, you don't really need that anymore. Each pod ofcourse will need to have something like passenger/unicorn to serve the rails app.
Here'a a guide I found that talks about a rails deployment from start to end: http://www.thagomizer.com/blog/2015/07/01/kubernetes-and-deploying-to-google-container-engine.html
If you're planning to use nginx as a static file server, my recommendation would be to have a different pod for the static files that just contains nginx.
What is better to use with k8s?
K8s doesn't really care, because this is outside k8s's concern. Use whatever you like, or whatever you think works better in a container environment. The better question to ask might be which one of passenger/unicorn is a better fit for containerised rails apps.
We have a number of production servers and recently introduced gulp to building our frontend of our app and away from Rails asset pipeline.
So far so good except the Rails asset pipeline used to magically sync the cache busting between the servers and load balancer worked nicely. This is not the case with gulp-rev which builds on each individual server and randomly assigns a hash to the files, causing problems with load balancing (sometimes the files aren't loading because the browser is requesting the hashed file name from server 1)
What is the best way to solve this?
One suggested way is to compile or build via gulp then dump the product into each server (perhaps Jenkins could help) but we are using a pretty OG way of deploying with Chef.