Django/Nginx - Static files not found

Question

I'm trying to deploy a very simple Django app that uses VueJS with Webpack-Loader using Django-Webpack-Loader. I can run my app in local without any problem using manage.py runserver and npm run serve.

Now i'm trying to deploy this simple app to DigitalOcean using Gunicorn and Nginx. The problem is that while i can see the standard templates being rendered by django, my Vue files are not loading and i only get a lot of errors, it loooks like the static folders are not being retrievede although i have a static directory:

GET http://URL/static/vue/js/chunk-vendors.js net::ERR_ABORTED 404 (Not Found)
GET http://URL/static/vue/js/index.js net::ERR_ABORTED 404 (Not Found)

The full code of the application is HERE, it's not mine, i'm just running a simple example to get started. My static directory is located on django_vue_mpa>static

Can anyone help me on this?

I made sure to build my frontend for production using npm run build and i collected my static files using manage.py collectstatic, but i still get the error. Any kind of advice is appreciated.

My Nginx conf:

server {
    listen 80;
    server_name http://MYURL/;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /django-vue-mpa/static;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/django-vue-mpa/django-vue-mpa.sock;
    }
}

My vue.config.js:

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


const pages = {
    "stopwatch": {
        entry: "./src/stopwatch.js",
        chunks: ["chunk-moment", "chunk-vendors"],
    },
    "index": {
        entry: "./src/index.js",
        chunks: ["chunk-vendors"],
    },
    'vue_app_01': {
        entry: './src/main.js',
        chunks: ['chunk-vendors']
    },
    'vue_app_02': {
        entry: './src/newhampshir.js',
        chunks: ['chunk-vendors']
    },
}

module.exports = {
    pages: pages,
    filenameHashing: false,
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production'
        ? 'static/vue'
        : 'http://localhost:8080/',
    outputDir: '../django_vue_mpa/static/vue/',

    chainWebpack: config => {

        config.optimization
            .splitChunks({
                cacheGroups: {
                    moment: {
                        test: /[\/]node_modules[\/]moment/,
                        name: "chunk-moment",
                        chunks: "all",
                        priority: 5
                    },
                    vendor: {
                        test: /[\/]node_modules[\/]/,
                        name: "chunk-vendors",
                        chunks: "all",
                        priority: 1
                    },
                },
            });

        Object.keys(pages).forEach(page => {
            config.plugins.delete(`html-${page}`);
            config.plugins.delete(`preload-${page}`);
            config.plugins.delete(`prefetch-${page}`);
        })

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

        // Uncomment below to analyze bundle sizes
        // config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin);
        
        config.resolve.alias
            .set('__STATIC__', 'static')

        config.devServer
            .public('http://localhost:8080')
            .host('localhost')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({"Access-Control-Allow-Origin": ["*"]})

    }
};

Django/Nginx - Static files not found

0 Answers