How to organize "maintenance mode" in nuxt?

Question

Devops

Hey! We have a project on nuxt
Periodically, we update it by pushing changes to gitlab and issuing something like this command using CI
git checkout master && git pull origin master && yarn run build && pm2 restart nuxt-project
During the rebuild process, the project behaves inappropriately, Well, what is actually logical
Tell me, please, how to organize some kind of automatic "maintenance mode"?
So that when updating, all clients in the admin area would receive an overlay that blocks the interface
And that after a restart this overlay would be automatically removed?
Any ajax request can be answered that the site is in maintenance mode, for example, using middleware in laravel

if($isMaintenanceMode)
    return response('Service Temporarily Unavailable', 503);

In axios I can catch 503 error:

export default function ({ $axios, redirect }) {
  $axios.onError((request, error) => {
    const code = parseInt(error.response && error.response.status)
    if (code === 503) {
      console.log('503')
    }
  })
}

But I would like to make such an interception synchronous - suspend the application when a 503 code is received.
For example, here is a scenario in which we save a post from the admin panel, and then get a list of all posts:

await axios.post('/content', {title: 'test', content: 'content'}) //Сохраняем пост
/*Если тут получаем 503 код:
1 Приостанавливаем все остальное
2 Отображаем оверлей с сообщением что необходимо подождать
3 Начинаем повторять предыдущий запрос, пока не получим код, отличный от 503
4 При получении кода 200 убираем оверлей, продолжаем выполнение приложения */
await axios.get('/content') //Получаем список постов

Perhaps someone has thoughts on this?

Answer 1

Make the build in a folder different from the prod folder, if the build takes longer than 200ms (nuxt will always take longer...), and after the build, sync to the prod folder.
For example, I have:
generate builds in the dist folder, and nginx looks at the dist-public folder
in the npm pregenerate task, I calmly do rm -rf ./dist
in the npm postgenerate task, I do rsync -rd --delete dist/ dist-public
As a result while the build is in progress - the old version is on the production, when the build is completed rsync makes hardlinks, which happens very quickly and the new version is almost instantly on the production