0

I'm currently developing a web application composed of:

  • api: an API built with Flask in Python
  • app: a web app built with vue-cli (based on webpack), and minified with npm run build

I've successfully built the api with an OpenShift Python S2I (source-to-image) image: python-36-rhel7.

I'd like to be able to automatically build the static web app from source and serve it through Nginx or Apache, in a separate app from the same project.

It should:

  • download the app source from the git repo (context-dir=/app/)
  • install npm
  • build it with npm install and npm run build
  • serve the built html+js+css files

There exist a node.js S2I image but it seems to be more suited for Express.js apps.

What would be the best way to build and serve a minified static web app on OpenShift?

thibautg
  • 2,004
  • 1
  • 14
  • 17
  • The Python S2I image also has npm already a part of it. You could use a custom S2I build script in your repository to do the extra steps. If you used mod_wsgi-express for hosting the Flask application, you could have it host the static files for you. Are your repos public so can see how they are setup? Can then give more details. – Graham Dumpleton Nov 28 '18 at 19:38
  • Hi, thanks! I did not know that the python image had npm built in. It's good news because we don't have root access in s2i images. For the Flask app I'm currently using gunicorn with the python-36-rhel7 image. I'm using a private repo but I'll try to publish a sample app on github. I'd like to be able to automatically pull the code from the internal git, run `npm install` and `npm run build`, configure a proxypass to the api and serve everything through nginx or apache in OpenShift. – thibautg Nov 28 '18 at 20:58
  • 1
    If you haven't already, read through https://www.openshift.com/deploying-to-openshift/ It talks about customising the build process. You need to supply an S2I assemble script which invokes original, then does the extra steps. Apache httpd is also in the image, but only makes sense if using mod_wsgi-express so it uses Apache for handling both Python WSGI application and static file handling. – Graham Dumpleton Nov 28 '18 at 22:30
  • I'm currently reading it! I've just realized you are the author. Very good book. Would you recommend making two separate apps in the same project, or one same app with the api and static files? I guess that I need a custom s2i image with assemble+run scripts, not something 'magical' like the python which does almost everything automatically? I'll try tomorrow at work, thanks! I've made the following sample repo: https://github.com/Thib-G/openshift-vue-flask . The Flask `api` works perfectly with the s2i CLI. I still need to find a way to build the Vue `app` with `npm run build`. – thibautg Nov 28 '18 at 22:50
  • 1
    The problem with having separate deployment if were going to use the existing S2I for Apache httpd is that I don't think it includes npm, so you need to run that build to create the static files separately. To do that you would need to use a chained build. That is one build using S2I for node.js or Python images to generate files, and then use second build to pull those into S2I build with Apache httpd image. That is a lot more fiddly than customising your Python S2I build and using mod_wsgi-express. – Graham Dumpleton Nov 29 '18 at 00:00
  • Hi I've been able to make the Vue.js app work with [`rhoar-nodejs-tech-preview/rhoar-nodejs-10-webapp`](https://access.redhat.com/containers/?tab=tech-details&platform=docker#/registry.access.redhat.com/rhoar-nodejs-tech-preview/rhoar-nodejs-10-webapp) but it uses vue-cli's integrated web server. I'd rather have Apache or nginx serve the static files. I will try a chained build. – thibautg Dec 02 '18 at 17:35
  • I don’t find a lot documentation on how to use OpenShift to serve a single page app (SPA). It should be able to download the source code from git, run `npm run build`, copy the minified files from `dist` to `www` and serve them statically with Apache or Nginx. What would be the easiest way to do that? – thibautg Dec 02 '18 at 22:46
  • I already said above that the easiest way is probably to use the Python S2I builder because it contains npm, Apache httpd, and you can also install mod_wsgi-express to make it easier to start Apache, including telling mod_wsgi-express to only host static files. Did you also read the free book I linked to? It has more on custom builds, including chained builds. – Graham Dumpleton Dec 02 '18 at 23:58
  • Hi, I'd rather decouple the api from the front-end and use standard base images with as little config as possible. mod_wsgi does not work out-of-the-box. I've succeeded in making everything work in this repo: https://github.com/Thib-G/openshift-vue-flask . The API is decoupled but uses the same host at the /api/ endpoint to prevent CORS issues. Thanks for your time! – thibautg Dec 03 '18 at 10:40

0 Answers0