I am currently facing an issue with my Vue.js application. I have set up a domain and subdomain for the application and now I want to host it. However, when I try to add the subdomain name, I keep encountering 500 Internal server errors. This is my first time hosting a website and I'm unsure of what I'm doing wrong.
Here is a snippet of my Vue.js config file:
const webpack = require('webpack');
module.exports = {
lintOnSave: false,
configureWebpack: {
// Our app aliases
resolve: {
alias: {
'chart.js': 'chart.js/dist/Chart.js'
}
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 6
})
],
devServer:{
disableHostCheck: true,
host: '0.0.0.0',
port: 8080,
public : 'spark.innovation.com',
},
},
pwa: {
name:' Dashboard',
themeColor: '#344675',
msTileColor: '#344675',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: '#344675'
},
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: false
}
},
css: {
sourceMap: process.env.NODE_ENV !== 'production'
}
};
Nginx server configuration
server {
listen 80;
listen 443;
server_name spark.xxxx.com www.spark.xxx.com;
root /home/ubuntu/frontend-app;
index index.html index.htm;
location / {
root /home/ubuntu/frontend-app;
try_files $uri /index.html;
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
I continue to receive the 500 Internal server error.
Any guidance or suggestions on how to resolve this would be greatly appreciated.