I've been researching and i've found out many problems similar to my problem.
I have a docker-compose running on Digital Ocean with NGinx, VueJS and Static Landing Page.
It's all good until I've created a new route with a form. This route will be accessed by a link sent by email to the customers with an id to identify who is accessing the page.
Structure example:
https://example.org -> landing page
https://example.org/quiz -> my vuejs application
https://example.org/quiz/confirmation/some-customer-id -> my router on vuejs
VueJS Configuration:
const webpack = require('webpack')
module.exports = {
devServer: {
port: '8092',
},
publicPath: '/quiz/',
runtimeCompiler: true,
configureWebpack: {
entry: {
main: path.resolve(__dirname, 'src/main.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: process.env.production ? '[name].[contenthash:8].js' : '[name].[hash].js',
},
plugins: [
new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
},
},
},
},
},
},
lintOnSave: true,
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/assets/scss/app-custom.scss";
`,
},
},
},
chainWebpack: (config) => {
config.plugins.delete('prefetch')
},
}
VueJS Router Configuration:
import VueRouter from 'vue-router'
import {Trans} from '@/plugins/translation'
import {ROUTER_NAME} from "./names";
const Quiz = () => import(/* webpackChunkName: "Quiz" */ '@/views/Quiz.vue')
const QuizResults = () => import(/* webpackChunkName: "QuizResults" */ '@/views/QuizResults.vue')
const QuizSuccess = () => import(/* webpackChunkName: "QuizSuccess" */ '@/views/QuizSuccess.vue')
const QuizConfirmation = () => import(/* webpackChunkName: "QuizResults" */ '@/views/QuizConfirmation.vue')
Vue.use(VueRouter)
const routes = [
{
path: '/:lang',
component: {
template: '<router-view></router-view>',
},
beforeEnter: Trans.routeMiddleware,
children: [
{
path: '/',
name: ROUTER_NAME.QUIZ,
component: Quiz
}, {
path: '/results',
name: ROUTER_NAME.QUIZ_RESULTS,
component: QuizResults
}, {
path: '/success',
name: ROUTER_NAME.QUIZ_SUCCESS,
component: QuizSuccess
}
]
},
{
path: '/confirmation/:quizId',
name: ROUTER_NAME.QUIZ_CONFIRMATION,
component: QuizConfirmation,
props: true
},
{
// Redirect user to supported lang version.
path: '*',
redirect(to) {
return Trans.defaultLanguage
}
}
]
const router = new VueRouter({
mode: 'history',
base: '/quiz/',
routes
})
export default router
NGinx configuration:
listen 80;
listen [::]:80;
server_name example.org www.example.org;
location ~ /.well-known/acme-challenge {
allow all;
root /var/www/html;
}
location / {
rewrite ^ https://$host$request_uri? permanent;
}
location /quiz {
rewrite ^ https://$host$request_uri? permanent;
}
location /shop {
rewrite ^ https://$host$request_uri? permanent;
}
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name example.org www.example.org;
server_tokens off;
ssl_certificate /etc/letsencrypt/live/mysite.org/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/mysite.org/privkey.pem;
ssl_buffer_size 8k;
ssl_dhparam /etc/ssl/certs/dhparam-2048.pem;
ssl_protocols TLSv1.2 TLSv1.1 TLSv1;
ssl_prefer_server_ciphers on;
ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;
ssl_ecdh_curve secp384r1;
ssl_session_tickets off;
ssl_stapling on;
ssl_stapling_verify on;
resolver 8.8.8.8;
location / {
try_files $uri $uri/ =404;
}
location /quiz {
alias /var/www/html/quiz;
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ /quiz/index.html;
}
location = /favicon.ico {
log_not_found off; access_log off;
}
location = /robots.txt {
log_not_found off; access_log off; allow all;
}
location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
expires max;
log_not_found off;
}
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
}
I have followed all available documentation and stackoverflow questions but all of them aren't working.
Basically, when I click on the link https://example.org/quiz/confirmation/some-customer-id the site is redirect to /quiz/index.html defined on location /quiz configuration:
location /quiz {
alias /var/www/html/quiz;
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ /quiz/index.html;
}
Do you know what can I do to solve this issue? If you need any more information, let me know.
Thanks guys.
