I have a Vue.js application that is working fine. I have a domain and subdomain name for the application, and I want to host it. My application is running locally, but when I try to add a subdomain name to it, it shows 500 Internal server errors. I am trying to host a website for the first time, so I don't know what I am doing wrong.
My Vue.js config file looks like this:
const webpack = require('webpack');
module.exports = {
lintOnSave: false,
configureWebpack: {
// Set up all the aliases we use in our app.
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: {
// Enable CSS source maps.
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 am getting 500 Internal server error.
Any advice or tips to how to solve it?
By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g.https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.
Morever you need to configure you web server, where you are trying to deploy you Vue app.
Nginx Conf (Minimal)
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
location / {
try_files $uri $uri/ /index.html;
}
}
Reference - https://cli.vuejs.org/config/#publicpath
Deployment - https://cli.vuejs.org/guide/deployment.html