Dockerizing Quasar app for production



  • Hi,
    Did anyone dockerized the Quasar/Vue app and using it on the production?
    I need to do that as I run all websites on my server inside containers and also thanks to that I can easily get CI/CD.

    I found some tutorial which includes creating express server etc.
    How you deal with that?





  • but it is for dev, not for production… I’ve seen that before



  • Um, you can also develop a production version with it too. Just run the build script from within the container and load that image to your repository. 😄

    Scott



  • URL appears to be gone now.

    I’m struggling with this as well. Get all sorts of weird npm dependency errors when I try to build with docker.



  • Following dockerfile uses a 2 stage approach for building a quasar 0.15 app.
    2 stage means that the first stage will only build the sources and stage 2 is for hosting the SPA in an nginx container.

    # Build stage
    FROM node AS buildenv
    
    WORKDIR /generator
    
    ENV projectName "MyQuasarProjectFolder"
    # restore
    
    # copy src
    
    COPY ./${projectName}/package.json .
    COPY ./${projectName} .
    #RUN npm install -g quasar-cli
    
    RUN npm install
    
    RUN node node_modules/quasar-cli/bin/quasar-build
    
    # Runtime stage
    
    FROM nginx
    ENV projectName "MyQuasarProjectFolderr"
    COPY --from=buildenv /generator/dist/spa-mat /usr/share/nginx/html
    COPY ./${projectName}/default.conf /etc/nginx/conf.d/default.conf
    
    EXPOSE 80
    

    The additional default.conf file is nginx specific:

    # based on https://gist.github.com/szarapka/05ba804dfd1c10ad47bf
    server {
        listen       80;
        server_name  localhost;
    
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ @rewrites;
        }
    
        location @rewrites {
        rewrite ^(.+)$ /index.html last;
      }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    
    }
    


  • @paul
    Thank you for share your production Dockerfile, It works great.



  • @carlos-armentac thanks. I’m glad it’s useful. I sometimes wonder if the default.conf is really necessary.
    Did you ever tried without the default.conf?