I have a domain that serves more than one application with different programming languanges. So when we access the application through the browser, the URL should be:
mydomain.org/app-name
I need help on how to deploy my NUXT SSR app on subdirectory.
This is my nginx configuration:
map $sent_http_content_type $expires {
"text/html" epoch;
"text/html; charset=utf-8" epoch;
default off;
}
server {
#listen 80;
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name mydomain.org;
if ($scheme = "http") {
return 301 mydomain.org$request_uri;
}
# note that these lines are originally from the "location /" block
root /usr/share/nginx/html;
index index.php index.html index.htm main.js server.js;
charset utf-8;
location /app-one/ {
try_files $uri $uri/ /app-one/index.php?$args;
}
location /app-two/ {
try_files $uri $uri/ /app-two/index.php?$args;
}
#here is my nuxt app
location /nuxt-app/ {
expires $expires;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://publicIPAddress:3015/;
}
Below is my nuxt.config.js:
const pkg = require("./package");
const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");
import axios from "axios";
module.exports = {
server: {
port: 3015
},
router: {
base: "/payroll-staging/",
// prefetchLinks: true
},
/*
** Build configuration
*/
build: {
transpile: ["vuetify/lib"],
plugins: [new VuetifyLoaderPlugin()],
loaders: {
stylus: {
import: ["~assets/style/variables.styl"]
}
},
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
},
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
}
};
I also set this code inside package.json file:
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3015"
}
}
I already tried using ecosystem.config.js file:
module.exports = {
apps: [
{
name: 'app-name',
exec_mode: 'cluster',
instances: 'max', // Or a number of instances
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}
After that I run:
% npm run build
% pm2 start
But the result when I tried to access the app URL, it always returns:
Cannot GET /
Can someone help me to fix this? Maybe there is another step that I missed?