lundi 29 avril 2019

How do I deploy my vue.js web app using a virtual machine?

I am new to web development and I am having trouble deploying a web app.

Context:

I have a working web app, which consists of:

1) front-end: written in vue.js, I used npm run serve to run

2) back-end: written in Django. I used python manage.py runserverto run

Because the app involves GPU computation, I have to run it on my department server. In order to view it, I use SSH port forwarding to forward both the frontend and backend to my localhost (so that I can access it from localhost:16006). It works.

Now, I need to deploy this website to public. My department set up a Ubuntu 18.04.2 virtual machine(VM) for me (using ufw as its firewall software and allowing all outbound connections and inbound ssh, http, and https):

layout2im.cs.ubc.ca

Problems

I pulled my code to this VM and installed relevant dependencies/packages. For frontend, I configured vue.config.js like this:

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
    publicPath: '',
    outputDir: './dist/',

    chainWebpack: config => {

        config.optimization
            .splitChunks(false)

        config
            .plugin('BundleTracker')
            .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])

        config.resolve.alias
            .set('__STATIC__', 'static')

        config.devServer
            .public('https://layout2im.cs.ubc.ca:80')
            .host('0.0.0.0')
            .port(80)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(true)
            .headers({"Access-Control-Allow-Origin": ["\*"]})
            .open(true)
    }
};

Then I npm run serve and it said app running at

App running at:
  - Local:   https://localhost:1024
  - Network: https://layout2im.cs.ubc.ca:80/

But I can't open https://layout2im.cs.ubc.ca:80/ in the browser. (I tried port 443 and it doesn't work either)

This site can’t be reached
layout2im.cs.ubc.ca refused to connect.

(I don't know if this is relevant, but I tried npm run build too, and dist/index.html contains:

<noscript><strong>
We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong></noscript>

)

I am not even sure if I am on the right track. It'd be great if somebody can point out my mistakes and how I should properly make use of the VM to deploy this website. (e.g. Do I need Docker?)




Aucun commentaire:

Enregistrer un commentaire